feat: Provide an option to display the sun or moon icon in solid (#76)

FriendsOfFlarum · Oct 19, 2024 · 01faed5 · 01faed5
1 parent 9cfc947
commit 01faed5
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 24 deletions.
diff --git a/extend.php b/extend.php
@@ -46,6 +46,7 @@
     (new Extend\Settings())
         ->default('fof-nightmode.default_theme', 0)
         ->default('fofNightMode.show_theme_toggle_on_header_always', false)
+        ->default('fofNightMode.show_theme_toggle_in_solid', true)
         ->serializeToForum('fofNightMode_autoUnsupportedFallback', 'theme_dark_mode', function ($val) {
             $val = (bool) $val;
 
@@ -57,7 +58,8 @@
             return 1;
         }, false)
         ->serializeToForum('fofNightMode.showThemeToggleOnHeaderAlways', 'fofNightMode.show_theme_toggle_on_header_always', 'boolval')
-        ->serializeToForum('fof-nightmode.default_theme', 'fof-nightmode.default_theme', 'intval'),
+        ->serializeToForum('fof-nightmode.default_theme', 'fof-nightmode.default_theme', 'intval')
+        ->serializeToForum('fofNightMode.showThemeToggleInSolid', 'fofNightMode.show_theme_toggle_in_solid', 'boolval'),
 
     (new Extend\Conditional())
         ->whenExtensionEnabled('fof-default-user-preferences', fn () => [

diff --git a/js/src/admin/components/NightmodeSettingsPage.tsx b/js/src/admin/components/NightmodeSettingsPage.tsx
@@ -48,6 +48,15 @@ export default class NightmodeSettingsPage extends ExtensionPage {
       })
     );
 
+    items.add(
+      'icon-style',
+      this.buildSettingComponent({
+        label: app.translator.trans('fof-nightmode.admin.settings.modal.show_theme_toggle_in_solid'),
+        setting: 'fofNightMode.show_theme_toggle_in_solid',
+        type: 'switch',
+      })
+    );
+
     items.add(
       'default-theme',
       this.buildSettingComponent({

diff --git a/js/src/forum/addSettingsItems.js b/js/src/forum/addSettingsItems.js
@@ -126,18 +126,16 @@ export default function () {
     const theme = getTheme();
     const isLight = getIsLight(theme);
 
+    const iconPrefix = app.forum.attribute('fofNightMode.showThemeToggleInSolid') ? 'fas fa-' : 'far fa-';
+
     items.add(
       'nightmode',
       <Button
         className="Button Button--flat"
         onclick={() => {
-          // const newTheme = toggleThrough(theme);
-
-          // perDevice.set(newTheme);
-          // setTheme();
           switchTheme();
         }}
-        icon={theme === Themes.AUTO ? 'fas fa-adjust' : `far fa-${isLight ? 'sun' : 'moon'}`}
+        icon={theme === Themes.AUTO ? 'fas fa-adjust' : `${isLight ? iconPrefix + 'sun' : iconPrefix + 'moon'}`}
       >
         {app.translator.trans('fof-nightmode.forum.header.nightmode_button')}
       </Button>,
@@ -150,31 +148,16 @@ export default function () {
 
     const isLight = getIsLight(getTheme());
 
+    const iconPrefix = app.forum.attribute('fofNightMode.showThemeToggleInSolid') ? 'fas fa-' : 'far fa-';
+
     // Add night mode link to session dropdown
     items.add(
       isLight ? 'nightmode' : 'daymode',
       Button.component(
         {
-          icon: `far fa-${isLight ? 'moon' : 'sun'}`,
+          icon: `${isLight ? iconPrefix + 'moon' : iconPrefix + 'sun'}`,
           onclick: () => {
             switchTheme();
-            // const val = isLight ? Themes.DARK : Themes.LIGHT;
-
-            // if (!!user.preferences().fofNightMode_perDevice) {
-            //   perDevice.set(val);
-            //   setTheme();
-            //   return;
-            // }
-
-            // user
-            //   .savePreferences({
-            //     fofNightMode: val,
-            //   })
-            //   .then(() => {
-            //     // need to force-update selected theme (as it's only set
-            //     // on a page load and redraw doesn't count as a apge load)
-            //     setTheme();
-            //   });
           },
         },
         app.translator.trans(`fof-nightmode.forum.${isLight ? 'night' : 'day'}`)

diff --git a/resources/locale/en.yml b/resources/locale/en.yml
@@ -11,6 +11,7 @@ fof-nightmode:
                 help: These settings control the basic behaviour of the extension.
             modal:
                 always_show_theme_toggle_on_header: Always show the theme switch button on the forum header
+                show_theme_toggle_in_solid: Show theme icon in solid icon
                 default_theme: Default forum theme
                 default_theme_helper: The default theme is automatically set for new users, guests and those who have no preference set.
                 theme_auto: => fof-nightmode.ref.auto