fix: selection bg in dark mode

Signed-off-by: Innei <i@innei.in>
Innei · Apr 16, 2024 · b9390c5 · b9390c5
1 parent 5630729
commit b9390c5
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git 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
@@ -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;
 }