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

8
docs/index.html
View File

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

16
docs/index.js
View File

@@ -1,5 +1,21 @@
"use strict"; "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 downloadAppBtn = document.querySelector(".download__app");
const downloadAppOther = document.querySelector(".download__app-other"); const downloadAppOther = document.querySelector(".download__app-other");
const downloadAppOtherSummary = downloadAppOther.querySelector(":scope > summary"); const downloadAppOtherSummary = downloadAppOther.querySelector(":scope > summary");