Merge pull request #124 from filips123/restore-accent-colors

Restore normal accent colors

Author: filips123

website/src/App.vue

@@ -21,14 +21,15 @@ import NavigationMobile from '@/components/NavigationMobile.vue'
 import { useSnackbarStore } from '@/composables/snackbar'
 import { useSessionStore } from '@/stores/session'
 import { ThemeType, useSettingsStore } from '@/stores/settings'
+import { accentColors } from '@/utils/colors'
 import { updateAllData } from '@/utils/update'
 
 const router = useRouter()
 const { mobile } = useDisplay()
 const theme = useTheme()
 
 const { currentEntityList } = storeToRefs(useSessionStore())
-const { themeType, enablePullToRefresh } = storeToRefs(useSettingsStore())
+const { themeType, accentColor, enablePullToRefresh } = storeToRefs(useSettingsStore())
 
 const routerTitle = computed(() => router.currentRoute.value.meta.title)
 
@@ -74,6 +75,23 @@ watch(
   { immediate: true },
 )
 
+watch(
+  accentColor,
+  accentColor => {
+    const color = accentColors.find(color => color.name === accentColor)!
+
+    theme.themes.value.light.colors.primary = color.primary
+    theme.themes.value.light.colors.secondary = color.secondaryLight
+    theme.themes.value.light.variables['current-time-color'] = color.currentTime
+
+    theme.themes.value.dark.colors.primary = color.primary
+    theme.themes.value.dark.colors.secondary = color.secondaryDark
+
+    document.querySelector('meta[name="theme-color"]')?.setAttribute('content', color.theme)
+  },
+  { immediate: true },
+)
+
 const pages: { title: string; link: string; icon: string }[] = [
   { title: 'Viri', link: 'sources', icon: mdiFileDocumentOutline },
   { title: 'Naročanje', link: 'subscribe', icon: mdiRss },

website/src/plugins/vuetify.ts

@@ -8,7 +8,7 @@ import { sl } from 'vuetify/locale'
 
 import { AccentColorName, accentColors } from '@/utils/colors'
 
-const accentColor = accentColors.find(color => color.name === AccentColorName.Black)!
+const accentColor = accentColors.find(color => color.name === AccentColorName.Green)!
 
 const lightTheme: ThemeDefinition = {
   dark: false,