forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: apply accent colours via css vars (#1182)
authored by
Daniel Roe
and committed by
GitHub
90ca00f9
a851472d
+23
-45
+16
app/assets/main.css
+16
app/assets/main.css
···
27
27
--accent: var(--accent-color, oklch(1 0 0));
28
28
--accent-muted: var(--accent-color, oklch(0.922 0 0));
29
29
30
+
/* accent colors */
31
+
--swatch-coral: oklch(0.704 0.177 14.75);
32
+
--swatch-amber: oklch(0.828 0.165 84.429);
33
+
--swatch-emerald: oklch(0.792 0.153 166.95);
34
+
--swatch-sky: oklch(0.787 0.128 230.318);
35
+
--swatch-violet: oklch(0.78 0.148 286.067);
36
+
--swatch-magenta: oklch(0.78 0.15 330);
37
+
30
38
/* syntax highlighting colors */
31
39
--syntax-fn: oklch(0.727 0.137 299.149);
32
40
--syntax-str: oklch(0.829 0.088 252.458);
···
88
96
89
97
--accent: var(--accent-color, oklch(0.145 0 0));
90
98
--accent-muted: var(--accent-color, oklch(0.205 0 0));
99
+
100
+
/* accent colors */
101
+
--swatch-coral: oklch(0.7 0.19 14.75);
102
+
--swatch-amber: oklch(0.8 0.25 84.429);
103
+
--swatch-emerald: oklch(0.7 0.17 166.95);
104
+
--swatch-sky: oklch(0.7 0.15 230.318);
105
+
--swatch-violet: oklch(0.7 0.17 286.067);
106
+
--swatch-magenta: oklch(0.75 0.18 330);
91
107
92
108
--syntax-fn: oklch(0.502 0.188 294.988);
93
109
--syntax-str: oklch(0.425 0.152 252);
+1
-1
app/components/Settings/AccentColorPicker.vue
+1
-1
app/components/Settings/AccentColorPicker.vue
···
24
24
v-for="color in accentColors"
25
25
:key="color.id"
26
26
class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 cursor-pointer has-[:checked]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) has-[:focus-visible]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle)"
27
-
:style="{ backgroundColor: color.value }"
27
+
:style="{ backgroundColor: `var(--swatch-${color.id})` }"
28
28
>
29
29
<input
30
30
type="radio"
+1
-13
app/composables/useSettings.ts
+1
-13
app/composables/useSettings.ts
···
91
91
92
92
function setAccentColor(id: AccentColorId | null) {
93
93
if (id) {
94
-
const isDark = colorMode.value === 'dark'
95
-
const color = isDark ? ACCENT_COLORS.dark[id] : ACCENT_COLORS.light[id]
96
-
document.documentElement.style.setProperty('--accent-color', color)
94
+
document.documentElement.style.setProperty('--accent-color', `var(--swatch-${id})`)
97
95
} else {
98
96
document.documentElement.style.removeProperty('--accent-color')
99
97
}
100
98
settings.value.accentColorId = id
101
99
}
102
-
103
-
// Update accent color when color mode changes
104
-
watch(
105
-
() => colorMode.value,
106
-
() => {
107
-
if (settings.value.accentColorId) {
108
-
setAccentColor(settings.value.accentColorId)
109
-
}
110
-
},
111
-
)
112
100
113
101
return {
114
102
accentColors,
+5
-31
app/utils/prehydrate.ts
+5
-31
app/utils/prehydrate.ts
···
1
-
import type { ACCENT_COLORS } from '#shared/utils/constants'
2
-
3
-
type AccentColorId = keyof typeof ACCENT_COLORS.light // for both themes color names are same
4
-
5
1
/**
6
2
* Initialize user preferences before hydration to prevent flash/layout shift.
7
3
* This sets CSS custom properties and data attributes that CSS can use
···
13
9
// Callback is stringified by Nuxt - external variables won't be available.
14
10
// All constants must be hardcoded inside the callback.
15
11
onPrehydrate(() => {
16
-
// Accent colors - hardcoded since ACCENT_COLORS can't be referenced
17
-
18
-
const colors = {
19
-
light: {
20
-
coral: 'oklch(0.70 0.19 14.75)',
21
-
amber: 'oklch(0.8 0.25 84.429)',
22
-
emerald: 'oklch(0.70 0.17 166.95)',
23
-
sky: 'oklch(0.70 0.15 230.318)',
24
-
violet: 'oklch(0.70 0.17 286.067)',
25
-
magenta: 'oklch(0.75 0.18 330)',
26
-
},
27
-
dark: {
28
-
coral: 'oklch(0.704 0.177 14.75)',
29
-
amber: 'oklch(0.828 0.165 84.429)',
30
-
emerald: 'oklch(0.792 0.153 166.95)',
31
-
sky: 'oklch(0.787 0.128 230.318)',
32
-
violet: 'oklch(0.78 0.148 286.067)',
33
-
magenta: 'oklch(0.78 0.15 330)',
34
-
},
35
-
}
12
+
// Valid accent color IDs (must match --swatch-* variables defined in main.css)
13
+
const accentColorIds = new Set(['coral', 'amber', 'emerald', 'sky', 'violet', 'magenta'])
36
14
37
15
// Valid package manager IDs
38
16
const validPMs = new Set(['npm', 'pnpm', 'yarn', 'bun', 'deno', 'vlt'])
···
40
18
// Read settings from localStorage
41
19
const settings = JSON.parse(localStorage.getItem('npmx-settings') || '{}')
42
20
43
-
// Determine theme (default to 'dark')
44
-
const theme = document.documentElement.dataset.theme === 'light' ? 'light' : 'dark'
45
-
46
-
// Apply accent color based on theme
47
-
const accentColorId = settings.accentColorId as AccentColorId | undefined
48
-
if (accentColorId && colors[theme][accentColorId]) {
49
-
document.documentElement.style.setProperty('--accent-color', colors[theme][accentColorId])
21
+
const accentColorId = settings.accentColorId
22
+
if (accentColorId && accentColorIds.has(accentColorId)) {
23
+
document.documentElement.style.setProperty('--accent-color', `var(--swatch-${accentColorId})`)
50
24
}
51
25
52
26
// Apply background accent