[#203] Add alternative appIcon for dark-mode

Signed-off-by: Knut Ahlers <[email protected]>
Luzifer · Dec 5, 2024 · fa5fef0 · fa5fef0
1 parent 6f59345
commit fa5fef0
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/pkg/customization/customize.go b/pkg/customization/customize.go
@@ -23,6 +23,7 @@ type (
 	// Customize holds the structure of the customization file
 	Customize struct {
 		AppIcon              string `json:"appIcon,omitempty" yaml:"appIcon"`
+		AppIconDark          string `json:"appIconDark,omitempty" yaml:"appIconDark"`
 		AppTitle             string `json:"appTitle,omitempty" yaml:"appTitle"`
 		DisableAppTitle      bool   `json:"disableAppTitle,omitempty" yaml:"disableAppTitle"`
 		DisablePoweredBy     bool   `json:"disablePoweredBy,omitempty" yaml:"disablePoweredBy"`

diff --git a/src/components/navbar.vue b/src/components/navbar.vue
@@ -7,13 +7,13 @@
         @click.prevent="$root.navigate('/')"
       >
         <i
-          v-if="!$root.customize.appIcon"
+          v-if="!appIcon"
           class="fas fa-user-secret mr-1"
         />
         <img
           v-else
           class="mr-1"
-          :src="$root.customize.appIcon"
+          :src="appIcon"
         >
         <span v-if="!$root.customize.disableAppTitle">{{ $root.customize.appTitle }}</span>
       </a>
@@ -77,6 +77,17 @@
 
 <script>
 export default {
+  computed: {
+    appIcon() {
+      // Use specified icon or fall back to null
+      const appIcon = this.$root.customize.appIcon || null
+      // Use specified icon or fall back to light-mode appIcon (which might be null)
+      const darkIcon = this.$root.customize.appIconDark || appIcon
+
+      return this.$root.darkTheme ? darkIcon : appIcon
+    },
+  },
+
   name: 'AppNavbar',
 }
 </script>