/** * 多種主題風格 CSS * 透過切換 body 的 data-theme 屬性來更改網站風格 * 例如：可啟用海洋藍主題 */ /* 默認主題 (青綠色) */ :root { /* 主色系 */ --primary-color: #15a9a9; --primary-color-rgb: 21, 169, 169; --primary-color-light: rgba(21, 169, 169, 0.1); --primary-color-dark: #127676; --primary-gradient: linear-gradient(45deg, #15a9a9, #1ccfcf); --header-gradient: linear-gradient(135deg, #15a9a9 0%, #0e7676 100%); /* 輔助色系 */ --secondary-color: #6c757d; --accent-color: #20c997; --background-light: #f8f9fa; --text-color: #343a40; --border-color: #dee2e6; --hover-color: #127676; /* 新聞顏色 */ --news-color: #D18D96; --news-color2: #986783; } /* 海洋藍色主題 */ [data-theme="ocean"] { --primary-color: #0d6efd; --primary-color-rgb: 13, 110, 253; --primary-color-light: rgba(13, 110, 253, 0.1); --primary-color-dark: #0b5ed7; --primary-gradient: linear-gradient(45deg, #0d6efd, #47a0ff); --header-gradient: linear-gradient(135deg, #0d6efd 0%, #0a47a8 100%); --secondary-color: #6c757d; --accent-color: #0dcaf0; --background-light: #edf6ff; --text-color: #0a3a6d; --border-color: #c3dafe; --hover-color: #0b5ed7; --news-color: #6ea8fe; --news-color2: #3d8bfd; } /* 紫羅蘭主題 */ [data-theme="purple"] { --primary-color: #6f42c1; --primary-color-rgb: 111, 66, 193; --primary-color-light: rgba(111, 66, 193, 0.1); --primary-color-dark: #5a2da4; --primary-gradient: linear-gradient(45deg, #6f42c1, #9a55ff); --header-gradient: linear-gradient(135deg, #6f42c1 0%, #4e2d88 100%); --secondary-color: #6c757d; --accent-color: #e83e8c; --background-light: #f8f9fa; --text-color: #343a40; --border-color: #dee2e6; --hover-color: #5a35a0; --news-color: #a98eda; --news-color2: #8c68cf; --theme-purple: #6f42c1; } /* 熾熾紅主題 */ [data-theme="ruby"] { --primary-color: #dc3545; --primary-color-rgb: 220, 53, 69; --primary-color-light: rgba(220, 53, 69, 0.1); --primary-color-dark: #bb2d3b; --primary-gradient: linear-gradient(45deg, #dc3545, #ff6b7d); --header-gradient: linear-gradient(135deg, #dc3545 0%, #a71d2a 100%); --secondary-color: #6c757d; --accent-color: #fd7e14; --background-light: #fff5f5; --text-color: #7a0916; --border-color: #f5c2c7; --hover-color: #bb2d3b; --news-color: #ea868f; --news-color2: #e35d6a; } /* 橙金主題 */ [data-theme="amber"] { --primary-color: #fd7e14; --primary-color-rgb: 253, 126, 20; --primary-color-light: rgba(253, 126, 20, 0.1); --primary-color-dark: #e26c0f; --primary-gradient: linear-gradient(45deg, #fd7e14, #ffb84d); --header-gradient: linear-gradient(135deg, #fd7e14 0%, #c35a06 100%); --secondary-color: #6c757d; --accent-color: #ffc107; --background-light: #fff9e6; --text-color: #7f4200; --border-color: #ffe5bc; --hover-color: #e26c0f; --news-color: #feb272; --news-color2: #fd9843; } /* 森林綠色主題 */ [data-theme="forest"] { --primary-color: #198754; --primary-color-rgb: 25, 135, 84; --primary-color-light: rgba(25, 135, 84, 0.1); --primary-color-dark: #157347; --primary-gradient: linear-gradient(45deg, #198754, #20c997); --header-gradient: linear-gradient(135deg, #198754 0%, #0f5132 100%); --secondary-color: #6c757d; --accent-color: #20c997; --background-light: #f0f9f2; --text-color: #0a3622; --border-color: #c3e6cb; --hover-color: #157347; --news-color: #6dc991; --news-color2: #41b574; } /* 陸光黃主題 */ [data-theme="sunshine"] { --primary-color: #cc9500; --primary-color-rgb: 204, 149, 0; --primary-color-light: rgba(204, 149, 0, 0.1); --primary-color-dark: #996f00; --primary-gradient: linear-gradient(45deg, #cc9500, #e6ad00); --header-gradient: linear-gradient(135deg, #cc9500 0%, #805c00 100%); --secondary-color: #6c757d; --accent-color: #cc6b00; --background-light: #fff6d9; --text-color: #4d3900; --border-color: #e6ad00; --hover-color: #996f00; --news-color: #e6ad00; --news-color2: #cc9500; } /* 木質棕色主題 */ [data-theme="wood"] { --primary-color: #795548; --primary-color-rgb: 121, 85, 72; --primary-color-light: rgba(121, 85, 72, 0.1); --primary-color-dark: #5d4037; --primary-gradient: linear-gradient(45deg, #795548, #a1887f); --header-gradient: linear-gradient(135deg, #795548 0%, #4b2c20 100%); --secondary-color: #6c757d; --accent-color: #ff9800; --background-light: #f8f5f4; --text-color: #3e2723; --border-color: #d7ccc8; --hover-color: #5d4037; --news-color: #a98274; --news-color2: #8d6e63; } /* 浅粉主題 */ [data-theme="sakura"] { --primary-color: #d63384; --primary-color-rgb: 214, 51, 132; --primary-color-light: rgba(214, 51, 132, 0.1); --primary-color-dark: #ab296a; --primary-gradient: linear-gradient(45deg, #d63384, #e685b5); --header-gradient: linear-gradient(135deg, #d63384 0%, #9e1f64 100%); --secondary-color: #6c757d; --accent-color: #e83e8c; --background-light: #fdf2f8; --text-color: #691943; --border-color: #f7cfe2; --hover-color: #ab296a; --news-color: #e685b5; --news-color2: #de5c9d; } /* 玄黑深邃主題 */ [data-theme="dark"] { --primary-color: #212529; --primary-color-rgb: 33, 37, 41; --primary-color-light: rgba(33, 37, 41, 0.1); --primary-color-dark: #1a1e21; --primary-gradient: linear-gradient(45deg, #212529, #495057); --header-gradient: linear-gradient(135deg, #212529 0%, #000000 100%); --secondary-color: #6c757d; --accent-color: #0dcaf0; --background-light: #343a40; --text-color: #f8f9fa; --border-color: #495057; --hover-color: #1a1e21; --news-color: #6c757d; --news-color2: #495057; --dark-color: #212529; --light-color: #f8f9fa; } /* 企業主題 (商務風格) */ [data-theme="corporate"] { --primary-color: #0061b5; --primary-color-rgb: 0, 97, 181; --primary-color-light: rgba(0, 97, 181, 0.1); --primary-color-dark: #004e92; --primary-gradient: linear-gradient(45deg, #0061b5, #3d8af7); --header-gradient: linear-gradient(135deg, #0061b5 0%, #003b6d 100%); --secondary-color: #6c757d; --accent-color: #0dcaf0; --background-light: #f0f7ff; --text-color: #00326c; --border-color: #b6d4ff; --hover-color: #004e92; --news-color: #4790da; --news-color2: #2377c2; } /* 時尚主題 */ [data-theme="fashion"] { --primary-color: #9c27b0; --primary-color-rgb: 156, 39, 176; --primary-color-light: rgba(156, 39, 176, 0.1); --primary-color-dark: #7b1fa2; --primary-gradient: linear-gradient(45deg, #9c27b0, #ea80fc); --header-gradient: linear-gradient(135deg, #9c27b0 0%, #6a1b9a 100%); --secondary-color: #6c757d; --accent-color: #e83e8c; --background-light: #f3e5f5; --text-color: #4a148c; --border-color: #e1bee7; --hover-color: #7b1fa2; --news-color: #ce93d8; --news-color2: #ba68c8; } /* 溫暖玫瑰金主題 */ [data-theme="rosegold"] { --primary-color: #bd8c7d; --primary-color-rgb: 189, 140, 125; --primary-color-light: rgba(189, 140, 125, 0.1); --primary-color-dark: #a17566; --primary-gradient: linear-gradient(45deg, #bd8c7d, #f9c6bc); --header-gradient: linear-gradient(135deg, #bd8c7d 0%, #805a4c 100%); --secondary-color: #6c757d; --accent-color: #e9c4a8; --background-light: #fdf6f4; --text-color: #5f4742; --border-color: #f0d9d2; --hover-color: #a17566; --news-color: #e0b6a9; --news-color2: #d19a8a; } /* 深海藍綠色主題 */ [data-theme="teal"] { --primary-color: #20c997; --primary-color-rgb: 32, 201, 151; --primary-color-light: rgba(32, 201, 151, 0.1); --primary-color-dark: #19a37f; --primary-gradient: linear-gradient(45deg, #20c997, #4debbc); --header-gradient: linear-gradient(135deg, #20c997 0%, #138766 100%); --secondary-color: #6c757d; --accent-color: #0dcaf0; --background-light: #f0fdf8; --text-color: #0f5c44; --border-color: #c3f0e3; --hover-color: #19a37f; --news-color: #6fe0c1; --news-color2: #3ed6ad; }