html.dark {
    --bg-primary: #121212;
    --bg-secondary: #1a1a1a;
    --bg-muted: #2c2c2c;
    --text-sharp: #ffffff;
    --text-primary: #f5f5f5;
    --text-secondary: #b0b0b0;
    --text-muted: #777777;
    --border-color: #333333;
    --accent-color: #bb86fc;
    --button-bg: #292727bb;
    --hover-bg: #292929;
    --active-bg: #2c2c2c;
    --link-color: #ffdaaf;

    /* Sidebar dark mode default color */
    --sidebar-icon-color: #979797e5;
    --sidebar-chevron-color: #979797e5;
    --sidebar-label-color: #979797e5;
    /* Sidebar dark mode active color */
    --sidebar-active-icon-color: #ffffff;
    --sidebar-active-chevron-color: #ffffff;
    --sidebar-active-label-color: #ffffff;
    /* Sidebar dark mode hover color */
    --sidebar-hover-icon-color: #ffffff;
    --sidebar-hover-chevron-color: #ffffff;
    --sidebar-hover-label-color: #ffffff;

    /* Theme adaptive variables */
    --card-bg: rgba(18, 14, 36, 0.55);
    --card-border: rgba(255, 255, 255, 0.08);
    --card-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    --card-shadow-hover: 0 12px 40px rgba(0, 240, 255, 0.15);
    --panel-bg: rgba(0, 0, 0, 0.35);
    --panel-border: rgba(255, 255, 255, 0.05);
    --tag-bg: rgba(255, 255, 255, 0.04);
    --tag-border: rgba(255, 255, 255, 0.08);
    --tag-text: #e2e8f0;
    --code-bg: #090714;
    --code-border: rgba(255, 255, 255, 0.06);
    --input-bg: rgba(0, 0, 0, 0.4);
    --input-border: rgba(255, 255, 255, 0.12);
    --input-text: #ffffff;

    /* background Gradient */
    --bg-gradient-card-theme: linear-gradient(135deg, #532c0044 0%, #ff990049 100%);
    --bg-gradient-btn-theme: linear-gradient(135deg, #532c0094 0%, #ff99008e 100%);
    --bg-gradient-icon-theme: linear-gradient(135deg, #532c00cb 0%, #ff9900c0 100%);

    /* shadow */
    --shadow-theme: 0 5px 10px rgba(255, 153, 1, 0.082);
    --hover-shadow-theme: 0 7px 15px rgba(255, 153, 1, 0.26);

    /* boder */
    --border-theme: #ff880015;
    --border-hover-theme: #ff8800;

    /* icon */
    --icon-theme: #ff9900;
}

html:not(.dark) {
    --bg-primary: #ffffff;
    --bg-secondary: #fafafa;
    --bg-muted: #e9e9e9;
    --text-sharp: #000000;
    --text-primary: #333333;
    --text-secondary: #555555;
    --text-muted: #888888;
    --border-color: #dfe6e9;
    --accent-color: #0984e3;
    --button-bg: #ffffffea;
    --hover-bg: #f1f1f1;
    --active-bg: #eeeeee;
    --link-color: #005675;

    /* Sidebar light mode default color */
    --sidebar-icon-color: #52525298;
    --sidebar-chevron-color: #52525298;
    --sidebar-label-color: #00000098;
    /* Sidebar light mode active color */
    --sidebar-active-icon-color: #181717;
    --sidebar-active-chevron-color: #181717;
    --sidebar-active-label-color: #181717;
    /* Sidebar light mode hover color */
    --sidebar-hover-icon-color: #181717;
    --sidebar-hover-chevron-color: #181717;
    --sidebar-hover-label-color: #181717;

    /* Theme adaptive variables */
    --card-bg: rgba(255, 255, 255, 0.85);
    --card-border: rgba(0, 0, 0, 0.08);
    --card-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05);
    --card-shadow-hover: 0 12px 40px rgba(9, 132, 227, 0.12);
    --panel-bg: rgba(0, 0, 0, 0.03);
    --panel-border: rgba(0, 0, 0, 0.04);
    --tag-bg: rgba(0, 0, 0, 0.04);
    --tag-border: rgba(0, 0, 0, 0.08);
    --tag-text: #2d3748;
    --code-bg: #f7fafc;
    --code-border: rgba(0, 0, 0, 0.08);
    --input-bg: rgba(255, 255, 255, 0.95);
    --input-border: rgba(0, 0, 0, 0.15);
    --input-text: #1a202c;


    /* background Gradient */
    --bg-gradient-card-theme: linear-gradient(135deg, #00eeff4d 0%, #bc3bf73f 100%);
    --bg-gradient-btn-theme: linear-gradient(135deg, #00eeff 0%, #bc3bf7 100%);
    --bg-gradient-icon-theme: linear-gradient(135deg, #00eeff7e 0%, #bc3bf786 100%);

    /* shadow */
    --shadow-theme: 0 5px 10px rgba(1, 183, 255, 0.103);
    --hover-shadow-theme: 0 7px 15px rgba(1, 183, 255, 0.342);

    /* boder */
    --border-theme: #008cff1c;
    --border-hover-theme: #008cff;

    /* icon */
    --icon-theme: #008cff;
}