Hare/Decodal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add dark theme support

Browse Source
This commit is contained in:
Keisuke Hirata 2026-06-17 14:39:44 +09:00
parent aa6e5c51c1
commit dc28cddbff
No known key found for this signature in database
1 changed files with 94 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

142
site/decodal-site/src/style.css
View File

@ -1,16 +1,62 @@
:root { :root {
color-scheme: light dark; color-scheme: light;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: #f7f7f8; --bg: #f7f7f8;
color: #1f2328; --surface: #ffffff;
--text: #1f2328;
--heading: #111827;
--muted: #4b5563;
--subtle: #64748b;
--border: #e5e7eb;
--link: #2563eb;
--topbar-bg: #111827;
--topbar-text: #ffffff;
--topbar-link: #dbeafe;
--active-bg: #dbeafe;
--active-text: #1d4ed8;
--nav-number: #94a3b8;
--shadow: 0 8px 24px rgb(15 23 42 / 0.05);
--inline-code-bg: #eef2ff;
--inline-code-text: #3730a3;
--editor-bg: #0f172a;
--editor-text: #e5e7eb;
--danger: #b91c1c;
--error: #fecaca;
--selection: rgb(59 130 246 / 0.35);
}
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
--bg: #0b1120;
--surface: #111827;
--text: #d1d5db;
--heading: #f9fafb;
--muted: #9ca3af;
--subtle: #94a3b8;
--border: #334155;
--link: #60a5fa;
--topbar-bg: #020617;
--topbar-text: #f8fafc;
--topbar-link: #bfdbfe;
--active-bg: #1e3a8a;
--active-text: #bfdbfe;
--nav-number: #64748b;
--shadow: 0 8px 24px rgb(0 0 0 / 0.25);
--inline-code-bg: #1e293b;
--inline-code-text: #bfdbfe;
--danger: #fca5a5;
}
} }
body { body {
background: var(--bg);
color: var(--text);
margin: 0; margin: 0;
} }
a { a {
color: #2563eb; color: var(--link);
text-decoration: none; text-decoration: none;
} }
@ -20,8 +66,8 @@ a:hover {
.topbar { .topbar {
align-items: center; align-items: center;
background: #111827; background: var(--topbar-bg);
color: white; color: var(--topbar-text);
display: flex; display: flex;
height: 56px; height: 56px;
justify-content: space-between; justify-content: space-between;
@ -29,7 +75,7 @@ a:hover {
} }
.brand { .brand {
color: white; color: var(--topbar-text);
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
} }
@ -40,7 +86,7 @@ a:hover {
} }
.topnav a { .topnav a {
color: #dbeafe; color: var(--topbar-link);
} }
.layout { .layout {
@ -54,14 +100,14 @@ a:hover {
} }
.sidebar { .sidebar {
background: #ffffff; background: var(--surface);
border-right: 1px solid #e5e7eb; border-right: 1px solid var(--border);
overflow: auto; overflow: auto;
padding: 22px 18px; padding: 22px 18px;
} }
.sidebar-title { .sidebar-title {
color: #111827; color: var(--heading);
display: block; display: block;
font-weight: 700; font-weight: 700;
margin-bottom: 12px; margin-bottom: 12px;
@ -79,7 +125,7 @@ a:hover {
.nav-tree a { .nav-tree a {
border-radius: 6px; border-radius: 6px;
color: #374151; color: var(--text);
display: flex; display: flex;
font-size: 14px; font-size: 14px;
gap: 6px; gap: 6px;
@ -88,19 +134,19 @@ a:hover {
} }
.nav-number { .nav-number {
color: #94a3b8; color: var(--nav-number);
flex: 0 0 auto; flex: 0 0 auto;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
.nav-tree a.active { .nav-tree a.active {
background: #dbeafe; background: var(--active-bg);
color: #1d4ed8; color: var(--active-text);
font-weight: 600; font-weight: 600;
} }
.nav-tree a.active .nav-number { .nav-tree a.active .nav-number {
color: #2563eb; color: var(--link);
} }
main { main {
@ -113,10 +159,10 @@ main.playground {
} }
.markdown { .markdown {
background: white; background: var(--surface);
border: 1px solid #e5e7eb; border: 1px solid var(--border);
border-radius: 12px; border-radius: 12px;
box-shadow: 0 8px 24px rgb(15 23 42 / 0.05); box-shadow: var(--shadow);
margin: 0 auto; margin: 0 auto;
max-width: 920px; max-width: 920px;
padding: 24px 36px 42px; padding: 24px 36px 42px;
@ -125,14 +171,14 @@ main.playground {
.markdown h1, .markdown h1,
.markdown h2, .markdown h2,
.markdown h3 { .markdown h3 {
color: #111827; color: var(--heading);
} }
.markdown pre, .markdown pre,
.output-pane pre { .output-pane pre {
background: #0f172a; background: var(--editor-bg);
border-radius: 10px; border-radius: 10px;
color: #e5e7eb; color: var(--editor-text);
overflow: auto; overflow: auto;
padding: 14px; padding: 14px;
} }
@ -142,9 +188,9 @@ main.playground {
} }
.markdown :not(pre) > code { .markdown :not(pre) > code {
background: #eef2ff; background: var(--inline-code-bg);
border-radius: 4px; border-radius: 4px;
color: #3730a3; color: var(--inline-code-text);
padding: 1px 4px; padding: 1px 4px;
} }
@ -168,7 +214,7 @@ main.playground {
} }
.tok-comment { .tok-comment {
color: #94a3b8; color: var(--nav-number);
font-style: italic; font-style: italic;
} }
@ -194,15 +240,15 @@ main.playground {
} }
.playground-header p { .playground-header p {
color: #4b5563; color: var(--muted);
font-size: 13px; font-size: 13px;
margin: 0; margin: 0;
} }
.playground-header code { .playground-header code {
background: #eef2ff; background: var(--inline-code-bg);
border-radius: 4px; border-radius: 4px;
color: #3730a3; color: var(--inline-code-text);
padding: 1px 4px; padding: 1px 4px;
} }
@ -213,10 +259,10 @@ main.playground {
} }
button { button {
background: #2563eb; background: var(--link);
border: 0; border: 0;
border-radius: 8px; border-radius: 8px;
color: white; color: var(--topbar-text);
cursor: pointer; cursor: pointer;
font-weight: 700; font-weight: 700;
padding: 8px 14px; padding: 8px 14px;
@ -237,8 +283,8 @@ button:disabled {
.file-panel, .file-panel,
.pane { .pane {
background: white; background: var(--surface);
border: 1px solid #e5e7eb; border: 1px solid var(--border);
border-radius: 10px; border-radius: 10px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -249,8 +295,8 @@ button:disabled {
.panel-header, .panel-header,
.pane > span { .pane > span {
align-items: center; align-items: center;
border-bottom: 1px solid #e5e7eb; border-bottom: 1px solid var(--border);
color: #374151; color: var(--text);
display: flex; display: flex;
font-size: 13px; font-size: 13px;
font-weight: 700; font-weight: 700;
@ -288,7 +334,7 @@ button:disabled {
} }
.file-tree .folder { .file-tree .folder {
color: #64748b; color: var(--subtle);
display: block; display: block;
font-size: 13px; font-size: 13px;
font-weight: 700; font-weight: 700;
@ -298,7 +344,7 @@ button:disabled {
.file-tree .file { .file-tree .file {
background: transparent; background: transparent;
border-radius: 6px; border-radius: 6px;
color: #334155; color: var(--text);
display: block; display: block;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
font-size: 13px; font-size: 13px;
@ -310,22 +356,22 @@ button:disabled {
.file-tree .file:hover, .file-tree .file:hover,
.file-tree .file.active { .file-tree .file.active {
background: #dbeafe; background: var(--active-bg);
color: #1d4ed8; color: var(--active-text);
text-decoration: none; text-decoration: none;
} }
.danger-button { .danger-button {
background: transparent; background: transparent;
border-top: 1px solid #e5e7eb; border-top: 1px solid var(--border);
border-radius: 0; border-radius: 0;
color: #b91c1c; color: var(--danger);
padding: 9px 10px; padding: 9px 10px;
text-align: left; text-align: left;
} }
.editor-wrap { .editor-wrap {
background: #0f172a; background: var(--editor-bg);
flex: 1; flex: 1;
min-height: 0; min-height: 0;
position: relative; position: relative;
@ -346,13 +392,13 @@ button:disabled {
} }
.editor-wrap pre { .editor-wrap pre {
color: #e5e7eb; color: var(--editor-text);
pointer-events: none; pointer-events: none;
} }
.editor-wrap textarea { .editor-wrap textarea {
background: transparent; background: transparent;
caret-color: #e5e7eb; caret-color: var(--editor-text);
color: transparent; color: transparent;
outline: none; outline: none;
resize: none; resize: none;
@ -360,7 +406,7 @@ button:disabled {
} }
.editor-wrap textarea::selection { .editor-wrap textarea::selection {
background: rgb(59 130 246 / 0.35); background: var(--selection);
} }
.output-pane pre { .output-pane pre {
@ -370,11 +416,11 @@ button:disabled {
} }
.output-pane pre.error { .output-pane pre.error {
color: #fecaca; color: var(--error);
} }
.status { .status {
color: #4b5563; color: var(--muted);
font-size: 13px; font-size: 13px;
margin: 0; margin: 0;
white-space: nowrap; white-space: nowrap;
@ -385,11 +431,11 @@ button:disabled {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.sidebar { .sidebar {
border-bottom: 1px solid #e5e7eb; border-bottom: 1px solid var(--border);
border-right: 0; border-right: 0;
max-height: 260px; max-height: 260px;
} }
.playground-grid { .playground-shell {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
} }