adopt CYBER neon-dark theme tokens
Replace the Pure Ink light/dark/comic theme system with the CYBER single-theme dark palette from the reviewed prototype: OKLCH surfaces, one neon-cyan accent, and monospace-first typography. Arco components were reading colors from arco.css because no ConfigProvider was mounted, so the theme values in arco-theme.ts never took effect. Bridge CYBER into Arco through its --color-* variables in global.scss instead, and align arco-theme.ts to match. Brightness and style switches are gone: useTheme now pins dark, the comic font faces and locale keys are removed, and ThemeSwitch.vue is deleted along with its sidebar slot and display setting.
This commit is contained in:
@@ -1,54 +1,6 @@
|
||||
@use 'variables' as *;
|
||||
@use 'code-block';
|
||||
|
||||
@font-face {
|
||||
font-family: 'Comic Neue';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url('/fonts/ComicNeue-Bold.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'ZCOOL KuaiLe';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url('/fonts/ZCOOLKuaiLe-Regular.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Zen Maru Gothic';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url('/fonts/ZenMaruGothic-Regular.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Zen Maru Gothic';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url('/fonts/ZenMaruGothic-Bold.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Gaegu';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url('/fonts/Gaegu-Regular.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Gaegu';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url('/fonts/Gaegu-Bold.ttf') format('truetype');
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
@@ -75,13 +27,98 @@ textarea {
|
||||
}
|
||||
}
|
||||
|
||||
// Theme transition (applied programmatically on toggle, not on load)
|
||||
html.theme-transitioning,
|
||||
html.theme-transitioning *,
|
||||
html.theme-transitioning *::before,
|
||||
html.theme-transitioning *::after {
|
||||
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease,
|
||||
box-shadow 0.3s ease, fill 0.3s ease, stroke 0.3s ease !important;
|
||||
// ─── Arco Design token bridge ──────────────────────────────────
|
||||
// arco-theme.ts 不是运行时来源（没有 ConfigProvider），Arco 的实际外观由 arco.css
|
||||
// 里的 --color-* 变量决定。这里把 CYBER 令牌翻译成 Arco 变量，让 a-select /
|
||||
// a-input / a-tag / a-table / a-modal 等自有控件与项目配色对齐。
|
||||
// 变量表见 node_modules/@arco-design/web-vue/dist/arco.css 的 :root 块。
|
||||
html[arco-theme='dark'],
|
||||
:root {
|
||||
--color-primary-light-1: oklch(0.30 0.060 188);
|
||||
--color-primary-light-2: oklch(0.39 0.075 188);
|
||||
--color-primary-light-3: oklch(0.50 0.095 188);
|
||||
--color-primary-light-4: oklch(0.60 0.115 188);
|
||||
--color-primary-light-5: oklch(0.68 0.130 188);
|
||||
--color-primary-light-6: oklch(0.805 0.148 188);
|
||||
--color-primary: oklch(0.805 0.148 188);
|
||||
--color-primary-dark-1: oklch(0.760 0.144 188);
|
||||
--color-primary-dark-2: oklch(0.700 0.138 188);
|
||||
--color-primary-dark-3: oklch(0.640 0.130 188);
|
||||
--color-primary-dark-4: oklch(0.580 0.120 188);
|
||||
--color-primary-dark-5: oklch(0.520 0.108 188);
|
||||
--color-primary-dark-6: oklch(0.460 0.094 188);
|
||||
|
||||
--color-success-light-1: oklch(0.28 0.050 165);
|
||||
--color-success-light-2: oklch(0.42 0.078 165);
|
||||
--color-success-light-3: oklch(0.58 0.108 165);
|
||||
--color-success: oklch(0.760 0.140 165);
|
||||
|
||||
--color-warning-light-1: oklch(0.30 0.052 85);
|
||||
--color-warning-light-2: oklch(0.46 0.082 85);
|
||||
--color-warning-light-3: oklch(0.62 0.112 85);
|
||||
--color-warning: oklch(0.810 0.145 85);
|
||||
|
||||
--color-danger-light-1: oklch(0.28 0.062 22);
|
||||
--color-danger-light-2: oklch(0.42 0.096 22);
|
||||
--color-danger-light-3: oklch(0.56 0.138 22);
|
||||
--color-danger: oklch(0.665 0.185 22);
|
||||
|
||||
--color-link-light-1: oklch(0.30 0.060 188);
|
||||
--color-link-light-2: oklch(0.42 0.084 188);
|
||||
--color-link-light-3: oklch(0.54 0.110 188);
|
||||
--color-link-light-4: oklch(0.66 0.136 188);
|
||||
--color-link-light-5: oklch(0.74 0.148 188);
|
||||
--color-link-light-6: oklch(0.805 0.148 188);
|
||||
--color-link: oklch(0.805 0.148 188);
|
||||
|
||||
// 容器与文字
|
||||
--color-text-1: oklch(0.945 0.006 200);
|
||||
--color-text-2: oklch(0.860 0.008 210);
|
||||
--color-text-3: oklch(0.705 0.014 230);
|
||||
--color-text-4: oklch(0.520 0.014 236);
|
||||
--color-text-disabled: oklch(0.420 0.012 238);
|
||||
|
||||
--color-bg-1: oklch(0.155 0.012 250);
|
||||
--color-bg-2: oklch(0.130 0.012 250);
|
||||
--color-bg-3: oklch(0.185 0.014 248);
|
||||
--color-bg-4: oklch(0.225 0.016 246);
|
||||
--color-bg-5: oklch(0.255 0.018 247);
|
||||
--color-fill-1: oklch(0.185 0.014 248);
|
||||
--color-fill-2: oklch(0.225 0.016 246);
|
||||
--color-fill-3: oklch(0.255 0.018 247);
|
||||
--color-fill-4: oklch(0.285 0.018 246);
|
||||
|
||||
--color-border-1: oklch(0.305 0.018 242);
|
||||
--color-border-2: oklch(0.255 0.016 244);
|
||||
--color-border-3: oklch(0.225 0.014 246);
|
||||
--color-border-4: oklch(0.195 0.014 248);
|
||||
|
||||
--color-fill-2-hover: oklch(0.255 0.018 247);
|
||||
--color-fill-3-hover: oklch(0.285 0.018 246);
|
||||
|
||||
--radius-small: 4px;
|
||||
--radius-medium: 6px;
|
||||
--radius-large: 8px;
|
||||
|
||||
--font-size-body-1: 14px;
|
||||
--font-size-body-2: 13px;
|
||||
--font-size-body-3: 12px;
|
||||
|
||||
// CYBER 的核心排版特征：标题、页头、数据用等宽
|
||||
--font-family: #{$font-ui};
|
||||
--font-family-body: #{$font-ui};
|
||||
--font-family-code: #{$font-code};
|
||||
}
|
||||
|
||||
// Arco 暗色态：强制走暗色变量（属性挂在 <html> 上，Arco 官方选择器可能匹配 body）
|
||||
body {
|
||||
color: $text-primary;
|
||||
background-color: $bg-primary;
|
||||
}
|
||||
|
||||
// Arco 组件里的滚动条与焦点环对齐 CYBER
|
||||
.arco-scrollbar-thumb {
|
||||
background-color: $border-color !important;
|
||||
}
|
||||
|
||||
html, body {
|
||||
@@ -146,8 +183,8 @@ a {
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@@ -158,10 +195,10 @@ a {
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: $border-color;
|
||||
border-radius: 3px;
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover {
|
||||
background: $text-muted;
|
||||
background: rgba(var(--accent-primary-rgb), 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user