sam_oneal/fx_cast
1
0
Fork 0
mirror of https://github.com/hensm/fx_cast.git synced 2026-06-08 08:39:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add color scheme detection to site, default to dark for no-preference

Browse Source
This commit is contained in:
hensm
2019-05-21 19:09:04 +01:00
parent 463e49c7a8
commit 937f5e8dc8
3 changed files with 19 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/index.css
View File

@@ -128,10 +128,10 @@ body {
.download__ext[data-version]::after,
.download__app[data-version]::after {
color: var(--text-color-secondary);
content: attr(data-version);
font-size: 0.75em;
margin-left: 0.5rem;
opacity: 0.75;
}
.download__app-other {
@@ -248,11 +248,6 @@ body {
transform: translate(-22px, -18px);
}
:root.theme-light .preview-dark,
:root.theme-dark .preview--light {
display: none;
}
.faqs {
grid-area: faqs;
@@ -281,6 +276,7 @@ body {
}
.faq__content {
max-width: 70rem;
overflow-x: auto;
padding: 2rem;
padding-top: 1rem;
}

8
docs/index.html
View File

@@ -260,13 +260,7 @@
src="images/preview-bg.png"
srcset="images/preview-bg.png,
images/preview-bg@2x.png 2x">
<img class="preview preview--fg preview--light"
alt="Screenshot preview, foreground"
width="462"
src="images/preview-fg.png"
srcset="images/preview-fg.png,
images/preview-fg@2x.png 2x">
<img class="preview preview--fg preview--dark"
<img class="preview preview--fg"
alt="Screenshot preview, foreground"
width="396"
src="images/preview-fg_macOS.png"

16
docs/index.js
View File

@@ -1,5 +1,21 @@
"use strict";
function updateThemeClass (mediaQuery) {
if (mediaQuery.matches) {
document.documentElement.classList.remove("theme-dark");
document.documentElement.classList.add("theme-light");
} else {
document.documentElement.classList.remove("theme-light");
document.documentElement.classList.add("theme-dark");
}
}
const prefersLightScheme = window.matchMedia("(prefers-color-scheme: light)");
updateThemeClass(prefersLightScheme);
prefersLightScheme.addListener(updateThemeClass);
const downloadAppBtn = document.querySelector(".download__app");
const downloadAppOther = document.querySelector(".download__app-other");
const downloadAppOtherSummary = downloadAppOther.querySelector(":scope > summary");