1/* Button styling (light mode, Bootstrap-friendly) */
2.darkmode-btn {
3    padding: 4px 4px; /* Matches Bootstrap btn padding */
4    background-color: #f5f5f5; /* Bootstrap light gray */
5    border: 1px solid #ccc;
6    border-radius: 4px;
7    cursor: pointer;
8    font-size: 14px;
9    color: #333;
10    display: inline-block; /* Ensures button behaves like Bootstrap */
11    text-align: center;
12}
13
14.darkmode-btn:hover {
15    background-color: #e6e6e6; /* Bootstrap hover effect */
16    text-decoration: none; /* Prevent underline on hover */
17}
18
19/* Dark mode button styling */
20body.dark-mode .darkmode-btn {
21    background-color: #444 !important;
22    color: #fff !important;
23    border-color: #666 !important;
24}
25
26body.dark-mode .darkmode-btn:hover {
27    background-color: #555 !important;
28}
29
30/* Dark mode core styles */
31body.dark-mode {
32    background-color: #1e1e1e !important;
33    color: #ffffff !important;
34}
35
36/* Bootstrap3 template-specific elements */
37body.dark-mode #dokuwiki__site,
38body.dark-mode #dokuwiki__header,
39body.dark-mode #dokuwiki__content,
40body.dark-mode #dokuwiki__footer {
41    background-color: #2d2d2d !important;
42    color: #ffffff !important;
43}
44
45body.dark-mode article {
46    background-color: #2d2d2d !important;
47    color: #ffffff !important;
48}
49
50/* Bootstrap container and layout */
51body.dark-mode .container,
52body.dark-mode .container-fluid {
53    background-color: #2d2d2d !important;
54    color: #ffffff !important;
55}
56
57body.dark-mode .row,
58body.dark-mode [class*="col-"] {
59    background-color: transparent !important; /* Avoid over-darkening nested elements */
60    color: #ffffff !important;
61}
62
63/* Links and text */
64body.dark-mode a,
65body.dark-mode #dokuwiki__content a,
66body.dark-mode article a {
67    color: #66b3ff !important;
68}
69
70body.dark-mode a:hover,
71body.dark-mode #dokuwiki__content a:hover,
72body.dark-mode article a:hover {
73    color: #99c9ff !important; /* Lighter blue on hover */
74}
75
76/* Common text elements */
77body.dark-mode div,
78body.dark-mode p,
79body.dark-mode h1,
80body.dark-mode h2,
81body.dark-mode h3,
82body.dark-mode h4,
83body.dark-mode h5,
84body.dark-mode h6 {
85    color: #ffffff !important;
86}
87
88/* Additional Bootstrap3 elements */
89body.dark-mode .navbar,
90body.dark-mode .navbar-default {
91    background-color: #2d2d2d !important;
92    border-color: #444 !important;
93}
94
95body.dark-mode .navbar-default .navbar-nav > li > a {
96    color: #ffffff !important;
97}
98
99body.dark-mode .navbar-default .navbar-nav > li > a:hover {
100    color: #66b3ff !important;
101}
102
103body.dark-mode .panel,
104body.dark-mode .panel-default {
105    background-color: #2d2d2d !important;
106    border-color: #444 !important;
107}
108
109body.dark-mode .panel-default > .panel-heading {
110    background-color: #444 !important;
111    color: #ffffff !important;
112    border-color: #555 !important;
113}