/*
* 🌄 远山十二色 - 语文湿地主题系统
* 支持12套配色，一键切换全局变色
*
* 使用方法：
* 1. 在 中引入：
* 2. 在 前引入：
* 3. 在页面合适位置放置主题切换按钮
*/
/* ========================================
0. 湿地翠（默认主题）
======================================== */
:root {
/* 主色系统 */
--wetland-primary: #2d8659;
--wetland-primary-dark: #1a5f3d;
--wetland-primary-light: #4aa876;
--wetland-primary-rgb: 45, 134, 89;
/* 派生颜色 */
--wetland-bg: #f8fdf9;
--wetland-border: #d4ede0;
--wetland-text: #1a3d2c;
--wetland-text-dark: #333;
--wetland-text-muted: #666;
/* Bootstrap 兼容变量 */
--bs-primary: #2d8659;
--bs-primary-rgb: 45, 134, 89;
--bs-link-color: #2d8659;
--bs-link-hover-color: #1a5f3d;
}
/* ========================================
1. 缥青
======================================== */
:root.theme-piaoqing {
--wetland-primary: #87ceeb;
--wetland-primary-dark: #5ba8c9;
--wetland-primary-light: #b8e0f5;
--wetland-primary-rgb: 135, 206, 235;
--wetland-bg: #f5faff;
--wetland-border: #d4e8f5;
--wetland-text: #2c4a5c;
--wetland-text-dark: #333;
--wetland-text-muted: #666;
--bs-primary: #87ceeb;
--bs-primary-rgb: 135, 206, 235;
--bs-link-color: #87ceeb;
--bs-link-hover-color: #5ba8c9;
}
/* ========================================
2. 烟紫
======================================== */
:root.theme-yanzi {
--wetland-primary: #9b7bb8;
--wetland-primary-dark: #7a5c94;
--wetland-primary-light: #bc9ed4;
--wetland-primary-rgb: 155, 123, 184;
--wetland-bg: #faf5ff;
--wetland-border: #e8dff5;
--wetland-text: #4a3b5c;
--wetland-text-dark: #333;
--wetland-text-muted: #666;
--bs-primary: #9b7bb8;
--bs-primary-rgb: 155, 123, 184;
--bs-link-color: #9b7bb8;
--bs-link-hover-color: #7a5c94;
}
/* ========================================
3. 螺青
======================================== */
:root.theme-luoqing {
--wetland-primary: #3d7a6f;
--wetland-primary-dark: #2a5c52;
--wetland-primary-light: #5a9c90;
--wetland-primary-rgb: 61, 122, 111;
--wetland-bg: #f0f8f6;
--wetland-border: #c8e6e0;
--wetland-text: #1a3d37;
--wetland-text-dark: #333;
--wetland-text-muted: #666;
--bs-primary: #3d7a6f;
--bs-primary-rgb: 61, 122, 111;
--bs-link-color: #3d7a6f;
--bs-link-hover-color: #2a5c52;
}
/* ========================================
4. 翠微
======================================== */
:root.theme-cuiwei {
--wetland-primary: #7cb342;
--wetland-primary-dark: #5a8f2e;
--wetland-primary-light: #9ed06a;
--wetland-primary-rgb: 124, 179, 66;
--wetland-bg: #f8fff0;
--wetland-border: #dcedc8;
--wetland-text: #3d5c1a;
--wetland-text-dark: #333;
--wetland-text-muted: #666;
--bs-primary: #7cb342;
--bs-primary-rgb: 124, 179, 66;
--bs-link-color: #7cb342;
--bs-link-hover-color: #5a8f2e;
}
/* ========================================
5. 郁蓝
======================================== */
:root.theme-yulan {
--wetland-primary: #3f51b5;
--wetland-primary-dark: #283593;
--wetland-primary-light: #6573c3;
--wetland-primary-rgb: 63, 81, 181;
--wetland-bg: #f5f7ff;
--wetland-border: #c8cfe8;
--wetland-text: #1a2340;
--wetland-text-dark: #333;
--wetland-text-muted: #666;
--bs-primary: #3f51b5;
--bs-primary-rgb: 63, 81, 181;
--bs-link-color: #3f51b5;
--bs-link-hover-color: #283593;
}
/* ========================================
6. 碧障
======================================== */
:root.theme-bizhang {
--wetland-primary: #009688;
--wetland-primary-dark: #00796b;
--wetland-primary-light: #4db6ac;
--wetland-primary-rgb: 0, 150, 136;
--wetland-bg: #e0f2f1;
--wetland-border: #b2dfdb;
--wetland-text: #004d40;
--wetland-text-dark: #333;
--wetland-text-muted: #666;
--bs-primary: #009688;
--bs-primary-rgb: 0, 150, 136;
--bs-link-color: #009688;
--bs-link-hover-color: #00796b;
}
/* ========================================
7. 赭霞
======================================== */
:root.theme-zhexia {
--wetland-primary: #e64a19;
--wetland-primary-dark: #bf360c;
--wetland-primary-light: #ff7043;
--wetland-primary-rgb: 230, 74, 25;
--wetland-bg: #fff3e0;
--wetland-border: #ffccbc;
--wetland-text: #5d1a0c;
--wetland-text-dark: #333;
--wetland-text-muted: #666;
--bs-primary: #e64a19;
--bs-primary-rgb: 230, 74, 25;
--bs-link-color: #e64a19;
--bs-link-hover-color: #bf360c;
}
/* ========================================
8. 玄岫
======================================== */
:root.theme-xuanxiu {
--wetland-primary: #37474f;
--wetland-primary-dark: #263238;
--wetland-primary-light: #546e7a;
--wetland-primary-rgb: 55, 71, 79;
--wetland-bg: #eceff1;
--wetland-border: #cfd8dc;
--wetland-text: #263238;
--wetland-text-dark: #333;
--wetland-text-muted: #666;
--bs-primary: #37474f;
--bs-primary-rgb: 55, 71, 79;
--bs-link-color: #37474f;
--bs-link-hover-color: #263238;
}
/* ========================================
9. 丹渥
======================================== */
:root.theme-danwo {
--wetland-primary: #c62828;
--wetland-primary-dark: #8e0000;
--wetland-primary-light: #ef5350;
--wetland-primary-rgb: 198, 40, 40;
--wetland-bg: #ffebee;
--wetland-border: #ffcdd2;
--wetland-text: #5d0000;
--wetland-text-dark: #333;
--wetland-text-muted: #666;
--bs-primary: #c62828;
--bs-primary-rgb: 198, 40, 40;
--bs-link-color: #c62828;
--bs-link-hover-color: #8e0000;
}
/* ========================================
10. 苍霭
======================================== */
:root.theme-cangai {
--wetland-primary: #607d8b;
--wetland-primary-dark: #455a64;
--wetland-primary-light: #90a4ae;
--wetland-primary-rgb: 96, 125, 139;
--wetland-bg: #f5f7f8;
--wetland-border: #cfd8dc;
--wetland-text: #263238;
--wetland-text-dark: #333;
--wetland-text-muted: #666;
--bs-primary: #607d8b;
--bs-primary-rgb: 96, 125, 139;
--bs-link-color: #607d8b;
--bs-link-hover-color: #455a64;
}
/* ========================================
11. 黛色
======================================== */
:root.theme-daice {
--wetland-primary: #2c3e50;
--wetland-primary-dark: #1a252f;
--wetland-primary-light: #4a6572;
--wetland-primary-rgb: 44, 62, 80;
--wetland-bg: #f8f9fa;
--wetland-border: #d0d3d4;
--wetland-text: #1a252f;
--wetland-text-dark: #333;
--wetland-text-muted: #666;
--bs-primary: #2c3e50;
--bs-primary-rgb: 44, 62, 80;
--bs-link-color: #2c3e50;
--bs-link-hover-color: #1a252f;
}
/* ========================================
🎨 主题切换器样式
======================================== */
.theme-switcher {
position: fixed;
bottom: 15rem;
right: 1rem;
z-index: 999;
opacity: 0.6;
transition: opacity 0.2s;
}
.theme-switcher:hover {
opacity: 1;
}
.theme-btn {
width: 36px;
height: 36px;
border-radius: 50%;
border: 3px solid white;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
cursor: pointer;
transition: all 0.3s;
}
.theme-btn:hover {
transform: scale(1.1);
}
.theme-dropdown {
display: none;
position: absolute;
top: 50px;
right: 0;
background: white;
border-radius: 1rem;
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
padding: 1rem;
width: 280px;
}
.theme-dropdown.show {
display: block;
}
.theme-title {
font-size: 0.9rem;
font-weight: 600;
color: #333;
margin-bottom: 0.75rem;
text-align: center;
}
.theme-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.75rem;
}
.theme-option {
width: 100%;
aspect-ratio: 1;
border-radius: 0.5rem;
cursor: pointer;
transition: all 0.2s;
border: 2px solid transparent;
position: relative;
}
.theme-option:hover {
transform: scale(1.05);
}
.theme-option.active {
border-color: #333;
}
.theme-option::after {
content: attr(data-name);
position: absolute;
bottom: -1rem;
left: 50%;
transform: translateX(-50%);
font-size: 0.7rem;
color: #666;
white-space: nowrap;
}
/* ========================================
📄 页脚内嵌版本样式
======================================== */
.footer-theme-section {
padding: 1.5rem 0;
border-top: 1px solid var(--wetland-border);
margin-top: 2rem;
}
.theme-switcher-footer {
display: flex;
align-items: center;
gap: 1rem;
}
.theme-switcher-footer .theme-btn {
width: 40px;
height: 40px;
border-radius: 50%;
border: 3px solid white;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
cursor: pointer;
transition: all 0.3s;
flex-shrink: 0;
}
.theme-switcher-footer .theme-btn:hover {
transform: scale(1.1);
}
.theme-switcher-footer .theme-dropdown {
display: none;
}
.theme-switcher-footer .theme-dropdown.show {
display: block;
position: absolute;
bottom: 100%;
left: 0;
background: white;
border-radius: 1rem;
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
padding: 1rem;
width: 280px;
z-index: 1000;
margin-bottom: 0.5rem;
}