Skip to content

Commit 2ca79ab

Browse files
alexdlnautofix-ci[bot]
alexdln
and
autofix-ci[bot]
authored
feat: apply April research results (#2353)
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
1 parent 2af4011 commit 2ca79ab

File tree

4 files changed

+117
-96
lines changed

4 files changed

+117
-96
lines changed

‎app/assets/main.css‎

Lines changed: 100 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -5,83 +5,84 @@
55
box-sizing: border-box;
66
}
77

8-
:root:not([data-theme='light']),
9-
:root[data-theme='dark'] {
10-
/* background colors */
11-
--bg: var(--bg-color, oklch(0.171 0 0));
12-
--bg-subtle: var(--bg-subtle-color, oklch(0.198 0 0));
13-
--bg-muted: var(--bg-muted-color, oklch(0.236 0 0));
14-
--bg-elevated: var(--bg-elevated-color, oklch(0.266 0 0));
15-
16-
/* text colors */
17-
--fg: oklch(0.982 0 0);
18-
--fg-muted: oklch(0.749 0 0);
19-
--fg-subtle: oklch(0.673 0 0);
20-
21-
/* border, separator colors */
22-
--border: oklch(0.269 0 0);
23-
--border-subtle: oklch(0.239 0 0);
24-
--border-hover: oklch(0.371 0 0);
25-
26-
/* accent color, set by user from settings */
27-
--accent: var(--accent-color, oklch(0.787 0.128 230.318));
28-
--accent-muted: var(--accent-color, oklch(0.922 0 0));
29-
30-
/* accent colors */
31-
--swatch-sky: oklch(0.787 0.128 230.318);
32-
--swatch-coral: oklch(0.704 0.177 14.75);
33-
--swatch-amber: oklch(0.828 0.165 84.429);
34-
--swatch-emerald: oklch(0.792 0.153 166.95);
35-
--swatch-violet: oklch(0.78 0.148 286.067);
36-
--swatch-magenta: oklch(0.78 0.15 330);
37-
--swatch-neutral: oklch(1 0 0);
38-
39-
/* syntax highlighting colors */
40-
--syntax-fn: oklch(0.727 0.137 299.149);
41-
--syntax-str: oklch(0.829 0.088 252.458);
42-
--syntax-kw: oklch(0.721 0.162 15.494);
43-
--syntax-comment: oklch(0.551 0.019 250.976);
44-
45-
/* badge colors for background & text */
46-
--badge-orange: oklch(0.67 0.185 55);
47-
--badge-yellow: oklch(0.588 0.183 91);
48-
--badge-green: oklch(0.566 0.202 165);
49-
--badge-cyan: oklch(0.571 0.181 210);
50-
--badge-blue: oklch(0.579 0.191 252);
51-
--badge-indigo: oklch(0.573 0.262 276.966);
52-
--badge-purple: oklch(0.495 0.172 295);
53-
--badge-pink: oklch(0.584 0.189 343);
54-
}
55-
56-
:root[data-theme='dark'][data-bg-theme='slate'] {
57-
--bg: oklch(0.151 0.018 264.695);
58-
--bg-subtle: oklch(0.179 0.015 262.421);
59-
--bg-muted: oklch(0.214 0.018 261.234);
60-
--bg-elevated: oklch(0.259 0.021 260.031);
61-
}
62-
63-
:root[data-theme='dark'][data-bg-theme='zinc'] {
64-
--bg: oklch(0.158 0.005 285.823);
65-
--bg-subtle: oklch(0.188 0.005 285.894);
66-
--bg-muted: oklch(0.219 0.005 285.929);
67-
--bg-elevated: oklch(0.256 0.006 286.033);
68-
}
69-
70-
:root[data-theme='dark'][data-bg-theme='stone'] {
71-
--bg: oklch(0.164 0.004 89.25);
72-
--bg-subtle: oklch(0.198 0.008 89.321);
73-
--bg-muted: oklch(0.228 0.015 89.386);
74-
--bg-elevated: oklch(0.252 0.018 84.298);
75-
}
76-
77-
:root[data-theme='dark'][data-bg-theme='black'] {
78-
--bg: oklch(0 0 0);
79-
--bg-subtle: oklch(0.148 0 0);
80-
--bg-muted: oklch(0.204 0 0);
81-
--bg-elevated: oklch(0.264 0 0);
82-
}
83-
84-
:root[data-theme='light'] {
8+
/* :root:not([data-theme='light']), */
9+
/* :root[data-theme='dark'] { */
10+
/* background colors */
11+
/* --bg: var(--bg-color, oklch(0.171 0 0)); */
12+
/* --bg-subtle: var(--bg-subtle-color, oklch(0.198 0 0)); */
13+
/* --bg-muted: var(--bg-muted-color, oklch(0.236 0 0)); */
14+
/* --bg-elevated: var(--bg-elevated-color, oklch(0.266 0 0)); */
15+
16+
/* text colors */
17+
/* --fg: oklch(0.982 0 0); */
18+
/* --fg-muted: oklch(0.749 0 0); */
19+
/* --fg-subtle: oklch(0.673 0 0); */
20+
21+
/* border, separator colors */
22+
/* --border: oklch(0.269 0 0); */
23+
/* --border-subtle: oklch(0.239 0 0); */
24+
/* --border-hover: oklch(0.371 0 0); */
25+
26+
/* accent color, set by user from settings */
27+
/* --accent: var(--accent-color, oklch(0.787 0.128 230.318)); */
28+
/* --accent-muted: var(--accent-color, oklch(0.922 0 0)); */
29+
30+
/* accent colors */
31+
/* --swatch-sky: oklch(0.787 0.128 230.318); */
32+
/* --swatch-coral: oklch(0.704 0.177 14.75); */
33+
/* --swatch-amber: oklch(0.828 0.165 84.429); */
34+
/* --swatch-emerald: oklch(0.792 0.153 166.95); */
35+
/* --swatch-violet: oklch(0.78 0.148 286.067); */
36+
/* --swatch-magenta: oklch(0.78 0.15 330); */
37+
/* --swatch-neutral: oklch(1 0 0); */
38+
39+
/* syntax highlighting colors */
40+
/* --syntax-fn: oklch(0.727 0.137 299.149); */
41+
/* --syntax-str: oklch(0.829 0.088 252.458); */
42+
/* --syntax-kw: oklch(0.721 0.162 15.494); */
43+
/* --syntax-comment: oklch(0.551 0.019 250.976); */
44+
45+
/* badge colors for background & text */
46+
/* --badge-orange: oklch(0.67 0.185 55); */
47+
/* --badge-yellow: oklch(0.588 0.183 91); */
48+
/* --badge-green: oklch(0.566 0.202 165); */
49+
/* --badge-cyan: oklch(0.571 0.181 210); */
50+
/* --badge-blue: oklch(0.579 0.191 252); */
51+
/* --badge-indigo: oklch(0.573 0.262 276.966); */
52+
/* --badge-purple: oklch(0.495 0.172 295); */
53+
/* --badge-pink: oklch(0.584 0.189 343); */
54+
/* } */
55+
56+
/* :root[data-theme='dark'][data-bg-theme='slate'] { */
57+
/* --bg: oklch(0.151 0.018 264.695); */
58+
/* --bg-subtle: oklch(0.179 0.015 262.421); */
59+
/* --bg-muted: oklch(0.214 0.018 261.234); */
60+
/* --bg-elevated: oklch(0.259 0.021 260.031); */
61+
/* } */
62+
63+
/* :root[data-theme='dark'][data-bg-theme='zinc'] { */
64+
/* --bg: oklch(0.158 0.005 285.823); */
65+
/* --bg-subtle: oklch(0.188 0.005 285.894); */
66+
/* --bg-muted: oklch(0.219 0.005 285.929); */
67+
/* --bg-elevated: oklch(0.256 0.006 286.033); */
68+
/* } */
69+
70+
/* :root[data-theme='dark'][data-bg-theme='stone'] { */
71+
/* --bg: oklch(0.164 0.004 89.25); */
72+
/* --bg-subtle: oklch(0.198 0.008 89.321); */
73+
/* --bg-muted: oklch(0.228 0.015 89.386); */
74+
/* --bg-elevated: oklch(0.252 0.018 84.298); */
75+
/* } */
76+
77+
/* :root[data-theme='dark'][data-bg-theme='black'] { */
78+
/* --bg: oklch(0 0 0); */
79+
/* --bg-subtle: oklch(0.148 0 0); */
80+
/* --bg-muted: oklch(0.204 0 0); */
81+
/* --bg-elevated: oklch(0.264 0 0); */
82+
/* } */
83+
84+
/* :root[data-theme='light'] { */
85+
:root {
8586
--bg: var(--bg-color, oklch(1 0 0));
8687
--bg-subtle: var(--bg-subtle-color, oklch(0.979 0.001 286.375));
8788
--bg-muted: var(--bg-muted-color, oklch(0.955 0.001 286.76));
@@ -122,45 +123,50 @@
122123
--badge-cyan: oklch(0.571 0.181 210);
123124
}
124125

125-
:root[data-theme='light'][data-bg-theme='slate'] {
126+
/* :root[data-theme='light'][data-bg-theme='slate'] { */
127+
:root[data-bg-theme='slate'] {
126128
--bg: oklch(1 0 0);
127129
--bg-subtle: oklch(0.982 0.008 269.62);
128130
--bg-muted: oklch(0.96 0.008 261.234);
129131
--bg-elevated: oklch(0.943 0.012 255.52);
130132
}
131133

132-
:root[data-theme='light'][data-bg-theme='zinc'] {
134+
/* :root[data-theme='light'][data-bg-theme='zinc'] { */
135+
:root[data-bg-theme='zinc'] {
133136
--bg: oklch(1 0 0);
134137
--bg-subtle: oklch(0.979 0.004 286.53);
135138
--bg-muted: oklch(0.958 0.004 286.39);
136139
--bg-elevated: oklch(0.939 0.004 286.32);
137140
}
138141

139-
:root[data-theme='light'][data-bg-theme='stone'] {
142+
/* :root[data-theme='light'][data-bg-theme='stone'] { */
143+
:root[data-bg-theme='stone'] {
140144
--bg: oklch(1 0 0);
141145
--bg-subtle: oklch(0.979 0.004 88.762);
142146
--bg-muted: oklch(0.958 0.005 88.743);
143147
--bg-elevated: oklch(0.943 0.005 88.731);
144148
}
145149

146-
:root[data-theme='light'][data-bg-theme='black'] {
150+
/* :root[data-theme='light'][data-bg-theme='black'] { */
151+
:root[data-bg-theme='black'] {
147152
--bg-subtle: var(--bg-subtle-color, oklch(0.979 0 0));
148153
}
149154

150155
@media (prefers-contrast: more) {
151-
:root[data-theme='dark'] {
152-
/* text colors */
153-
--fg: oklch(1 0 0);
154-
--fg-muted: oklch(0.769 0 0);
155-
--fg-subtle: oklch(0.693 0 0);
156+
/* :root[data-theme='dark'] { */
157+
/* text colors */
158+
/* --fg: oklch(1 0 0); */
159+
/* --fg-muted: oklch(0.769 0 0); */
160+
/* --fg-subtle: oklch(0.693 0 0); */
156161

157-
/* border, separator colors */
158-
--border: oklch(0.769 0 0);
159-
--border-subtle: oklch(0.739 0 0);
160-
--border-hover: oklch(0.771 0 0);
161-
}
162+
/* border, separator colors */
163+
/* --border: oklch(0.769 0 0); */
164+
/* --border-subtle: oklch(0.739 0 0); */
165+
/* --border-hover: oklch(0.771 0 0); */
166+
/* } */
162167

163-
:root[data-theme='light'] {
168+
/* :root[data-theme='light'] { */
169+
:root {
164170
/* text colors */
165171
--fg: oklch(0 0 0);
166172
--fg-muted: oklch(0.329 0 0);
@@ -275,7 +281,8 @@ dd {
275281
}
276282

277283
/* Shiki theme colors */
278-
html.light .shiki {
284+
/* html.light .shiki { */
285+
html .shiki {
279286
color: var(--shiki-light) !important;
280287
background-color: var(--shiki-light-bg) !important;
281288

‎app/pages/index.vue‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,16 @@ defineOgImageComponent('Default', {
9292
</search>
9393

9494
<BuildEnvironment class="mt-4" />
95+
<p class="max-w-3xl mx-auto text-center">
96+
<b>Update:</b>
97+
We’ve completed our user experience research and carefully reviewed the results. To
98+
deliver the best possible experience, we’ve decided to <b>remove the dark theme</b>. We’re
99+
committed to making decisions based on what works best for our users and are glad we took
100+
the time to validate this through
101+
<a href="/theme-research" target="_blank" rel="noopener noreferrer" class="underline"
102+
>user research</a
103+
>. Thank you for participating 🤍
104+
</p>
95105
</header>
96106

97107
<nav

‎app/pages/settings.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
const router = useRouter()
33
const { settings } = useSettings()
44
const { locale: currentLocale, locales, setLocale: setNuxti18nLocale } = useI18n()
5-
const colorMode = useColorMode()
5+
// const colorMode = useColorMode()
66
const { currentLocaleStatus, isSourceLocale } = useI18nStatus()
77
const keyboardShortcutsEnabled = useKeyboardShortcuts()
88
@@ -66,7 +66,7 @@ const setLocale: typeof setNuxti18nLocale = newLocale => {
6666
</h2>
6767
<div class="bg-bg-subtle border border-border rounded-lg p-4 sm:p-6 space-y-6">
6868
<!-- Theme selector -->
69-
<div class="space-y-2">
69+
<!-- <div class="space-y-2">
7070
<label for="theme-select" class="block text-sm text-fg font-medium">
7171
{{ $t('settings.theme') }}
7272
</label>
@@ -82,7 +82,7 @@ const setLocale: typeof setNuxti18nLocale = newLocale => {
8282
{ label: $t('settings.theme_dark'), value: 'dark' },
8383
]"
8484
/>
85-
</div>
85+
</div> -->
8686

8787
<!-- Accent colors -->
8888
<div class="space-y-3">

‎vercel.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
"$schema": "https://openapi.vercel.sh/vercel.json",
33
"trailingSlash": false,
44
"redirects": [
5+
{
6+
"source": "/theme-research",
7+
"destination": "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
8+
},
59
{
610
"source": "/(.*)",
711
"has": [

0 commit comments

Comments
 (0)