Skip to content

Commit c6030e2

Browse files
committed
Fix WebAudio#2257: Make channel ordering table visible in dark mode (WebAudio#2264)
When using dark mode, use a different background color for the even rows of the channel ordering table so that the entries are visible. While we're at it, make the headings for the audio node properties table, the audio param values table, and the enumeration description table look a little better in dark mode. This is done by specifying a brighter green to make it a bit more legible.
1 parent 3ed4110 commit c6030e2

File tree

1 file changed

+21
-3
lines changed

1 file changed

+21
-3
lines changed

index.bs

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,16 @@ window.addEventListener("DOMContentLoaded", function () {
9393
});
9494
</script>
9595
<style>
96+
@media (prefers-color-scheme: light) {
97+
:root {
98+
--div-info-fg-color: #178217;
99+
}
100+
}
101+
@media (prefers-color-scheme: dark) {
102+
:root {
103+
--div-info-fg-color: springgreen;
104+
}
105+
}
96106
.todo {
97107
border: 1px solid red;
98108
background-color: rgba(255, 0, 0, 0.3);
@@ -127,12 +137,20 @@ table.channels td {
127137
width:60px;
128138
text-align:center;
129139
}
140+
@media (prefers-color-scheme: light) {
130141
table.channels tr:nth-child(even) {
131142
background: #EEE;
132143
}
133144
table.channels tr:nth-child(odd) {
134145
background: #FFF;
135146
}
147+
}
148+
@media (prefers-color-scheme: dark) {
149+
table.channels tr:nth-child(even) {
150+
background: var(--assertion-border)
151+
}
152+
}
153+
136154
div.node-info {
137155
padding-left: 4em;
138156
padding-right: 4em;
@@ -153,8 +171,8 @@ div.node-info > table > tbody > tr > td {
153171
div.node-info > table > thead > tr > th {
154172
line-height: 2em;
155173
font-weight: 600;
156-
color: #178217;
157174
border-bottom: 1px solid #707070;
175+
color: var(--div-info-fg-color);
158176
}
159177
div.audioparam-info {
160178
padding-left: 4em;
@@ -176,8 +194,8 @@ div.audioparam-info > table > tbody > tr > td {
176194
div.audioparam-info > table > thead > tr > th {
177195
line-height: 2em;
178196
font-weight: 600;
179-
color: #178217;
180197
border-bottom: 1px solid #707070;
198+
color: var(--div-info-fg-color);
181199
}
182200
div.enum-description > table {
183201
border-collapse: collapse;
@@ -195,7 +213,7 @@ div.enum-description > table > tbody > tr > td {
195213
div.enum-description > table > thead > tr > th {
196214
line-height: 2em;
197215
font-weight: 600;
198-
color: #178217;
216+
color: var(--div-info-fg-color);
199217
border-bottom: 1px solid #707070;
200218
}
201219
code.nobreak {

0 commit comments

Comments
 (0)