/* mode.css: 通用模式样式 */

/* 默认模式样式 (可以认为是白天模式的基础) */
body.default-mode {
    background-color: #f0f2f5;
    color: #333;
}

body.default-mode #left-sidebar,
body.default-mode #right-sidebar {
    background-color: #e9ecef;
    color: #333;
}

body.default-mode #main-content-header {
    background-color: #f8f9fa;
    color: #212529;
}

body.default-mode #main-footer {
    background-color: #343a40;
    color: #fff;
}

body.default-mode a {
    color: #007bff;
}

body.default-mode .mode-selector button {
    border: 1px solid #007bff;
    background-color: #fff;
    color: #007bff;
}

body.default-mode .mode-selector button.active {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
}

/* 夜晚模式 */
body.night-mode {
    background-color: #282c34; /* 深色背景 */
    color: #abb2bf; /* 浅色文字 */
}

body.night-mode #left-sidebar,
body.night-mode #right-sidebar {
    background-color: #3c4046; /* 边栏更深一点 */
    color: #abb2bf;
    border-color: #4a4e54;
}

body.night-mode #main-content-header {
    background-color: #3a3f45; /* 头部深色 */
    color: #e0e6ec; /* 头部文字浅色 */
    border-color: #4a4e54;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

body.night-mode #main-footer {
    background-color: #1a1e23;
    color: #abb2bf;
}

body.night-mode h1,
body.night-mode h2 {
    color: #61afef; /* 标题颜色 */
}

body.night-mode p {
    color: #abb2bf;
}

body.night-mode a {
    color: #c678dd; /* 链接颜色 */
}

body.night-mode .mode-selector button {
    border: 1px solid #c678dd;
    background-color: #3c4046;
    color: #c678dd;
}

body.night-mode .mode-selector button:hover {
    background-color: #4a4e54;
}

body.night-mode .mode-selector button.active {
    background-color: #c678dd;
    color: #282c34;
    border-color: #c678dd;
}
body.mode-dark .floating-sidebar {
    background-color: rgba(50, 50, 50, 0.85);
}
body.mode-dark .floating-sidebar a {
    color: #ddd;
}
body.mode-dark .floating-sidebar a:hover {
    background-color: #555;
}