style: new theme selector

src/features/background/options/BackgroundOptions.jsx

@@ -171,6 +171,62 @@ function BackgroundOptions() {
     </>
   );
 
+  const EffectsOptions = () => (
+    <PreferencesWrapper>
+      <Row final={true}>
+        <Content
+          title={variables.getMessage('settings:sections.background.effects.title')}
+          subtitle={variables.getMessage('settings:sections.background.effects.subtitle')}
+        />
+        <Action>
+          <Slider
+            title={variables.getMessage('settings:sections.background.effects.blur')}
+            name="blur"
+            min="0"
+            max="100"
+            default="0"
+            display="%"
+            marks={values.background}
+            category="backgroundeffect"
+            element="#backgroundImage"
+          />
+          <Slider
+            title={variables.getMessage('settings:sections.background.effects.brightness')}
+            name="brightness"
+            min="0"
+            max="100"
+            default="90"
+            display="%"
+            marks={values.background}
+            category="backgroundeffect"
+            element="#backgroundImage"
+          />
+          <Dropdown
+            label={variables.getMessage('settings:sections.background.effects.filters.title')}
+            name="backgroundFilter"
+            onChange={(value) => setBackgroundFilter(value)}
+            category="backgroundeffect"
+            element="#backgroundImage"
+            items={backgroundImageEffects}
+          />
+          {backgroundFilter !== 'none' && (
+            <Slider
+              title={variables.getMessage('settings:sections.background.effects.filters.amount')}
+              name="backgroundFilterAmount"
+              min="0"
+              max="100"
+              default="0"
+              display="%"
+              marks={values.background}
+              category="backgroundeffect"
+              element="#backgroundImage"
+            />
+          )}
+        </Action>
+      </Row>
+    </PreferencesWrapper>
+  );
+
   let backgroundSettings = APISettings;
   switch (backgroundType) {
     case 'custom':
@@ -234,28 +290,6 @@ function BackgroundOptions() {
       {header}
       {subSection === '' ? (
         <>
-          {/*<div className="moreSettings" onClick={() => setBackgroundSettingsSection(true)}>
-            <div className="left">
-              <MdSource />
-              <div className="content">
-                <span className="title">
-                  {variables.getMessage('settings:sections.background.source.title')}
-                </span>
-                <span className="subtitle">
-                  {variables.getMessage('settings:sections.background.source.subtitle')}
-                </span>
-              </div>
-            </div>
-            <div className="action">
-              <Dropdown
-                label={variables.getMessage('settings:sections.background.type.title')}
-                name="backgroundType"
-                onChange={(value) => this.setState({ backgroundType: value })}
-                category="background"
-                items={getBackgroundOptionItems(marketplaceEnabled)}
-              />
-            </div>
-          </div>*/}
           <Section
             id="source"
             title={variables.getMessage('settings:sections.background.source.title')}
@@ -335,57 +369,7 @@ function BackgroundOptions() {
       )}
       {(backgroundType === 'api' || backgroundType === 'custom' || marketplaceEnabled) &&
       subSection === 'effects' ? (
-        <Row final={true}>
-          <Content
-            title={variables.getMessage('settings:sections.background.effects.title')}
-            subtitle={variables.getMessage('settings:sections.background.effects.subtitle')}
-          />
-          <Action>
-            <Slider
-              title={variables.getMessage('settings:sections.background.effects.blur')}
-              name="blur"
-              min="0"
-              max="100"
-              default="0"
-              display="%"
-              marks={values.background}
-              category="backgroundeffect"
-              element="#backgroundImage"
-            />
-            <Slider
-              title={variables.getMessage('settings:sections.background.effects.brightness')}
-              name="brightness"
-              min="0"
-              max="100"
-              default="90"
-              display="%"
-              marks={values.background}
-              category="backgroundeffect"
-              element="#backgroundImage"
-            />
-            <Dropdown
-              label={variables.getMessage('settings:sections.background.effects.filters.title')}
-              name="backgroundFilter"
-              onChange={(value) => setBackgroundFilter(value)}
-              category="backgroundeffect"
-              element="#backgroundImage"
-              items={backgroundImageEffects}
-            />
-            {backgroundFilter !== 'none' && (
-              <Slider
-                title={variables.getMessage('settings:sections.background.effects.filters.amount')}
-                name="backgroundFilterAmount"
-                min="0"
-                max="100"
-                default="0"
-                display="%"
-                marks={values.background}
-                category="backgroundeffect"
-                element="#backgroundImage"
-              />
-            )}
-          </Action>
-        </Row>
+        <>{EffectsOptions()}</>
       ) : null}
     </>
   );

src/features/misc/sections/Appearance.jsx

@@ -19,6 +19,7 @@ import values from 'utils/data/slider_values.json';
 
 function AppearanceOptions() {
   const [accessibility, setAccessibility] = useState(false);
+  const [currentTheme, setCurrentTheme] = useState(localStorage.getItem('theme') || 'auto');
   const { subSection } = useTab();
 
   const ThemeSelection = () => {
@@ -223,6 +224,58 @@ function AppearanceOptions() {
     );
   };
 
+  const newThemeSelector = (currentTheme) => {
+    const themes = [
+      {
+        example: 'light.jpg',
+        name: variables.getMessage('settings:sections.appearance.theme.light'),
+        value: 'light',
+      },
+      {
+        example: 'dark.jpg',
+        name: variables.getMessage('settings:sections.appearance.theme.dark'),
+        value: 'dark',
+      },
+      {
+        example: 'light.jpg',
+        name: variables.getMessage('settings:sections.appearance.theme.auto'),
+        value: 'auto',
+      },
+    ];
+
+    console.log(currentTheme);
+
+    const ThemeCard = ({ example, name, value }) => {
+      return (
+        <div
+          class={
+            'flex flex-col items-center rounded p-2 hover:bg-background-light hover:dark:bg-background-dark cursor-pointer' +
+            (currentTheme === value ? ' border-2 border-neutral-100' : '')
+          }
+        >
+          <img src={`theme-examples/${example}`} alt="Light theme" class="rounded-t" />
+          <div class="py-4">{name}</div>
+        </div>
+      );
+    };
+
+    return (
+      <div class="bg-modal-content-light dark:bg-modal-content-dark p-10 rounded divide-gray-500 flex flex-col gap-5">
+        <h1 class="text-3xl tracking-tight font-semibold">
+          {variables.getMessage('settings:sections.appearance.theme.title')}
+        </h1>
+        <p class="text-neutral-300">
+          {variables.getMessage('settings:sections.appearance.theme.description')}
+        </p>
+        <div class="grid grid-cols-3 items-center gap-28">
+          {themes.map((theme) => (
+            <ThemeCard key={theme.value} {...theme} />
+          ))}
+        </div>
+      </div>
+    );
+  };
+
   let header;
   if (accessibility) {
     header = (
@@ -240,7 +293,7 @@ function AppearanceOptions() {
   }
   return (
     <>
-      {header}
+      {/*{header}*/}
       {subSection === 'accessibility' ? (
         <AccessibilityOptions />
       ) : (
@@ -254,9 +307,14 @@ function AppearanceOptions() {
             icon={<MdAccessibility />}
             onClick={() => setAccessibility(true)}
           />
+          {newThemeSelector(currentTheme)}
           <PreferencesWrapper>
             <ThemeSelection />
+          </PreferencesWrapper>
+          <PreferencesWrapper>
             <FontOptions />
+          </PreferencesWrapper>
+          <PreferencesWrapper>
             <WidgetStyle />
           </PreferencesWrapper>
         </>