From b9390c57ba6306795e622ec113c132ff798900a3 Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Tue, 16 Apr 2024 23:03:29 +0800
Subject: [PATCH] fix: selection bg in dark mode

Signed-off-by: Innei <i@innei.in>
---
 .../modules/shared/AccentColorStyleInjector.tsx     |  9 +++++++--
 src/styles/variables.css                            | 13 +++++++------
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/components/modules/shared/AccentColorStyleInjector.tsx b/src/components/modules/shared/AccentColorStyleInjector.tsx
index 85c86f3a26..3e1a739bf6 100644
--- a/src/components/modules/shared/AccentColorStyleInjector.tsx
+++ b/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}`};
diff --git a/src/styles/variables.css b/src/styles/variables.css
index 8d5bd6d813..55e8d8a9f5 100644
--- a/src/styles/variables.css
+++ b/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;
 }