blyzer/graphs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add off-white theme mode
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 1m31s
Details

Browse Source
This commit is contained in:
Cauê Faleiros
2026-06-26 11:11:36 -03:00
parent 789a9304a0
commit 3d25bc5179
10 changed files with 174 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/index.css
View File

@@ -2,6 +2,7 @@
@theme {
--color-brand-primary: #b8c7d1;
--color-brand-contrast: #070707;
--color-dark-bg: #070707;
--color-dark-card: #141414;
--color-dark-header: #101010;
@@ -14,6 +15,38 @@
}
@layer base {
:root {
--chart-grid: #222222;
--chart-axis: #888888;
--chart-cursor: rgba(255, 255, 255, 0.055);
--chart-label: #ededed;
--chart-tooltip-bg: #141414;
--chart-tooltip-text: #ededed;
--chart-tooltip-border: transparent;
--chart-detail-bar: #9ECAE1;
}
html[data-theme='offwhite'] {
--color-brand-primary: #3f535a;
--color-brand-contrast: #fbf8f1;
--color-dark-bg: #f3f0e9;
--color-dark-card: #fbf8f1;
--color-dark-header: #f0ece4;
--color-dark-sidebar: #ebe6dc;
--color-dark-border: #d8d0c3;
--color-dark-input: #f1ede5;
--color-dark-text: #242321;
--color-dark-muted: #6f6a61;
--chart-grid: rgba(63, 58, 49, 0.14);
--chart-axis: #756f66;
--chart-cursor: rgba(63, 58, 49, 0.08);
--chart-label: #242321;
--chart-tooltip-bg: #fbf8f1;
--chart-tooltip-text: #242321;
--chart-tooltip-border: #d8d0c3;
--chart-detail-bar: #3f535a;
}
body {
font-family: 'Inter', sans-serif;
background:
@@ -22,6 +55,13 @@
#070707;
@apply text-dark-text;
}
html[data-theme='offwhite'] body {
background:
radial-gradient(circle at 16% -8%, rgba(255, 255, 255, 0.82), transparent 32rem),
radial-gradient(circle at 88% 0%, rgba(116, 107, 91, 0.10), transparent 36rem),
#f3f0e9;
}
::-webkit-scrollbar {
width: 6px;
@@ -43,9 +83,23 @@
#070707;
}
html[data-theme='offwhite'] .app-shell {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0) 24rem),
radial-gradient(circle at 28% -18%, rgba(255, 255, 255, 0.74), transparent 34rem),
radial-gradient(circle at 88% 8%, rgba(116, 107, 91, 0.10), transparent 38rem),
#f3f0e9;
}
.app-content {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.012), rgba(255, 255, 255, 0) 16rem),
transparent;
}
html[data-theme='offwhite'] .app-content {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 16rem),
transparent;
}
}