Skip to content

Commit b2f330b

Browse files
jellydeckjellydeck
committed
feat: accessible accent colors for dakr & light theme
1 parent 042d29a commit b2f330b

5 files changed

Lines changed: 74 additions & 33 deletions

File tree

‎app/components/Package/DownloadAnalytics.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ const isDarkMode = computed(() => resolvedMode.value === 'dark')
4646
4747
const accentColorValueById = computed<Record<string, string>>(() => {
4848
const map: Record<string, string> = {}
49-
for (const item of accentColors) {
49+
for (const item of accentColors.value) {
5050
map[item.id] = item.value
5151
}
5252
return map
@@ -621,7 +621,7 @@ const config = computed(() => {
621621
</label>
622622

623623
<div
624-
class="flex items-center px-2.5 py-1.75 bg-bg-subtle border border-border rounded-md focus-within:(border-border-hover ring-2 ring-accent/30)"
624+
class="flex items-center px-2.5 py-1.75 bg-bg-subtle border border-border rounded-md focus-within:(border-border-hover ring-2 ring-accent/70)"
625625
>
626626
<select
627627
id="granularity"
@@ -646,7 +646,7 @@ const config = computed(() => {
646646
{{ $t('package.downloads.start_date') }}
647647
</label>
648648
<div
649-
class="flex items-center gap-2 px-2.5 py-1.75 bg-bg-subtle border border-border rounded-md focus-within:(border-border-hover ring-2 ring-accent/30)"
649+
class="flex items-center gap-2 px-2.5 py-1.75 bg-bg-subtle border border-border rounded-md focus-within:(border-border-hover ring-2 ring-accent/70)"
650650
>
651651
<span class="i-carbon:calendar w-4 h-4 text-fg-subtle shrink-0" aria-hidden="true" />
652652
<input
@@ -666,7 +666,7 @@ const config = computed(() => {
666666
{{ $t('package.downloads.end_date') }}
667667
</label>
668668
<div
669-
class="flex items-center gap-2 px-2.5 py-1.75 bg-bg-subtle border border-border rounded-md focus-within:(border-border-hover ring-2 ring-accent/30)"
669+
class="flex items-center gap-2 px-2.5 py-1.75 bg-bg-subtle border border-border rounded-md focus-within:(border-border-hover ring-2 ring-accent/70)"
670670
>
671671
<span class="i-carbon:calendar w-4 h-4 text-fg-subtle shrink-0" aria-hidden="true" />
672672
<input
@@ -684,7 +684,7 @@ const config = computed(() => {
684684
v-if="showResetButton"
685685
type="button"
686686
aria-label="Reset date range"
687-
class="self-end flex items-center justify-center px-2.5 py-1.75 border border-transparent rounded-md text-fg-subtle hover:text-fg transition-colors hover:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 sm:mb-0"
687+
class="self-end flex items-center justify-center px-2.5 py-1.75 border border-transparent rounded-md text-fg-subtle hover:text-fg transition-colors hover:border-border focus-visible:outline-accent/70 sm:mb-0"
688688
@click="
689689
() => {
690690
hasUserEditedDates = false

‎app/components/Package/WeeklyDownloadStats.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ const isDarkMode = computed(() => resolvedMode.value === 'dark')
6464
6565
const accentColorValueById = computed<Record<string, string>>(() => {
6666
const map: Record<string, string> = {}
67-
for (const item of accentColors) {
67+
for (const item of accentColors.value) {
6868
map[item.id] = item.value
6969
}
7070
return map
@@ -202,7 +202,7 @@ const config = computed(() => {
202202
<button
203203
type="button"
204204
@click="openChartModal"
205-
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5 ms-auto shrink-0 self-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 rounded"
205+
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5 ms-auto shrink-0 self-center focus-visible:outline-accent/70 rounded"
206206
:title="$t('package.downloads.analyze')"
207207
>
208208
<span class="i-carbon:data-analytics w-4 h-4" aria-hidden="true" />

‎app/composables/useSettings.ts‎

Lines changed: 25 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { BACKGROUND_THEMES } from '#shared/utils/constants'
66

77
type BackgroundThemeId = keyof typeof BACKGROUND_THEMES
88

9-
type AccentColorId = keyof typeof ACCENT_COLORS
9+
type AccentColorId = keyof typeof ACCENT_COLORS.light
1010

1111
/**
1212
* Application settings stored in localStorage
@@ -76,23 +76,40 @@ export function useRelativeDates() {
7676
*/
7777
export function useAccentColor() {
7878
const { settings } = useSettings()
79+
const colorMode = useColorMode()
7980

80-
const accentColors = Object.entries(ACCENT_COLORS).map(([id, value]) => ({
81-
id: id as AccentColorId,
82-
name: id,
83-
value,
84-
}))
81+
const accentColors = computed(() => {
82+
const isDark = colorMode.value === 'dark'
83+
const colors = isDark ? ACCENT_COLORS.dark : ACCENT_COLORS.light
84+
85+
return Object.entries(colors).map(([id, value]) => ({
86+
id: id as AccentColorId,
87+
name: id,
88+
value,
89+
}))
90+
})
8591

8692
function setAccentColor(id: AccentColorId | null) {
87-
const color = id ? ACCENT_COLORS[id] : null
88-
if (color) {
93+
if (id) {
94+
const isDark = colorMode.value === 'dark'
95+
const color = isDark ? ACCENT_COLORS.dark[id] : ACCENT_COLORS.light[id]
8996
document.documentElement.style.setProperty('--accent-color', color)
9097
} else {
9198
document.documentElement.style.removeProperty('--accent-color')
9299
}
93100
settings.value.accentColorId = id
94101
}
95102

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+
96113
return {
97114
accentColors,
98115
selectedAccentColor: computed(() => settings.value.accentColorId),

‎app/utils/prehydrate.ts‎

Lines changed: 26 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { ACCENT_COLORS } from '#shared/utils/constants'
22

3-
type AccentColorId = keyof typeof ACCENT_COLORS
3+
type AccentColorId = keyof typeof ACCENT_COLORS.light // for both themes color names are same
44

55
/**
66
* Initialize user preferences before hydration to prevent flash/layout shift.
@@ -14,13 +14,24 @@ export function initPreferencesOnPrehydrate() {
1414
// All constants must be hardcoded inside the callback.
1515
onPrehydrate(() => {
1616
// Accent colors - hardcoded since ACCENT_COLORS can't be referenced
17-
const colors: Record<AccentColorId, string> = {
18-
rose: 'oklch(0.797 0.084 11.056)',
19-
amber: 'oklch(0.828 0.165 84.429)',
20-
emerald: 'oklch(0.792 0.153 166.95)',
21-
sky: 'oklch(0.787 0.128 230.318)',
22-
violet: 'oklch(0.714 0.148 286.067)',
23-
coral: 'oklch(0.704 0.177 14.75)',
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+
},
2435
}
2536

2637
// Valid package manager IDs
@@ -29,10 +40,13 @@ export function initPreferencesOnPrehydrate() {
2940
// Read settings from localStorage
3041
const settings = JSON.parse(localStorage.getItem('npmx-settings') || '{}')
3142

32-
// Apply accent color
33-
const color = settings.accentColorId ? colors[settings.accentColorId as AccentColorId] : null
34-
if (color) {
35-
document.documentElement.style.setProperty('--accent-color', color)
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])
3650
}
3751

3852
// Apply background accent

‎shared/utils/constants.ts‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -45,12 +45,22 @@ export const LIKES_SCOPE = `repo:${dev.npmx.feed.like.$nsid}`
4545

4646
// Theming
4747
export const ACCENT_COLORS = {
48-
rose: 'oklch(0.797 0.084 11.056)',
49-
amber: 'oklch(0.828 0.165 84.429)',
50-
emerald: 'oklch(0.792 0.153 166.95)',
51-
sky: 'oklch(0.787 0.128 230.318)',
52-
violet: 'oklch(0.714 0.148 286.067)',
53-
coral: 'oklch(0.704 0.177 14.75)',
48+
light: {
49+
coral: 'oklch(0.70 0.19 14.75)',
50+
amber: 'oklch(0.8 0.25 84.429)',
51+
emerald: 'oklch(0.70 0.17 166.95)',
52+
sky: 'oklch(0.70 0.15 230.318)',
53+
violet: 'oklch(0.70 0.17 286.067)',
54+
magenta: 'oklch(0.75 0.18 330)',
55+
},
56+
dark: {
57+
coral: 'oklch(0.704 0.177 14.75)',
58+
amber: 'oklch(0.828 0.165 84.429)',
59+
emerald: 'oklch(0.792 0.153 166.95)',
60+
sky: 'oklch(0.787 0.128 230.318)',
61+
violet: 'oklch(0.78 0.148 286.067)',
62+
magenta: 'oklch(0.78 0.15 330)',
63+
},
5464
} as const
5565

5666
export const BACKGROUND_THEMES = {

0 commit comments

Comments
 (0)