Skip to content

Commit 6d551e7

Browse files
tiensonqintiensonqin
committed
dark theme
1 parent db55b2d commit 6d551e7

3 files changed

Lines changed: 235 additions & 34 deletions

File tree

‎deps/publish/src/logseq/publish/publish.css‎

Lines changed: 134 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,47 @@
1212
--border: #cecdc3;
1313
--link: #282726;
1414
--action: #24837B;
15-
--shadow: 0 18px 40px rgba(40, 39, 38, 0.12);
15+
--shadow: 0 18px 40px rgba(40, 39, 38, 0.1);
16+
--bg-gradient-1: rgba(218, 112, 44, 0.12);
17+
--bg-gradient-2: rgba(67, 133, 190, 0.1);
18+
--button-bg: #f2e9d6;
19+
--button-bg-hover: #efe0c2;
20+
--code-bg: #1f2933;
21+
--code-ink: #f8f4ec;
22+
--code-muted: #b59d82;
23+
--math-bg: #f6ede2;
24+
--quote-border: #282726;
25+
--card-bg: #fff7ee;
26+
--input-bg: #fffcf0;
27+
--image-shadow: 0 12px 24px rgba(40, 39, 38, 0.08);
28+
--icon-day: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' %3E%3Cpath fill-rule='evenodd' d='M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z' clip-rule='evenodd' /%3E%3C/svg%3E");
29+
--icon-night: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24' %3E%3Cpath d='M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z' /%3E%3C/svg%3E");
30+
}
31+
32+
[data-theme="dark"] {
33+
color-scheme: dark;
34+
--bg: #100f0f;
35+
--bg-accent: #1c1b1a;
36+
--surface: #1c1b1a;
37+
--surface-strong: #282726;
38+
--ink: #e6e4d9;
39+
--muted: #b7b5ac;
40+
--border: #403e3c;
41+
--link: #e6e4d9;
42+
--action: #3AA99F;
43+
--shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
44+
--bg-gradient-1: rgba(218, 112, 44, 0.18);
45+
--bg-gradient-2: rgba(67, 133, 190, 0.14);
46+
--button-bg: #2f2c2b;
47+
--button-bg-hover: #3a3635;
48+
--code-bg: #1a1f24;
49+
--code-ink: #f8f4ec;
50+
--code-muted: #a3a091;
51+
--math-bg: #242220;
52+
--quote-border: #e6e4d9;
53+
--card-bg: #1f1d1c;
54+
--input-bg: #1c1b1a;
55+
--image-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
1656
}
1757

