From 4954473f507aee37373467ae00c60d50abd2ee4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= <userquin@gmail.com>
Date: Thu, 7 Mar 2024 20:15:35 +0100
Subject: [PATCH] chore: extract bg and theme colors to constants (#2662)

---
 constants/index.ts    | 7 +++++++
 modules/pwa/i18n.ts   | 9 +++++----
 plugins/color-mode.ts | 4 +++-
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/constants/index.ts b/constants/index.ts
index cdc839b7..ee4aa5c7 100644
--- a/constants/index.ts
+++ b/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
diff --git a/modules/pwa/i18n.ts b/modules/pwa/i18n.ts
index 02c5643f..a67297d1 100644
--- a/modules/pwa/i18n.ts
+++ b/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,
diff --git a/plugins/color-mode.ts b/plugins/color-mode.ts
index 0415c38f..f00e250e 100644
--- a/plugins/color-mode.ts
+++ b/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,
     }],
   })
 })