oooooii-npm/webook
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Extract HTML template into separate views file

Browse Source
This commit is contained in:
wu2kong
2026-05-29 14:18:59 +08:00
parent f9e323f70a
commit cf2d5fc77b
15 changed files with 862 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/themes/default/highlight-dark.css
+39
View File
@@ -0,0 +1,39 @@
/* Dark theme for highlight.js - GitHub Dark-like */
.hljs { display: block; overflow-x: auto; padding: 0; background: transparent; color: #c9d1d9; }
.hljs-comment,
.hljs-quote { color: #8b949e; font-style: italic; }
.hljs-keyword,
.hljs-selector-tag,
.hljs-subst { color: #ff7b72; font-weight: bold; }
.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-template-variable,
.hljs-tag .hljs-attr { color: #79c0ff; }
.hljs-string,
.hljs-doctag { color: #a5d6ff; }
.hljs-title,
.hljs-section,
.hljs-selector-id { color: #d2a8ff; font-weight: bold; }
.hljs-subst { font-weight: normal; }
.hljs-type,
.hljs-class .hljs-title { color: #d2a8ff; font-weight: bold; }
.hljs-tag,
.hljs-name,
.hljs-attribute { color: #7ee787; font-weight: normal; }
.hljs-regexp,
.hljs-link { color: #a5d6ff; }
.hljs-symbol,
.hljs-bullet { color: #ffa657; }
.hljs-built_in,
.hljs-builtin-name { color: #79c0ff; }
.hljs-meta { color: #8b949e; font-weight: bold; }
.hljs-deletion { background: #490202; }
.hljs-addition { background: #04260f; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: bold; }
/* Line numbers */
.hljs-ln { border-collapse: collapse; }
.hljs-ln td { padding: 0; }
.hljs-ln-n { text-align: right; padding-right: 8px; color: #484f58; user-select: none; }
public/themes/default/highlight-light.css
+39
View File
@@ -0,0 +1,39 @@
/* Light theme for highlight.js - GitHub-like */
.hljs { display: block; overflow-x: auto; padding: 0; background: transparent; color: #24292e; }
.hljs-comment,
.hljs-quote { color: #6a737d; font-style: italic; }
.hljs-keyword,
.hljs-selector-tag,
.hljs-subst { color: #d73a49; font-weight: bold; }
.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-template-variable,
.hljs-tag .hljs-attr { color: #005cc5; }
.hljs-string,
.hljs-doctag { color: #032f62; }
.hljs-title,
.hljs-section,
.hljs-selector-id { color: #6f42c1; font-weight: bold; }
.hljs-subst { font-weight: normal; }
.hljs-type,
.hljs-class .hljs-title { color: #6f42c1; font-weight: bold; }
.hljs-tag,
.hljs-name,
.hljs-attribute { color: #22863a; font-weight: normal; }
.hljs-regexp,
.hljs-link { color: #032f62; }
.hljs-symbol,
.hljs-bullet { color: #e36209; }
.hljs-built_in,
.hljs-builtin-name { color: #005cc5; }
.hljs-meta { color: #6a737d; font-weight: bold; }
.hljs-deletion { background: #ffeef0; }
.hljs-addition { background: #f0fff4; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: bold; }
/* Line numbers */
.hljs-ln { border-collapse: collapse; }
.hljs-ln td { padding: 0; }
.hljs-ln-n { text-align: right; padding-right: 8px; color: #959da5; user-select: none; }
public/themes/default/manifest.json
+11
View File
@@ -0,0 +1,11 @@
{
"id": "default",
"label": "Aurora",
"description": "当前默认的玻璃拟态文档主题。",
"defaultMode": "light",
"stylesheet": "theme.css",
"highlight": {
"light": "highlight-light.css",
"dark": "highlight-dark.css"
}
}
public/themes/default/theme.css
+59
View File
@@ -0,0 +1,59 @@
html[data-theme-id="default"][data-color-mode="light"] {
--bg: #f6f7fb;
--bg-elevated: rgba(255, 255, 255, 0.86);
--bg-panel: #ffffff;
--bg-soft: #eef2f7;
--bg-hover: #e8eef7;
--text: #1f2937;
--text-muted: #6b7280;
--text-soft: #94a3b8;
--border: rgba(148, 163, 184, 0.22);
--border-strong: rgba(148, 163, 184, 0.35);
--brand: #3a6ff7;
--brand-strong: #2757d6;
--brand-soft: rgba(58, 111, 247, 0.12);
--code-bg: #0f172a;
--code-fg: #e5edf9;
--shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.08);
--shadow-md: 0 10px 28px rgba(15, 23, 42, 0.08);
--shadow-sm: 0 4px 16px rgba(15, 23, 42, 0.06);
--body-bg:
radial-gradient(circle at top left, rgba(58, 111, 247, 0.12), transparent 30%),
radial-gradient(circle at top right, rgba(56, 189, 248, 0.10), transparent 26%),
linear-gradient(180deg, #fbfcff 0%, var(--bg) 100%);
--brand-mark-bg: linear-gradient(135deg, var(--brand), #7c3aed);
--active-file-bg: linear-gradient(180deg, rgba(58,111,247,0.12), rgba(58,111,247,0.08));
--active-file-border: rgba(58,111,247,0.18);
--active-file-shadow: 0 8px 18px rgba(58,111,247,0.08);
--loading-bar-bg: linear-gradient(90deg, var(--brand), #38bdf8);
}
html[data-theme-id="default"][data-color-mode="dark"] {
--bg: #0b1120;
--bg-elevated: rgba(15, 23, 42, 0.82);
--bg-panel: #0f172a;
--bg-soft: #111827;
--bg-hover: #182033;
--text: #e5edf9;
--text-muted: #a3b2c6;
--text-soft: #6f8099;
--border: rgba(148, 163, 184, 0.16);
--border-strong: rgba(148, 163, 184, 0.26);
--brand: #7aa2ff;
--brand-strong: #93b4ff;
--brand-soft: rgba(122, 162, 255, 0.14);
--code-bg: #020617;
--code-fg: #dbeafe;
--shadow-lg: 0 24px 60px rgba(2, 6, 23, 0.34);
--shadow-md: 0 14px 32px rgba(2, 6, 23, 0.28);
--shadow-sm: 0 6px 18px rgba(2, 6, 23, 0.2);
--body-bg:
radial-gradient(circle at top left, rgba(58, 111, 247, 0.16), transparent 30%),
radial-gradient(circle at top right, rgba(56, 189, 248, 0.10), transparent 26%),
linear-gradient(180deg, #0b1120 0%, #09101c 100%);
--brand-mark-bg: linear-gradient(135deg, #7aa2ff, #38bdf8);
--active-file-bg: linear-gradient(180deg, rgba(122,162,255,0.18), rgba(122,162,255,0.09));
--active-file-border: rgba(122,162,255,0.24);
--active-file-shadow: 0 12px 22px rgba(2,6,23,0.26);
--loading-bar-bg: linear-gradient(90deg, #7aa2ff, #38bdf8);
}
public/themes/paper/highlight-dark.css
+39
View File
@@ -0,0 +1,39 @@
/* Dark theme for highlight.js - GitHub Dark-like */
.hljs { display: block; overflow-x: auto; padding: 0; background: transparent; color: #c9d1d9; }
.hljs-comment,
.hljs-quote { color: #8b949e; font-style: italic; }
.hljs-keyword,
.hljs-selector-tag,
.hljs-subst { color: #ff7b72; font-weight: bold; }
.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-template-variable,
.hljs-tag .hljs-attr { color: #79c0ff; }
.hljs-string,
.hljs-doctag { color: #a5d6ff; }
.hljs-title,
.hljs-section,
.hljs-selector-id { color: #d2a8ff; font-weight: bold; }
.hljs-subst { font-weight: normal; }
.hljs-type,
.hljs-class .hljs-title { color: #d2a8ff; font-weight: bold; }
.hljs-tag,
.hljs-name,
.hljs-attribute { color: #7ee787; font-weight: normal; }
.hljs-regexp,
.hljs-link { color: #a5d6ff; }
.hljs-symbol,
.hljs-bullet { color: #ffa657; }
.hljs-built_in,
.hljs-builtin-name { color: #79c0ff; }
.hljs-meta { color: #8b949e; font-weight: bold; }
.hljs-deletion { background: #490202; }
.hljs-addition { background: #04260f; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: bold; }
/* Line numbers */
.hljs-ln { border-collapse: collapse; }
.hljs-ln td { padding: 0; }
.hljs-ln-n { text-align: right; padding-right: 8px; color: #484f58; user-select: none; }
public/themes/paper/highlight-light.css
+39
View File
@@ -0,0 +1,39 @@
/* Light theme for highlight.js - GitHub-like */
.hljs { display: block; overflow-x: auto; padding: 0; background: transparent; color: #24292e; }
.hljs-comment,
.hljs-quote { color: #6a737d; font-style: italic; }
.hljs-keyword,
.hljs-selector-tag,
.hljs-subst { color: #d73a49; font-weight: bold; }
.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-template-variable,
.hljs-tag .hljs-attr { color: #005cc5; }
.hljs-string,
.hljs-doctag { color: #032f62; }
.hljs-title,
.hljs-section,
.hljs-selector-id { color: #6f42c1; font-weight: bold; }
.hljs-subst { font-weight: normal; }
.hljs-type,
.hljs-class .hljs-title { color: #6f42c1; font-weight: bold; }
.hljs-tag,
.hljs-name,
.hljs-attribute { color: #22863a; font-weight: normal; }
.hljs-regexp,
.hljs-link { color: #032f62; }
.hljs-symbol,
.hljs-bullet { color: #e36209; }
.hljs-built_in,
.hljs-builtin-name { color: #005cc5; }
.hljs-meta { color: #6a737d; font-weight: bold; }
.hljs-deletion { background: #ffeef0; }
.hljs-addition { background: #f0fff4; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: bold; }
/* Line numbers */
.hljs-ln { border-collapse: collapse; }
.hljs-ln td { padding: 0; }
.hljs-ln-n { text-align: right; padding-right: 8px; color: #959da5; user-select: none; }
public/themes/paper/manifest.json
+11
View File
@@ -0,0 +1,11 @@
{
"id": "paper",
"label": "Paper",
"description": "偏纸质阅读感的暖色主题。",
"defaultMode": "light",
"stylesheet": "theme.css",
"highlight": {
"light": "highlight-light.css",
"dark": "highlight-dark.css"
}
}
public/themes/paper/theme.css
+59
View File
@@ -0,0 +1,59 @@
html[data-theme-id="paper"][data-color-mode="light"] {
--bg: #f3ece1;
--bg-elevated: rgba(255, 251, 245, 0.9);
--bg-panel: #fffaf2;
--bg-soft: #ede2d0;
--bg-hover: #e6d6bb;
--text: #3f2f21;
--text-muted: #7d6752;
--text-soft: #a48b73;
--border: rgba(108, 84, 56, 0.18);
--border-strong: rgba(108, 84, 56, 0.28);
--brand: #8a5a2b;
--brand-strong: #6f451d;
--brand-soft: rgba(138, 90, 43, 0.12);
--code-bg: #2b2118;
--code-fg: #f8efe3;
--shadow-lg: 0 18px 42px rgba(77, 52, 29, 0.1);
--shadow-md: 0 10px 24px rgba(77, 52, 29, 0.08);
--shadow-sm: 0 4px 14px rgba(77, 52, 29, 0.06);
--body-bg:
radial-gradient(circle at top left, rgba(199, 141, 76, 0.15), transparent 28%),
radial-gradient(circle at top right, rgba(121, 171, 150, 0.12), transparent 24%),
linear-gradient(180deg, #fff8ed 0%, #f3ece1 100%);
--brand-mark-bg: linear-gradient(135deg, #b17633, #7a4d26);
--active-file-bg: linear-gradient(180deg, rgba(177,118,51,0.18), rgba(177,118,51,0.08));
--active-file-border: rgba(138,90,43,0.24);
--active-file-shadow: 0 10px 20px rgba(122,77,38,0.1);
--loading-bar-bg: linear-gradient(90deg, #b17633, #79ab96);
}
html[data-theme-id="paper"][data-color-mode="dark"] {
--bg: #17120d;
--bg-elevated: rgba(31, 24, 18, 0.88);
--bg-panel: #211912;
--bg-soft: #2b2118;
--bg-hover: #35291e;
--text: #f1e4d4;
--text-muted: #c2ab93;
--text-soft: #8f7762;
--border: rgba(205, 173, 141, 0.14);
--border-strong: rgba(205, 173, 141, 0.24);
--brand: #d1a16c;
--brand-strong: #e0b88c;
--brand-soft: rgba(209, 161, 108, 0.14);
--code-bg: #120d09;
--code-fg: #f8efe3;
--shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.32);
--shadow-md: 0 14px 30px rgba(0, 0, 0, 0.24);
--shadow-sm: 0 6px 16px rgba(0, 0, 0, 0.18);
--body-bg:
radial-gradient(circle at top left, rgba(209, 161, 108, 0.16), transparent 30%),
radial-gradient(circle at top right, rgba(121, 171, 150, 0.1), transparent 24%),
linear-gradient(180deg, #1a140f 0%, #120d09 100%);
--brand-mark-bg: linear-gradient(135deg, #d1a16c, #79ab96);
--active-file-bg: linear-gradient(180deg, rgba(209,161,108,0.18), rgba(209,161,108,0.08));
--active-file-border: rgba(209,161,108,0.22);
--active-file-shadow: 0 12px 20px rgba(0,0,0,0.22);
--loading-bar-bg: linear-gradient(90deg, #d1a16c, #79ab96);
}