1858
* {
@@ -23,8 +63,8 @@ body {
2363
margin: 0;
2464
min-height: 100vh;
2565
background:
26-
radial-gradient(1200px 600px at 10% -10%, rgba(218, 112, 44, 0.12), transparent 60%),
27-
radial-gradient(900px 400px at 90% 0%, rgba(67, 133, 190, 0.1), transparent 60%),
66+
radial-gradient(1200px 600px at 10% -10%, var(--bg-gradient-1), transparent 60%),
67+
radial-gradient(900px 400px at 90% 0%, var(--bg-gradient-2), transparent 60%),
2868
linear-gradient(180deg, var(--bg) 0%, var(--bg-accent) 100%);
2969
color: var(--ink);
3070
font-family: "Inter", "Segoe UI", sans-serif;
@@ -63,12 +103,16 @@ a:hover {
63103
display: flex;
64104
gap: 12px;
65105
align-items: center;
66-
justify-content: space-between;
106+
justify-content: flex-end;
67107
flex-wrap: wrap;
68108
padding: 12px 0;
69109
margin: -8px 0 24px;
70110
}
71111

112+
.page-toolbar .toolbar-btn:first-child {
113+
margin-right: auto;
114+
}
115+
72116
.toolbar-btn {
73117
background: transparent;
74118
border: none;
@@ -83,6 +127,76 @@ a:hover {
83127
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
84128
}
85129

130+
.theme-toggle {
131+
position: relative;
132+
width: 62px;
133+
height: 30px;
134+
padding: 0 8px;
135+
background: var(--button-bg);
136+
border: none;
137+
border-radius: 999px;
138+
color: var(--ink);
139+
display: inline-flex;
140+
align-items: center;
141+
justify-content: space-between;
142+
cursor: pointer;
143+
transition: background 0.2s ease, box-shadow 0.2s ease;
144+
}
145+
146+
.theme-toggle:hover {
147+
background: var(--button-bg-hover);
148+
box-shadow: 0 6px 16px rgba(40, 39, 38, 0.12);
149+
}
150+
151+
.theme-toggle__thumb {
152+
position: absolute;
153+
top: 3px;
154+
left: 3px;
155+
width: 24px;
156+
height: 24px;
157+
border-radius: 999px;
158+
background: var(--surface);
159+
box-shadow: 0 4px 10px rgba(40, 39, 38, 0.12);
160+
transition: transform 0.2s ease;
161+
}
162+
163+
.theme-toggle.is-dark .theme-toggle__thumb {
164+
transform: translateX(32px);
165+
}
166+
167+
.theme-toggle__icon {
168+
width: 14px;
169+
height: 14px;
170+
background-color: currentColor;
171+
opacity: 0.6;
172+
transition: opacity 0.2s ease;
173+
mask
174+
175+
176+
177+
-repeat: no-repeat;
178+
mask-position: center;
179+
mask-size: contain;
180+
-webkit-mask-repeat: no-repeat;
181+
-webkit-mask-position: center;
182+
-webkit-mask-size: contain;
183+
}
184+
185+
.theme-toggle__icon--day {
186+
mask-image: var(--icon-day);
187+
-webkit-mask-image: var(--icon-day);
188+
}
189+
190+
.theme-toggle__icon--night {
191+
mask-image: var(--icon-night);
192+
-webkit-mask-image: var(--icon-night);
193+
}
194+
195+
.theme-toggle.is-dark .theme-toggle__icon--night,
196+
.theme-toggle:not(.is-dark) .theme-toggle__icon--day {
197+
opacity: 1;
198+
}
199+
86200
.blocks {
87201
margin: 0;
88202
padding-left: 0;
@@ -113,8 +227,10 @@ a:hover {
113227
.code-block {
114228
flex: 1;
115229
position: relative;
230+
margin: 1.5em 0;
116231
border-radius: 14px;
117232
overflow: hidden;
233+
/* background: var(--code-bg); */
118234
}
119235

120236
.code-block[data-lang]:before {
@@ -125,11 +241,14 @@ a:hover {
125241
font-size: 10px;
126242
text-transform: uppercase;
127243
letter-spacing: 0.16em;
244+
color: var(--code-muted);
128245
z-index: 2;
129246
}
130247

131248
.code-block .cm-editor {
132249
height: auto;
250+
/* background: var(--code-bg); */
251+
/* color: var(--code-ink); */
133252
font-size: 13px;
134253
line-height: 1.6;
135254
}
@@ -148,17 +267,15 @@ a:hover {
148267
}
149268

150269
.quote-block {
151-
flex: 1;
152-
margin: 0;
153-
padding: 10px 14px;
154-
border-left: 3px solid var(--ink);
155-
border-radius: 12px;
270+
padding-left: 1.5em;
271+
margin: 1.5em 0;
272+
border-left: 2px solid var(--quote-border);
156273
}
157274

158275
.asset-image {
159276
max-width: 100%;
160277
border-radius: 14px;
161-
box-shadow: 0 12px 24px rgba(40, 39, 38, 0.08);
278+
box-shadow: var(--image-shadow);
162279
}
163280

164281
.asset-video,
@@ -227,7 +344,7 @@ a:hover {
227344
}
228345

229346
.block-toggle:focus {
230-
outline: 2px solid rgba(217, 125, 63, 0.5);
347+
outline: 2px solid var(--action);
231348
outline-offset: 2px;
232349
border-radius: 4px;
233350
}
@@ -247,8 +364,8 @@ a:hover {
247364

248365
.linked-refs h2,
249366
.tagged-pages h2 {
250-
font-size: 20px;
251-
margin: 0 0 16px;
367+
font-size: 14px;
368+
margin: 64px 0 16px 0;
252369
color: var(--muted);
253370
}
254371

@@ -318,7 +435,7 @@ a:hover {
318435
max-width: 460px;
319436
padding: 24px;
320437
border-radius: 18px;
321-
background: #fff7ee;
438+
background: var(--card-bg);
322439
box-shadow: 0 12px 24px rgba(40, 39, 38, 0.12);
323440
text-align: center;
324441
}
@@ -341,15 +458,14 @@ a:hover {
341458
padding: 10px 12px;
342459
border-radius: 10px;
343460
border: none;
344-
background: #fffcf0;
461+
background: var(--input-bg);
345462
box-shadow: inset 0 0 0 1px rgba(40, 39, 38, 0.1);
346463
font-size: 15px;
347464
font-family: inherit;
348465
}
349466

350467
.password-input:focus {
351-
outline: 2px solid rgba(217, 125, 63, 0.4);
352-
border-color: rgba(217, 125, 63, 0.6);
468+
outline: 2px solid var(--action);
353469
}
354470

355471
.password-error {
@@ -431,7 +547,7 @@ a:hover {
431547

432548
.page-toolbar {
433549
gap: 10px;
434-
justify-content: flex-start;
550+
justify-content: flex-end;
435551
}
436552

437553
.properties {

‎deps/publish/src/logseq/publish/publish.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import { css } from "https://esm.sh/@codemirror/lang-css@6";
2424
import { clojure } from "https://esm.sh/@nextjournal/lang-clojure";
2525

2626
const katex = katexPkg.default || katexPkg;
27+
const THEME_KEY = "publish-theme";
2728

2829
document.addEventListener("click", (event) => {
2930
const btn = event.target.closest(".block-toggle");
@@ -34,6 +35,13 @@ document.addEventListener("click", (event) => {
3435
btn.setAttribute("aria-expanded", String(!collapsed));
3536
});
3637

38+
document.addEventListener("click", (event) => {
39+
const toggle = event.target.closest(".theme-toggle");
40+
if (!toggle) return;
41+
event.preventDefault();
42+
window.toggleTheme();
43+
});
44+
3745
window.toggleTopBlocks = (btn) => {
3846
const list = document.querySelector(".blocks");
3947
if (!list) return;
@@ -50,7 +58,32 @@ window.toggleTopBlocks = (btn) => {
5058
}
5159
};
5260

61+
const applyTheme = (theme) => {
62+
document.documentElement.setAttribute("data-theme", theme);
63+
document.querySelectorAll(".theme-toggle").forEach((toggle) => {
64+
toggle.classList.toggle("is-dark", theme === "dark");
65+
toggle.setAttribute("aria-checked", String(theme === "dark"));
66+
});
67+
};
68+
69+
const preferredTheme = () => {
70+
const stored = window.localStorage.getItem(THEME_KEY);
71+
if (stored) return stored;
72+
return window.matchMedia("(prefers-color-scheme: dark)").matches
73+
? "dark"
74+
: "light";
75+
};
76+
77+
window.toggleTheme = () => {
78+
const current = document.documentElement.getAttribute("data-theme") || "light";
79+
const next = current === "dark" ? "light" : "dark";
80+
applyTheme(next);
81+
window.localStorage.setItem(THEME_KEY, next);
82+
};
83+
5384
const initPublish = () => {
85+
applyTheme(preferredTheme());
86+
5487
document.querySelectorAll(".math-block").forEach((el) => {
5588
const tex = el.textContent;
5689
try {

0 commit comments

Comments
 (0)