chore: extract bg and theme colors to constants (#2662)

constants/index.ts

@@ -28,3 +28,10 @@ export const STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE = 'elk-last-accessed-explor
 export const HANDLED_MASTO_URLS = /^(https?:\/\/)?([\w\d-]+\.)+\w+\/(@[@\w\d-\.]+)(\/objects)?(\/\d+)?$/
 
 export const NOTIFICATION_FILTER_TYPES: mastodon.v1.NotificationType[] = ['status', 'reblog', 'follow', 'follow_request', 'favourite', 'poll', 'update', 'admin.sign_up', 'admin.report']
+
+export const THEME_COLORS = {
+  themeDark: '#111111',
+  themeLight: '#fafafa',
+  backgroundDark: '#fafafa',
+  backgroundLight: '#111111',
+} as const

modules/pwa/i18n.ts

@@ -4,6 +4,7 @@ import { createResolver } from '@nuxt/kit'
 import type { ManifestOptions } from 'vite-plugin-pwa'
 import { getEnv } from '../../config/env'
 import { currentLocales } from '../../config/i18n'
+import { THEME_COLORS } from '../../constants/index'
 
 export type LocalizedWebManifest = Record<string, Partial<ManifestOptions>>
 
@@ -217,8 +218,8 @@ export async function createI18n(): Promise<LocalizedWebManifest> {
       short_name,
       description,
       dir,
-      background_color: '#111111',
-      theme_color: '#fafafa',
+      background_color: THEME_COLORS.backgroundLight,
+      theme_color: THEME_COLORS.themeLight,
       ...manifestEntries,
       shortcuts,
       screenshots,
@@ -229,8 +230,8 @@ export async function createI18n(): Promise<LocalizedWebManifest> {
       short_name,
       description,
       dir,
-      background_color: '#fafafa',
-      theme_color: '#111111',
+      background_color: THEME_COLORS.backgroundDark,
+      theme_color: THEME_COLORS.themeDark,
       ...manifestEntries,
       shortcuts,
       screenshots,

plugins/color-mode.ts

@@ -1,10 +1,12 @@
+import { THEME_COLORS } from '~/constants'
+
 export default defineNuxtPlugin(() => {
   const colorMode = useColorMode()
   useHead({
     meta: [{
       id: 'theme-color',
       name: 'theme-color',
-      content: () => colorMode.value === 'dark' ? '#111111' : '#fafafa',
+      content: () => colorMode.value === 'dark' ? THEME_COLORS.themeDark : THEME_COLORS.themeLight,
     }],
   })
 })