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