perf: improve the dark theme

2024-07-15 23:59:22 +08:00
parent f95d9aa609
commit cf16c7bdde
12 changed files with 124 additions and 199 deletions
--- a/packages/@core/shared/constants/src/global.ts
+++ b/packages/@core/shared/constants/src/global.ts
@@ -1,15 +1,12 @@
-// --vben-content-client-height
-
-/**
- * @zh_CN CSS 变量前缀
- * @en_US CSS variable prefix
- */
-const CSS_VARIABLE_PREFIX = '--vben';
-
 /**
 * @zh_CN 布局内容高度 css变量
 * @en_US Layout content height
 */
-const CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT = `${CSS_VARIABLE_PREFIX}-content-height`;
+const CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT = `--vben-content-height`;

-export { CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT, CSS_VARIABLE_PREFIX };
+/**
+ * @zh_CN 默认命名空间
+ */
+const DEFAULT_NAMESPACE = 'vben';
+
+export { CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT, DEFAULT_NAMESPACE };
--- a/packages/@core/shared/design/src/design-tokens/dark/index.css
+++ b/packages/@core/shared/design/src/design-tokens/dark/index.css
@@ -1,6 +1,6 @@
-:root.dark,
-:root.dark[data-theme='custom'],
-:root.dark[data-theme='default'] {
+.dark,
+.dark[data-theme='custom'],
+.dark[data-theme='default'] {
  /* Default background color of <body />...etc */
  --background: 222.34deg 10.43% 12.27%;

@@ -85,10 +85,14 @@

  /* =============component & UI============= */

+  --sidebar: 222.34deg 10.43% 12.27%;
+  --sidebar-deep: 220deg 13.06% 9%;
+
  color-scheme: dark;
 }

-:root.dark[data-theme='violet'] {
+.dark[data-theme='violet'],
+[data-theme='violet'] .dark {
  --background: 224 71.4% 4.1%;
  --background-content: var(--background);
  --foreground: 210 20% 98%;
@@ -108,9 +112,12 @@
  --border: 215 27.9% 16.9%;
  --input: 215 27.9% 16.9%;
  --ring: 263.4 70% 50.4%;
+  --sidebar: 224 71.4% 4.1%;
+  --sidebar-deep: 224 71.4% 4.1%;
 }

-:root.dark[data-theme='pink'] {
+.dark[data-theme='pink'],
+[data-theme='pink'] .dark {
  --background: 20 14.3% 4.1%;
  --background-content: var(--background);
  --foreground: 0 0% 95%;
@@ -130,9 +137,12 @@
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --ring: 346.8 77.2% 49.8%;
+  --sidebar: 20 14.3% 4.1%;
+  --sidebar-deep: 20 14.3% 4.1%;
 }

-:root.dark[data-theme='rose'] {
+.dark[data-theme='rose'],
+[data-theme='rose'] .dark {
  --background: 0 0% 3.9%;
  --background-content: var(--background);
  --foreground: 0 0% 98%;
@@ -152,9 +162,12 @@
  --border: 0 0% 14.9%;
  --input: 0 0% 14.9%;
  --ring: 0 72.2% 50.6%;
+  --sidebar: 0 0% 3.9%;
+  --sidebar-deep: 0 0% 3.9%;
 }

-:root.dark[data-theme='sky-blue'] {
+.dark[data-theme='sky-blue'],
+[data-theme='sky-blue'] .dark {
  --background: 222.2 84% 4.9%;
  --background-content: var(--background);
  --foreground: 210 40% 98%;
@@ -174,9 +187,12 @@
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 224.3 76.3% 48%;
+  --sidebar: 222.2 84% 4.9%;
+  --sidebar-deep: 222.2 84% 4.9%;
 }

-:root.dark[data-theme='deep-blue'] {
+.dark[data-theme='deep-blue'],
+[data-theme='deep-blue'] .dark {
  --background: 222.2 84% 4.9%;
  --background-content: var(--background);
  --foreground: 210 40% 98%;
@@ -196,9 +212,12 @@
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 224.3 76.3% 48%;
+  --sidebar: 222.2 84% 4.9%;
+  --sidebar-deep: 222.2 84% 4.9%;
 }

-:root.dark[data-theme='green'] {
+.dark[data-theme='green'],
+[data-theme='green'] .dark {
  --background: 20 14.3% 4.1%;
  --background-content: var(--background);
  --foreground: 0 0% 95%;
@@ -218,9 +237,12 @@
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --ring: 142.4 71.8% 29.2%;
+  --sidebar: 20 14.3% 4.1%;
+  --sidebar-deep: 20 14.3% 4.1%;
 }

-:root.dark[data-theme='deep-green'] {
+.dark[data-theme='deep-green'],
+[data-theme='deep-green'] .dark {
  --background: 20 14.3% 4.1%;
  --background-content: var(--background);
  --foreground: 0 0% 95%;
@@ -240,9 +262,12 @@
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --ring: 142.4 71.8% 29.2%;
+  --sidebar: 20 14.3% 4.1%;
+  --sidebar-deep: 20 14.3% 4.1%;
 }

-:root.dark[data-theme='orange'] {
+.dark[data-theme='orange'],
+[data-theme='orange'] .dark {
  --background: 20 14.3% 4.1%;
  --background-content: var(--background);
  --foreground: 60 9.1% 97.8%;
@@ -262,9 +287,12 @@
  --border: 12 6.5% 15.1%;
  --input: 12 6.5% 15.1%;
  --ring: 20.5 90.2% 48.2%;
+  --sidebar: 20 14.3% 4.1%;
+  --sidebar-deep: 20 14.3% 4.1%;
 }

-:root.dark[data-theme='yellow'] {
+.dark[data-theme='yellow'],
+[data-theme='yellow'] .dark {
  --background: 20 14.3% 4.1%;
  --background-content: var(--background);
  --foreground: 60 9.1% 97.8%;
@@ -284,9 +312,12 @@
  --border: 12 6.5% 15.1%;
  --input: 12 6.5% 15.1%;
  --ring: 35.5 91.7% 32.9%;
+  --sidebar: 20 14.3% 4.1%;
+  --sidebar-deep: 20 14.3% 4.1%;
 }

-:root.dark[data-theme='zinc'] {
+.dark[data-theme='zinc'],
+[data-theme='zinc'] .dark {
  --background: 240 10% 3.9%;
  --background-content: var(--background);
  --foreground: 0 0% 98%;
@@ -306,9 +337,12 @@
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --ring: 240 4.9% 83.9%;
+  --sidebar: 240 10% 3.9%;
+  --sidebar-deep: 240 10% 3.9%;
 }

-:root.dark[data-theme='neutral'] {
+.dark[data-theme='neutral'],
+[data-theme='neutral'] .dark {
  --background: 0 0% 3.9%;
  --background-content: var(--background);
  --foreground: 0 0% 98%;
@@ -328,9 +362,12 @@
  --border: 0 0% 14.9%;
  --input: 0 0% 14.9%;
  --ring: 0 0% 83.1%;
+  --sidebar: 0 0% 3.9%;
+  --sidebar-deep: 0 0% 3.9%;
 }

-:root.dark[data-theme='slate'] {
+.dark[data-theme='slate'],
+[data-theme='slate'] .dark {
  --background: 222.2 84% 4.9%;
  --background-content: var(--background);
  --foreground: 210 40% 98%;
@@ -350,9 +387,12 @@
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 212.7 26.8% 83.9;
+  --sidebar: 222.2 84% 4.9%;
+  --sidebar-deep: 222.2 84% 4.9%;
 }

-:root.dark[data-theme='gray'] {
+.dark[data-theme='gray'],
+[data-theme='gray'] .dark {
  --background: 224 71.4% 4.1%;
  --background-content: var(--background);
  --foreground: 210 20% 98%;
@@ -372,4 +412,6 @@
  --border: 215 27.9% 16.9%;
  --input: 215 27.9% 16.9%;
  --ring: 216 12.2% 83.9%;
+  --sidebar: 224 71.4% 4.1%;
+  --sidebar-deep: 224 71.4% 4.1%;
 }
--- a/packages/@core/shared/design/src/design-tokens/default/index.css
+++ b/packages/@core/shared/design/src/design-tokens/default/index.css
@@ -1,8 +1,8 @@
-/* https://gavin-yyc.github.io/colorconvert/ */
 :root {
-  --font-geist-sans: 'geist-sans', -apple-system, blinkmacsystemfont, 'Segoe UI',
-    roboto, helvetica, arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-    'Segoe UI Symbol';
+  --font-geist-sans: 'pingfang sc', -apple-system, blinkmacsystemfont,
+    'segoe ui', helvetica, 'helvetica neue', 'microsoft yahei ui',
+    'microsoft yahei', arial, 'hiragino sans', 'apple color emoji',
+    'segoe ui emoji', 'segoe ui symbol', simsun, sans-serif;

  /* Default background color of <body />...etc */
  --background: 0 0 100%;
@@ -85,27 +85,17 @@
  /* 登录背景色 */
  --authentication: 231deg 61% 44%;

-  /* 用于浅色主题下一些暗色主题的颜色 */
-  --accent-dark-hover: 0deg 0% 100% / 12%;
-  --foreground-dark: 220 13% 91%;
-  --accent-dark: 0deg 0% 100% / 8%;
-  --border-dark: 240 3.7% 15.9%;
-
  /* =============component & UI============= */

  /* menu */
-  --menu: 0deg 0% 100%;
-  --menu-deep: 210 11.11% 96.47%;
-
-  /* menu-dark */
-  --menu-dark: 222.34deg 10.43% 12.27%;
-  --menu-dark-deep: 220deg 13.06% 9%;
+  --sidebar: 0 0% 100%;
+  --sidebar-deep: 210 11.11% 96.47%;

  accent-color: var(--primary);
  color-scheme: light;
 }

-:root[data-theme='violet'] {
+[data-theme='violet'] {
  /* --background: 0 0% 100%; */
  --foreground: 224 71.4% 4.1%;
  --card: 0 0% 100%;
@@ -124,15 +114,9 @@
  --border: 220 13% 91%;
  --input: 220 13% 91%;
  --ring: 262.1 83.3% 57.8%;
-
-  /* menu-dark */
-  --menu-dark: 224 71.4% 4.1%;
-  --menu-dark-deep: 224 71.4% 4.1%;
-  --border-dark: 215 27.9% 16.9%;
-  --foreground-dark: 210 20% 98%;
 }

-:root[data-theme='pink'] {
+[data-theme='pink'] {
  /* --background: 0 0% 100%; */
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
@@ -151,15 +135,9 @@
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --ring: 346.8 77.2% 49.8%;
-
-  /* menu-dark */
-  --menu-dark: 20 14.3% 4.1%;
-  --menu-dark-deep: 20 14.3% 4.1%;
-  --border-dark: 240 3.7% 15.9%;
-  --foreground-dark: 0 0% 95%;
 }

-:root[data-theme='rose'] {
+[data-theme='rose'] {
  /* --background: 0 0% 100%; */
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
@@ -178,15 +156,9 @@
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --ring: 346.8 77.2% 49.8%;
-
-  /* menu-dark */
-  --menu-dark: 0 0% 3.9%;
-  --menu-dark-deep: 0 0% 3.9%;
-  --border-dark: 0 0% 14.9%;
-  --foreground-dark: 0 0% 98%;
 }

-:root[data-theme='sky-blue'] {
+[data-theme='sky-blue'] {
  /* --background: 0 0% 100%; */
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
@@ -205,15 +177,9 @@
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 221.2 83.2% 53.3%;
-
-  /* menu-dark */
-  --menu-dark: 222.2 84% 4.9%;
-  --menu-dark-deep: 222.2 84% 4.9%;
-  --border-dark: 217.2 32.6% 17.5%;
-  --foreground-dark: 210 40% 98%;
 }

-:root[data-theme='deep-blue'] {
+[data-theme='deep-blue'] {
  /* --background: 0 0% 100%; */
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
@@ -232,15 +198,9 @@
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 221.2 83.2% 53.3%;
-
-  /* menu-dark */
-  --menu-dark: 222.2 84% 4.9%;
-  --menu-dark-deep: 222.2 84% 4.9%;
-  --border-dark: 217.2 32.6% 17.5%;
-  --foreground-dark: 210 40% 98%;
 }

-:root[data-theme='green'] {
+[data-theme='green'] {
  /* --background: 0 0% 100%; */
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
@@ -259,15 +219,9 @@
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --ring: 142.1 76.2% 36.3%;
-
-  /* menu-dark */
-  --menu-dark: 20 14.3% 4.1%;
-  --menu-dark-deep: 20 14.3% 4.1%;
-  --border-dark: 240 3.7% 15.9%;
-  --foreground-dark: 0 0% 95%;
 }

-:root[data-theme='deep-green'] {
+[data-theme='deep-green'] {
  /* --background: 0 0% 100%; */
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
@@ -286,15 +240,9 @@
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --ring: 142.1 76.2% 36.3%;
-
-  /* menu-dark */
-  --menu-dark: 20 14.3% 4.1%;
-  --menu-dark-deep: 20 14.3% 4.1%;
-  --border-dark: 240 3.7% 15.9%;
-  --foreground-dark: 0 0% 95%;
 }

-:root[data-theme='orange'] {
+[data-theme='orange'] {
  /* --background: 0 0% 100%; */
  --foreground: 20 14.3% 4.1%;
  --card: 0 0% 100%;
@@ -313,15 +261,9 @@
  --border: 20 5.9% 90%;
  --input: 20 5.9% 90%;
  --ring: 24.6 95% 53.1%;
-
-  /* menu-dark */
-  --menu-dark: 20 14.3% 4.1%;
-  --menu-dark-deep: 20 14.3% 4.1%;
-  --border-dark: 12 6.5% 15.1%;
-  --foreground-dark: 60 9.1% 97.8%;
 }

-:root[data-theme='yellow'] {
+[data-theme='yellow'] {
  /* --background: 0 0% 100%; */
  --foreground: 20 14.3% 4.1%;
  --card: 0 0% 100%;
@@ -340,15 +282,9 @@
  --border: 20 5.9% 90%;
  --input: 20 5.9% 90%;
  --ring: 20 14.3% 4.1%;
-
-  /* menu-dark */
-  --menu-dark: 20 14.3% 4.1%;
-  --menu-dark-deep: 20 14.3% 4.1%;
-  --border-dark: 12 6.5% 15.1%;
-  --foreground-dark: 60 9.1% 97.8%;
 }

-:root[data-theme='zinc'] {
+[data-theme='zinc'] {
  /* --background: 0 0% 100%; */
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
@@ -367,15 +303,9 @@
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --ring: 240 5.9% 10%;
-
-  /* menu-dark */
-  --menu-dark: 240 10% 3.9%;
-  --menu-dark-deep: 240 10% 3.9%;
-  --border-dark: 240 3.7% 15.9%;
-  --foreground-dark: 0 0% 98%;
 }

-:root[data-theme='neutral'] {
+[data-theme='neutral'] {
  /* --background: 0 0% 100%; */
  --foreground: 0 0% 3.9%;
  --card: 0 0% 100%;
@@ -394,15 +324,9 @@
  --border: 0 0% 89.8%;
  --input: 0 0% 89.8%;
  --ring: 0 0% 3.9%;
-
-  /* menu-dark */
-  --menu-dark: 0 0% 3.9%;
-  --menu-dark-deep: 0 0% 3.9%;
-  --border-dark: 0 0% 14.9%;
-  --foreground-dark: 0 0% 98%;
 }

-:root[data-theme='slate'] {
+[data-theme='slate'] {
  /* --background: 0 0% 100%; */
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
@@ -421,15 +345,9 @@
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 222.2 84% 4.9%;
-
-  /* menu-dark */
-  --menu-dark: 222.2 84% 4.9%;
-  --menu-dark-deep: 222.2 84% 4.9%;
-  --border-dark: 217.2 32.6% 17.5%;
-  --foreground-dark: 210 40% 98%;
 }

-:root[data-theme='gray'] {
+[data-theme='gray'] {
  /* --background: 0 0% 100%; */
  --foreground: 224 71.4% 4.1%;
  --card: 0 0% 100%;
@@ -448,10 +366,4 @@
  --border: 220 13% 91%;
  --input: 220 13% 91%;
  --ring: 224 71.4% 4.1%;
-
-  /* menu-dark */
-  --menu-dark: 224 71.4% 4.1%;
-  --menu-dark-deep: 224 71.4% 4.1%;
-  --border-dark: 215 27.9% 16.9%;
-  --foreground-dark: 210 20% 98%;
 }
--- a/packages/@core/shared/design/src/scss/base.scss
+++ b/packages/@core/shared/design/src/scss/base.scss
@@ -27,8 +27,9 @@ html.grayscale-mode {
 html {
  @apply text-foreground bg-background;

-  // font-size: 62.5%;
+  font-size: 100%;
  font-variation-settings: normal;
+  line-height: 1.15;
  text-size-adjust: 100%;
  font-synthesis-weight: none;
  scroll-behavior: smooth;
@@ -36,12 +37,16 @@ html {
  -webkit-tap-highlight-color: transparent;
 }

+body {
+  min-height: 100vh;
+}
+
 a,
 a:active,
 a:hover,
 a:link,
 a:visited {
-  // color: inherit;
+  /* color: inherit; */
  text-decoration: none;
 }

@@ -69,7 +74,7 @@ html.dark::view-transition-new(root) {

 input::placeholder,
 textarea::placeholder {
-  // color: hsl(var(--color-input-placeholder)) !important;
+  /* color: hsl(var(--color-input-placeholder)) !important; */
  opacity: 1;
 }