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 */
20 body.dark-mode .darkmode-btn {
21     background-color: #444 !important;
22     color: #fff !important;
23     border-color: #666 !important;
24 }
25 
26 body.dark-mode .darkmode-btn:hover {
27     background-color: #555 !important;
28 }
29 
30 /* Dark mode core styles */
31 body.dark-mode {
32     background-color: #1e1e1e !important;
33     color: #ffffff !important;
34 }
35 
36 /* Bootstrap3 template-specific elements */
37 body.dark-mode #dokuwiki__site,
38 body.dark-mode #dokuwiki__header,
39 body.dark-mode #dokuwiki__content,
40 body.dark-mode #dokuwiki__footer {
41     background-color: #2d2d2d !important;
42     color: #ffffff !important;
43 }
44 
45 body.dark-mode article {
46     background-color: #2d2d2d !important;
47     color: #ffffff !important;
48 }
49 
50 /* Bootstrap container and layout */
51 body.dark-mode .container,
52 body.dark-mode .container-fluid {
53     background-color: #2d2d2d !important;
54     color: #ffffff !important;
55 }
56 
57 body.dark-mode .row,
58 body.dark-mode [class*="col-"] {
59     background-color: transparent !important; /* Avoid over-darkening nested elements */
60     color: #ffffff !important;
61 }
62 
63 /* Links and text */
64 body.dark-mode a,
65 body.dark-mode #dokuwiki__content a,
66 body.dark-mode article a {
67     color: #66b3ff !important;
68 }
69 
70 body.dark-mode a:hover,
71 body.dark-mode #dokuwiki__content a:hover,
72 body.dark-mode article a:hover {
73     color: #99c9ff !important; /* Lighter blue on hover */
74 }
75 
76 /* Common text elements */
77 body.dark-mode div,
78 body.dark-mode p,
79 body.dark-mode h1,
80 body.dark-mode h2,
81 body.dark-mode h3,
82 body.dark-mode h4,
83 body.dark-mode h5,
84 body.dark-mode h6 {
85     color: #ffffff !important;
86 }
87 
88 /* Additional Bootstrap3 elements */
89 body.dark-mode .navbar,
90 body.dark-mode .navbar-default {
91     background-color: #2d2d2d !important;
92     border-color: #444 !important;
93 }
94 
95 body.dark-mode .navbar-default .navbar-nav > li > a {
96     color: #ffffff !important;
97 }
98 
99 body.dark-mode .navbar-default .navbar-nav > li > a:hover {
100     color: #66b3ff !important;
101 }
102 
103 body.dark-mode .panel,
104 body.dark-mode .panel-default {
105     background-color: #2d2d2d !important;
106     border-color: #444 !important;
107 }
108 
109 body.dark-mode .panel-default > .panel-heading {
110     background-color: #444 !important;
111     color: #ffffff !important;
112     border-color: #555 !important;
113 }