/* 当 body 元素拥有 .dark-mode 类时，这些样式就会生效 */

body.dark-mode {
    background-color: #121212; /* 深邃的炭黑色背景 */
    color: #e0e0e0; /* 柔和的浅灰色文字 */
}

body.dark-mode main#chapter-content {
    background-color: #1e1e1e; /* 内容区域使用稍亮一点的深灰色 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); /* 阴影也要更明显一些 */
}

/* 调整标题和链接在夜间模式下的颜色 */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3 {
    color: #ffffff;
}

body.dark-mode a {
    color: #bb86fc; /* 使用一种柔和的紫色作为链接颜色 */
}

body.dark-mode a[href="index.html"] {
    color: #bb86fc;
}

/* 夜间模式下的按钮样式 */
body.dark-mode nav button {
    background-color: #bb86fc;
    color: #121212; /* 深色文字 */
}

body.dark-mode nav button:hover {
    background-color: #a275d4;
}

body.dark-mode nav button:disabled {
    background-color: #444444;
    color: #888888;
}

/* ===================================== */
/* == 代码块的夜间模式样式 == */
/* ===================================== */

body.dark-mode code {
    background-color: #343a40; /* 一个与背景有微妙区别的深灰色 */
    color: #ced4da;           /* 一个清晰柔和的浅灰色文字 */
    border: 1px solid #495057; /* (可选) 添加一个边框让它更突出 */
}

/* Night mode for the sidebar */
body.dark-mode .sidebar-nav {
    background-color: #1e1e1e;
    border-right-color: #444;
}
body.dark-mode .sidebar-toggle-btn {
    background: #333;
    border-color: #555;
}
body.dark-mode .sidebar-toggle-btn span {
    background: #eee;
}

/* 夜间模式下的块引用 */
body.dark-mode blockquote {
    border-left-color: #495057; /* 使用一个更深的灰色作为边框 */
    background-color: #212529; /* 一个与内容区背景有区别的深色 */
    color: #adb5bd;             /* 柔和的浅灰色文字 */
}