jack.orbyt.video
my swift app for VT gyms
gymtracker.jackhannon.net
Update header background color and enhance button styles for dark mode
- Changed header background color to black for both light and dark themes.
- Added styles for buttons in the page header to improve visibility and interaction in dark mode.
- Updated code block styling for better readability and consistency in dark mode, including overflow handling and border adjustments.
+45
-4
+45
-4
assets/css/style.scss
+45
-4
assets/css/style.scss
···
10
10
--vt-burntOrange: #E5751F;
11
11
--page-bg: #ffffff;
12
12
--page-text: #333333;
13
-
--header-bg: #861F41;
13
+
--header-bg: #000000;
14
14
--header-text: #ffffff;
15
15
}
16
16
···
18
18
:root {
19
19
--page-bg: #1a1a1a;
20
20
--page-text: #e0e0e0;
21
-
--header-bg: #1a1a1a;
21
+
--header-bg: #000000;
22
22
--header-text: #e0e0e0;
23
23
}
24
24
}
···
26
26
html.dark-theme {
27
27
--page-bg: #1a1a1a !important;
28
28
--page-text: #e0e0e0 !important;
29
-
--header-bg: #1a1a1a !important;
29
+
--header-bg: #000000 !important;
30
30
--header-text: #e0e0e0 !important;
31
31
}
32
32
···
49
49
opacity: 1;
50
50
}
51
51
52
+
.page-header .btn {
53
+
background-color: transparent !important;
54
+
border-color: #ffffff !important;
55
+
color: #ffffff !important;
56
+
}
57
+
58
+
.page-header .btn:hover {
59
+
background-color: rgba(255, 255, 255, 0.2) !important;
60
+
border-color: #ffffff !important;
61
+
color: #ffffff !important;
62
+
}
63
+
52
64
.main-content {
53
65
color: var(--page-text) !important;
54
66
}
···
89
101
90
102
/* Code block styling when dark mode is active */
91
103
html.dark-theme .main-content code,
92
-
html.dark-theme .main-content pre {
104
+
html.dark-theme .main-content pre,
105
+
html.dark-theme .main-content .highlight,
106
+
html.dark-theme .main-content .highlight pre {
93
107
background-color: #2d2d2d !important;
94
108
color: #e0e0e0 !important;
95
109
border-color: #444 !important;
110
+
border-radius: 0 !important;
111
+
}
112
+
113
+
html.dark-theme .main-content pre,
114
+
html.dark-theme .main-content .highlight pre {
115
+
overflow: hidden;
96
116
}
97
117
98
118
html.dark-theme .main-content pre > code {
99
119
background: transparent !important;
100
120
}
121
+
122
+
@media (prefers-color-scheme: dark) {
123
+
.main-content code,
124
+
.main-content pre,
125
+
.main-content .highlight,
126
+
.main-content .highlight pre {
127
+
background-color: #2d2d2d !important;
128
+
color: #e0e0e0 !important;
129
+
border-color: #444 !important;
130
+
border-radius: 0 !important;
131
+
}
132
+
133
+
.main-content pre,
134
+
.main-content .highlight pre {
135
+
overflow: hidden;
136
+
}
137
+
138
+
.main-content pre > code {
139
+
background: transparent !important;
140
+
}
141
+
}