html {
    --gray-33: #333333;
    --gray-66: #666666;
    --gray-88: #888888;
    --gray-9e: #9e9e9e;
    --gray-bb: #bbbbbb;
    --gray-ee: #eeeeee;
    --gray-f5: #f5f5f5;
    --gray-fa: #fafafa;

    --bg-color: white;
    --text-color: #3d3d3d;
    --main-color: #1c97f3;
    --warning-color: #ffa400;
    --code-block-bg-color: #282c34;

    --main-width: 1260px;
    --article-width: 860px;
    --left-nav-width: 220px;
    --right-nav-width: 180px;
    --top-header-height: 40px;

    --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Cantarell, Fira Sans, Droid Sans,
        Helvetica Neue, sans-serif;
    --label-font-family: Source Code Pro, DejaVu Sans Mono, Ubuntu Mono, Anonymous Pro, Droid Sans Mono, Menlo, Monaco,
        Consolas, Inconsolata, Courier, monospace, PingFang SC, Microsoft YaHei, sans-serif;
}

html.dark-mode {
    --gray-33: #dddddd;
    --gray-66: #b1b7c2;
    --gray-88: #9fa3ac;
    --gray-9e: #848484;
    --gray-bb: #71747b;
    --gray-ee: #2e333b;
    --gray-f5: #303541;
    --gray-fa: #292e37;

    --text-color: #ccc;
    --bg-color: #282c35;
    --code-block-bg-color: #1b1f25;
}

/* @media (min-width: 1800px) {
    html {
        --main-width: 1400px;
        --article-width: 1000px;
    }
} */