feat: add contrast bg theme for black mode

Author: alexdln

app/assets/main.css

@@ -64,6 +64,13 @@
   --bg-elevated: oklch(0.252 0.007 34.298);
 }
 
+:root[data-theme='dark'][data-bg-theme='contrast'] {
+  --bg: oklch(0 0 0);
+  --bg-subtle: oklch(0.148 0 0);
+  --bg-muted: oklch(0.204 0 0);
+  --bg-elevated: oklch(0.264 0 0);
+}
+
 :root[data-theme='light'] {
   --bg: var(--bg-color, oklch(1 0 0));
   --bg-subtle: var(--bg-subtle-color, oklch(0.979 0.001 286.375));

shared/utils/constants.ts

@@ -40,4 +40,5 @@ export const BACKGROUND_THEMES = {
   stone: 'oklch(0.555 0.013 58.123)',
   zinc: 'oklch(0.555 0.016 285.931)',
   slate: 'oklch(0.555 0.046 257.407)',
+  contrast: 'oklch(0.4 0 0)',
 } as const

test/nuxt/a11y.spec.ts

@@ -1808,6 +1808,8 @@ describe('background theme accessibility', () => {
     ['dark', 'zinc'],
     ['light', 'slate'],
     ['dark', 'slate'],
+    ['light', 'contrast'],
+    ['dark', 'contrast'],
   ] as const
 
   function applyTheme(colorMode: string, bgTheme: string | null) {