feat: dark/light flavor settings [WIP]

src/entries/content/index.ts

@@ -3,7 +3,7 @@ import { defineContentScript } from 'wxt/sandbox';
 import { observe } from 'selector-observer';
 
 import { type ReplacementSelectorSet, matches, sites } from '@/sites';
-import { flavor } from '@/storage';
+import { darkFlavor } from '@/storage';
 import { createStylesElement } from '@/utils';
 import { injectStyles, replaceIconInRow } from './lib';
 
@@ -43,6 +43,6 @@ function runReplacements(
 	}
 
 	const rawStyles = replacements.map(({ styles }) => styles || '').join('\n');
-	flavor.watch(() => injectStyles(stylesEl, rawStyles));
+	darkFlavor.watch(() => injectStyles(stylesEl, rawStyles));
 	injectStyles(stylesEl, rawStyles);
 }

src/entries/content/lib.ts

@@ -1,7 +1,7 @@
 import type { IconName } from '@/types';
 
 import { getAssociations } from '@/associations';
-import { flavor, monochrome, specificFolders } from '@/storage';
+import { darkFlavor, monochrome, specificFolders } from '@/storage';
 
 import { flavors } from '@catppuccin/palette';
 
@@ -13,7 +13,7 @@ export async function injectStyles(stylesEl: Element, siteStyles: string) {
 	stylesEl.textContent =
 		/* css */ `
 	:root {
-	${flavors[await flavor.getValue()].colorEntries
+	${flavors[await darkFlavor.getValue()].colorEntries
 		.map(([name, { hex }]) => `--ctp-${name}: ${hex};`)
 		.join('\n  ')}
 	}

src/entries/popup/main.ts

@@ -5,7 +5,7 @@ import type { Associations, Flavor, IconName } from '@/types';
 import { icons } from '@/constants';
 import {
 	customAssociations,
-	flavor,
+	darkFlavor,
 	monochrome,
 	specificFolders,
 } from '@/storage';
@@ -31,12 +31,12 @@ async function init() {
 
 	const flavorEl = document.querySelector('#flavor') as HTMLSelectElement;
 
-	flavorEl.value = await flavor.getValue();
+	flavorEl.value = await darkFlavor.getValue();
 	document.documentElement.setAttribute('theme', flavorEl.value);
 
 	flavorEl.addEventListener('change', async () => {
 		const value = flavorEl.value as Flavor;
-		await flavor.setValue(value);
+		await darkFlavor.setValue(value);
 		document.documentElement.setAttribute('theme', value);
 	});
 

src/storage.ts

@@ -1,9 +1,13 @@
 import type { Associations, Flavor } from './types';
 
-export const flavor = storage.defineItem<Flavor>('local:flavor', {
+export const darkFlavor = storage.defineItem<Flavor>('local:flavor', {
 	fallback: 'mocha',
 });
 
+export const lightFlavor = storage.defineItem<Flavor>('local:lightFlavor', {
+	fallback: 'latte',
+});
+
 export const customAssociations = storage.defineItem<Associations>(
 	'local:associations',
 	{