Skip to content

Commit

Permalink
fix(docs): Readjusted colors for dark theme for OSes in docs
Browse files Browse the repository at this point in the history
Previously the colors of operating systems were the same both for dark
and light color scheme. That's not a major issue, but adjusting the
colors for the dark theme to better match the theme looks like an
improvement.

Colors were just darkened by reversing the lightness of each color taken
from the dark theme.
  • Loading branch information
gbdlin authored May 5, 2021
1 parent 96bd927 commit 8e235a2
Showing 1 changed file with 24 additions and 6 deletions.
30 changes: 24 additions & 6 deletions docs/src/css/codes.css
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,24 @@
* SPDX-License-Identifier: CC-BY-NC-SA-4.0
*/

:root {
--codes-os-fg: black;
--codes-os-windows-bg: #caedfd;
--codes-os-linux-bg: #fff2ca;
--codes-os-android-bg: #d8eed9;
--codes-os-macos-bg: #ececec;
--codes-os-ios-bg: #ffffff;
}

html[data-theme="dark"] {
--codes-os-fg: #f5f6f7;
--codes-os-windows-bg: #032535;
--codes-os-linux-bg: #332600;
--codes-os-android-bg: #112712;
--codes-os-macos-bg: #121212;
--codes-os-ios-bg: #000000;
}

.codes.os.legend {
position: sticky;
z-index: 1;
Expand Down Expand Up @@ -132,7 +150,7 @@ html[data-theme="light"] .codes.os.legend {
}

.codes .os {
color: black;
color: var(--codes-os-fg);
}

.codes td.os {
Expand All @@ -144,23 +162,23 @@ html[data-theme="light"] .codes.os.legend {
}

.codes .os.windows {
background: #caedfd;
background: var(--codes-os-windows-bg);
}

.codes .os.linux {
background: #fff2ca;
background: var(--codes-os-linux-bg);
}

.codes .os.android {
background: #d8eed9;
background: var(--codes-os-android-bg);
}

.codes .os.macos {
background: #ececec;
background: var(--codes-os-macos-bg);
}

.codes .os.ios {
background: #ffffff;
background: var(--codes-os-ios-bg);
}

.codes .footnotes {
Expand Down

0 comments on commit 8e235a2

Please sign in to comment.