fix: selection bg in dark mode

Signed-off-by: Innei <[email protected]>

Author: Innei

src/components/modules/shared/AccentColorStyleInjector.tsx

@@ -49,6 +49,11 @@ export async function AccentColorStyleInjector({
   const [hl, sl, ll] = lightOklch
   const [hd, sd, ld] = darkOklch
 
+  const [lightBgImage, darkBgImage] = await Promise.all([
+    createPngNoiseBackground(currentAccentColorLRef),
+    createPngNoiseBackground(currentAccentColorDRef),
+  ])
+
   return (
     <style
       id="accent-color-style"
@@ -57,10 +62,10 @@ export async function AccentColorStyleInjector({
       dangerouslySetInnerHTML={{
         __html: `
         html[data-theme='light'].noise body::before {
-          background-image: ${await createPngNoiseBackground(currentAccentColorLRef)}
+          background-image: ${lightBgImage}
         }
         html[data-theme='dark'].noise body::before {
-          background-image: ${await createPngNoiseBackground(currentAccentColorDRef)}
+          background-image: ${darkBgImage}
         }
         html[data-theme='light'] {
           --a: ${`${hl} ${sl} ${ll}`};

src/styles/variables.css

@@ -1,11 +1,8 @@
 html {
-  --border-color: #eee;
   --font-sans: theme('fontFamily.sans');
-  --theme-color: var(--auto-theme-color, theme('colors.accent'));
-  --hover-color: var(--auto-hover-color, theme('colors.accent/80'));
-  --header-height: auto;
+
   /* Accent color for form controls */
-  accent-color: var(--theme-color);
+  accent-color: theme(colors.accent);
 
   /* make app like native app in mobile */
   -webkit-tap-highlight-color: transparent;
@@ -27,11 +24,15 @@ details summary {
 }
 
 ::selection {
-  background-color: var(--theme-color) !important;
+  background-color: theme(colors.accent);
   color: theme(colors.white) !important;
   text-shadow: none;
 }
 
+[data-theme='dark'] ::selection {
+  background-color: theme(colors.accent/0.3);
+}
+
 ::view-transition-new(root) {
   animation: turnOff 800ms ease-in-out;
 }