RomanNum3ral
/
vert
mirror of https://github.com/VERT-sh/VERT.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: dark mode color contrast change

This commit is contained in:
Realmy 2025-02-09 16:20:35 +01:00
parent c893d32d8c
commit a44bf8067e
3 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/app.scss
View File

@ -103,9 +103,9 @@
hsla(0, 0%, 95%, 1) 100% hsla(0, 0%, 95%, 1) 100%
); );
--bg-panel: hsl(0, 0%, 100%); --bg-panel: hsl(0, 0%, 100%);
--bg-panel-accented: hsl(0, 0%, 92%); --bg-panel-highlight: hsl(0, 0%, 92%);
--bg-separator: hsl(0, 0%, 88%); --bg-separator: hsl(0, 0%, 88%);
--bg-button: var(--bg-panel-accented); --bg-button: var(--bg-panel-highlight);
--bg-badge: var(--accent-pink); --bg-badge: var(--accent-pink);
--bg-input: #e0e0e0; --bg-input: #e0e0e0;
@ -127,13 +127,13 @@
// foregrounds // foregrounds
--fg: hsl(0, 0%, 100%); --fg: hsl(0, 0%, 100%);
--fg-muted: hsla(0, 0%, 100%, 0.6); --fg-muted: hsla(0, 0%, 100%, 0.65);
--fg-on-accent: hsl(0, 0%, 0%); --fg-on-accent: hsl(0, 0%, 0%);
--fg-on-badge: hsl(0, 0%, 0%); --fg-on-badge: hsl(0, 0%, 0%);
--fg-accent: var(--accent); --fg-accent: var(--accent);
// backgrounds // backgrounds
--bg: hsl(220, 5%, 12%); --bg: hsl(220, 5%, 15%);
--bg-gradient: linear-gradient( --bg-gradient: linear-gradient(
to bottom, to bottom,
hsla(303, 100%, 50%, 0.1), hsla(303, 100%, 50%, 0.1),
@ -184,10 +184,10 @@
hsla(220, 5%, 12%, 0.5), hsla(220, 5%, 12%, 0.5),
hsla(220, 5%, 12%, 1) 100% hsla(220, 5%, 12%, 1) 100%
); );
--bg-panel: hsl(220, 4%, 18%); --bg-panel: hsl(220, 4%, 24%);
--bg-panel-accented: color-mix(in srgb, var(--accent) 12%, transparent); --bg-panel-highlight: hsl(220, 2%, 32%);
--bg-separator: hsl(220, 4%, 28%); --bg-separator: hsl(220, 4%, 28%);
--bg-button: hsl(220, 6%, 28%); --bg-button: hsl(220, 6%, 34%);
--bg-badge: var(--accent-pink); --bg-badge: var(--accent-pink);
--shadow-panel: 0 4px 6px 0 hsla(0, 0%, 0%, 0.15); --shadow-panel: 0 4px 6px 0 hsla(0, 0%, 0%, 0.15);

4
src/lib/components/functional/Navbar.svelte
View File

@ -44,7 +44,7 @@
class={clsx( class={clsx(
"w-16 md:w-32 h-full relative z-10 rounded-xl flex items-center justify-center gap-3 overflow-hidden", "w-16 md:w-32 h-full relative z-10 rounded-xl flex items-center justify-center gap-3 overflow-hidden",
{ {
"bg-panel-accented": "bg-panel-highlight":
item.activeMatch(page.url.pathname) && !browser, item.activeMatch(page.url.pathname) && !browser,
}, },
)} )}
@ -105,7 +105,7 @@
<Panel class="max-w-[778px] w-full h-20 flex items-center gap-3 relative"> <Panel class="max-w-[778px] w-full h-20 flex items-center gap-3 relative">
{#if linkRects[selectedIndex]} {#if linkRects[selectedIndex]}
<div <div
class="absolute bg-panel-accented rounded-xl" class="absolute bg-panel-highlight rounded-xl"
style="width: {linkRects[selectedIndex] style="width: {linkRects[selectedIndex]
.width}px; height: {linkRects[selectedIndex] .width}px; height: {linkRects[selectedIndex]
.height}px; top: {linkRects[selectedIndex].top - .height}px; top: {linkRects[selectedIndex].top -

2
tailwind.config.ts
View File

@ -7,7 +7,7 @@ export default {
extend: { extend: {
backgroundColor: { backgroundColor: {
panel: "var(--bg-panel)", panel: "var(--bg-panel)",
"panel-accented": "var(--bg-panel-accented)", "panel-highlight": "var(--bg-panel-highlight)",
separator: "var(--bg-separator)", separator: "var(--bg-separator)",
button: "var(--bg-button)", button: "var(--bg-button)",
"panel-alt": "var(--bg-button)", "panel-alt": "var(--bg-button)",