.dark,
.dark[data-theme='custom'],
.dark[data-theme='default'] {
    color-scheme: dark;
    /* Default background color of <body />...etc */
    --background: 222.34deg 10.43% 12.27%;

    /* 主体区域背景色 */
    --background-deep: 220deg 13.06% 9%;
    --foreground: 0 0% 95%;

    /* Background color for <Card /> */
    --card: 222.34deg 10.43% 12.27%;

    /* --card: 222.2 84% 4.9%; */
    --card-foreground: 210 40% 98%;

    /* Background color for popovers such as <DropdownMenu />, <HoverCard />, <Popover /> */
    --popover: 222.82deg 8.43% 12.27%;
    --popover-foreground: 210 40% 98%;

    /* Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch /> */

    /* --muted: 220deg 6.82% 17.25%; */

    /* --muted-foreground: 215 20.2% 65.1%; */

    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;

    /* 主题颜色 */

    /* --primary: 245 82% 67%; */
    --primary-foreground: 0 0% 98%;

    /* Used for destructive actions such as <Button variant="destructive"> */

    --destructive: 359.21 68.47% 56.47%;
    --destructive-foreground: 0 0% 98%;

    /* Used for success actions such as <message> */

    --info: 180, 1.54%, 12.75%;
    --info-foreground: 220, 4%, 58%;

    /* Used for success actions such as <message> */

    --success: 144 57% 58%;
    --success-foreground: 0 0% 98%;

    /* Used for warning actions such as <message> */

    --warning: 42 84% 61%;
    --warning-foreground: 0 0% 98%;

    /* 颜色次要 */
    --secondary: 240 5% 17%;
    --secondary-foreground: 0 0% 98%;

    /* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
    --accent: 216 5% 19%;
    --accent-lighter: 216 5% 12%;
    --accent-hover: 216 5% 24%;
    --accent-foreground: 0 0% 98%;

    /* Darker color */
    --heavy: 216 5% 24%;
    --heavy-foreground: var(--accent-foreground);

    /* Default border color */
    --border: 240 3.7% 22%;

    /* Border color for inputs such as <Input />, <Select />, <Textarea /> */
    --input: 0deg 0% 100% / 10%;
    --input-placeholder: 218deg 11% 65%;
    --input-background: 0deg 0% 100% / 5%;

    /* Used for focus ring */
    --ring: 222.2 84% 4.9%;

    /* 基本圆角大小 */
    --radius: 0.5rem;

    /* ============= Custom ============= */

    /* 遮罩颜色 */
    --overlay: 0deg 0% 0% / 40%;
    --overlay-content: 0deg 0% 0% / 40%;

    /* 基本文字大小 */
    --font-size-base: 16px;

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

    --sidebar: 222.34deg 10.43% 12.27%;
    --sidebar-deep: 220deg 13.06% 9%;
    --menu: var(--sidebar);

    /* header */
    --header: 222.34deg 10.43% 12.27%;
    /* container */
    --container-background-color: var(--menu-background-color);
    /* sidebar */
    --menu-background-color: hsl(var(--menu));
    --menu-item-background-color: var(--menu-background-color);
    --menu-item-color: hsl(var(--foreground) / 80%);
    --menu-item-hover-color: hsl(var(--accent-foreground));
    --menu-item-hover-background-color: hsl(var(--accent));
    --menu-item-active-color: hsl(var(--accent-foreground));
    --menu-item-active-background-color: hsl(var(--accent));
    --menu-submenu-hover-color: hsl(var(--foreground));
    --menu-submenu-hover-background-color: hsl(var(--accent));
    --menu-submenu-active-color: hsl(var(--foreground));
    --menu-submenu-active-background-color: transparent;
    --menu-submenu-background-color: var(--menu-background-color);
    /* table */
    --el-table-bg-color: rgb(28, 30, 35);
    --el-table-tr-bg-color: rgb(28, 30, 35);
    --el-table-border: rgb(54, 54, 58);
    --el-fill-color-lighter: rgb(29, 30, 32);
    --el-table-row-hover-bg-color: rgb(46, 48, 51);
    /* dialog */
    --el-dialog-header-bg-color: var(--el-table-row-hover-bg-color);
}