From 50c4d7e94b087d7b6eb341e99923d35cbe6dda00 Mon Sep 17 00:00:00 2001 From: Vordgi Date: Wed, 1 Apr 2026 09:02:30 +0100 Subject: [PATCH 1/6] chore: apply research results --- app/assets/main.css | 163 +++++++++++++++++++++-------------------- app/pages/index.vue | 7 ++ app/pages/settings.vue | 6 +- 3 files changed, 95 insertions(+), 81 deletions(-) diff --git a/app/assets/main.css b/app/assets/main.css index 8897b7da18..e83299729a 100644 --- a/app/assets/main.css +++ b/app/assets/main.css @@ -5,83 +5,84 @@ box-sizing: border-box; } -:root:not([data-theme='light']), -:root[data-theme='dark'] { +/* :root:not([data-theme='light']), */ +/* :root[data-theme='dark'] { */ /* background colors */ - --bg: var(--bg-color, oklch(0.171 0 0)); - --bg-subtle: var(--bg-subtle-color, oklch(0.198 0 0)); - --bg-muted: var(--bg-muted-color, oklch(0.236 0 0)); - --bg-elevated: var(--bg-elevated-color, oklch(0.266 0 0)); + /* --bg: var(--bg-color, oklch(0.171 0 0)); */ + /* --bg-subtle: var(--bg-subtle-color, oklch(0.198 0 0)); */ + /* --bg-muted: var(--bg-muted-color, oklch(0.236 0 0)); */ + /* --bg-elevated: var(--bg-elevated-color, oklch(0.266 0 0)); */ /* text colors */ - --fg: oklch(0.982 0 0); - --fg-muted: oklch(0.749 0 0); - --fg-subtle: oklch(0.673 0 0); + /* --fg: oklch(0.982 0 0); */ + /* --fg-muted: oklch(0.749 0 0); */ + /* --fg-subtle: oklch(0.673 0 0); */ /* border, separator colors */ - --border: oklch(0.269 0 0); - --border-subtle: oklch(0.239 0 0); - --border-hover: oklch(0.371 0 0); + /* --border: oklch(0.269 0 0); */ + /* --border-subtle: oklch(0.239 0 0); */ + /* --border-hover: oklch(0.371 0 0); */ /* accent color, set by user from settings */ - --accent: var(--accent-color, oklch(0.787 0.128 230.318)); - --accent-muted: var(--accent-color, oklch(0.922 0 0)); + /* --accent: var(--accent-color, oklch(0.787 0.128 230.318)); */ + /* --accent-muted: var(--accent-color, oklch(0.922 0 0)); */ /* accent colors */ - --swatch-sky: oklch(0.787 0.128 230.318); - --swatch-coral: oklch(0.704 0.177 14.75); - --swatch-amber: oklch(0.828 0.165 84.429); - --swatch-emerald: oklch(0.792 0.153 166.95); - --swatch-violet: oklch(0.78 0.148 286.067); - --swatch-magenta: oklch(0.78 0.15 330); - --swatch-neutral: oklch(1 0 0); + /* --swatch-sky: oklch(0.787 0.128 230.318); */ + /* --swatch-coral: oklch(0.704 0.177 14.75); */ + /* --swatch-amber: oklch(0.828 0.165 84.429); */ + /* --swatch-emerald: oklch(0.792 0.153 166.95); */ + /* --swatch-violet: oklch(0.78 0.148 286.067); */ + /* --swatch-magenta: oklch(0.78 0.15 330); */ + /* --swatch-neutral: oklch(1 0 0); */ /* syntax highlighting colors */ - --syntax-fn: oklch(0.727 0.137 299.149); - --syntax-str: oklch(0.829 0.088 252.458); - --syntax-kw: oklch(0.721 0.162 15.494); - --syntax-comment: oklch(0.551 0.019 250.976); + /* --syntax-fn: oklch(0.727 0.137 299.149); */ + /* --syntax-str: oklch(0.829 0.088 252.458); */ + /* --syntax-kw: oklch(0.721 0.162 15.494); */ + /* --syntax-comment: oklch(0.551 0.019 250.976); */ /* badge colors for background & text */ - --badge-orange: oklch(0.67 0.185 55); - --badge-yellow: oklch(0.588 0.183 91); - --badge-green: oklch(0.566 0.202 165); - --badge-cyan: oklch(0.571 0.181 210); - --badge-blue: oklch(0.579 0.191 252); - --badge-indigo: oklch(0.573 0.262 276.966); - --badge-purple: oklch(0.495 0.172 295); - --badge-pink: oklch(0.584 0.189 343); -} - -:root[data-theme='dark'][data-bg-theme='slate'] { - --bg: oklch(0.151 0.018 264.695); - --bg-subtle: oklch(0.179 0.015 262.421); - --bg-muted: oklch(0.214 0.018 261.234); - --bg-elevated: oklch(0.259 0.021 260.031); -} - -:root[data-theme='dark'][data-bg-theme='zinc'] { - --bg: oklch(0.158 0.005 285.823); - --bg-subtle: oklch(0.188 0.005 285.894); - --bg-muted: oklch(0.219 0.005 285.929); - --bg-elevated: oklch(0.256 0.006 286.033); -} - -:root[data-theme='dark'][data-bg-theme='stone'] { - --bg: oklch(0.164 0.004 89.25); - --bg-subtle: oklch(0.198 0.008 89.321); - --bg-muted: oklch(0.228 0.015 89.386); - --bg-elevated: oklch(0.252 0.018 84.298); -} - -:root[data-theme='dark'][data-bg-theme='black'] { - --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'] { + /* --badge-orange: oklch(0.67 0.185 55); */ + /* --badge-yellow: oklch(0.588 0.183 91); */ + /* --badge-green: oklch(0.566 0.202 165); */ + /* --badge-cyan: oklch(0.571 0.181 210); */ + /* --badge-blue: oklch(0.579 0.191 252); */ + /* --badge-indigo: oklch(0.573 0.262 276.966); */ + /* --badge-purple: oklch(0.495 0.172 295); */ + /* --badge-pink: oklch(0.584 0.189 343); */ +/* } */ + +/* :root[data-theme='dark'][data-bg-theme='slate'] { */ + /* --bg: oklch(0.151 0.018 264.695); */ + /* --bg-subtle: oklch(0.179 0.015 262.421); */ + /* --bg-muted: oklch(0.214 0.018 261.234); */ + /* --bg-elevated: oklch(0.259 0.021 260.031); */ +/* } */ + +/* :root[data-theme='dark'][data-bg-theme='zinc'] { */ + /* --bg: oklch(0.158 0.005 285.823); */ + /* --bg-subtle: oklch(0.188 0.005 285.894); */ + /* --bg-muted: oklch(0.219 0.005 285.929); */ + /* --bg-elevated: oklch(0.256 0.006 286.033); */ +/* } */ + +/* :root[data-theme='dark'][data-bg-theme='stone'] { */ + /* --bg: oklch(0.164 0.004 89.25); */ + /* --bg-subtle: oklch(0.198 0.008 89.321); */ + /* --bg-muted: oklch(0.228 0.015 89.386); */ + /* --bg-elevated: oklch(0.252 0.018 84.298); */ +/* } */ + +/* :root[data-theme='dark'][data-bg-theme='black'] { */ + /* --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'] { */ +:root { --bg: var(--bg-color, oklch(1 0 0)); --bg-subtle: var(--bg-subtle-color, oklch(0.979 0.001 286.375)); --bg-muted: var(--bg-muted-color, oklch(0.955 0.001 286.76)); @@ -122,45 +123,50 @@ --badge-cyan: oklch(0.571 0.181 210); } -:root[data-theme='light'][data-bg-theme='slate'] { +/* :root[data-theme='light'][data-bg-theme='slate'] { */ +:root[data-bg-theme='slate'] { --bg: oklch(1 0 0); --bg-subtle: oklch(0.982 0.008 269.62); --bg-muted: oklch(0.96 0.008 261.234); --bg-elevated: oklch(0.943 0.012 255.52); } -:root[data-theme='light'][data-bg-theme='zinc'] { +/* :root[data-theme='light'][data-bg-theme='zinc'] { */ +:root[data-bg-theme='zinc'] { --bg: oklch(1 0 0); --bg-subtle: oklch(0.979 0.004 286.53); --bg-muted: oklch(0.958 0.004 286.39); --bg-elevated: oklch(0.939 0.004 286.32); } -:root[data-theme='light'][data-bg-theme='stone'] { +/* :root[data-theme='light'][data-bg-theme='stone'] { */ +:root[data-bg-theme='stone'] { --bg: oklch(1 0 0); --bg-subtle: oklch(0.979 0.004 88.762); --bg-muted: oklch(0.958 0.005 88.743); --bg-elevated: oklch(0.943 0.005 88.731); } -:root[data-theme='light'][data-bg-theme='black'] { +/* :root[data-theme='light'][data-bg-theme='black'] { */ +:root[data-bg-theme='black'] { --bg-subtle: var(--bg-subtle-color, oklch(0.979 0 0)); } @media (prefers-contrast: more) { - :root[data-theme='dark'] { + /* :root[data-theme='dark'] { */ /* text colors */ - --fg: oklch(1 0 0); - --fg-muted: oklch(0.769 0 0); - --fg-subtle: oklch(0.693 0 0); + /* --fg: oklch(1 0 0); */ + /* --fg-muted: oklch(0.769 0 0); */ + /* --fg-subtle: oklch(0.693 0 0); */ /* border, separator colors */ - --border: oklch(0.769 0 0); - --border-subtle: oklch(0.739 0 0); - --border-hover: oklch(0.771 0 0); - } + /* --border: oklch(0.769 0 0); */ + /* --border-subtle: oklch(0.739 0 0); */ + /* --border-hover: oklch(0.771 0 0); */ + /* } */ - :root[data-theme='light'] { + /* :root[data-theme='light'] { */ + :root { /* text colors */ --fg: oklch(0 0 0); --fg-muted: oklch(0.329 0 0); @@ -275,7 +281,8 @@ dd { } /* Shiki theme colors */ -html.light .shiki { +/* html.light .shiki { */ +html .shiki { color: var(--shiki-light) !important; background-color: var(--shiki-light-bg) !important; diff --git a/app/pages/index.vue b/app/pages/index.vue index 48c5575b00..0b9001e15f 100644 --- a/app/pages/index.vue +++ b/app/pages/index.vue @@ -92,6 +92,13 @@ defineOgImageComponent('Default', { +

+ Update: We carefully analyzed the best practices in our industry and, to give users the best experience you love, we decided to remove the dark theme. + We're looking for what's best for our users and were happy to conduct this research. +

+

+ Thank you for participating 🤍 +