-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Enable resetting HTML colour scheme preferences
Co-authored-by: Adam Turner <[email protected]> Co-authored-by: CAM Gerlach <[email protected]>
- Loading branch information
1 parent
fa18fff
commit ebff37d
Showing
6 changed files
with
122 additions
and
69 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,36 +1,31 @@ | ||
const dark = document.getElementById("css-dark"); | ||
const pygmentsNormal = document.getElementById("pyg"); | ||
const pygmentsDark = document.getElementById("pyg-dark"); | ||
|
||
const makeLight = () => { | ||
dark.disabled = pygmentsDark.disabled = true | ||
dark.media = pygmentsNormal.media = pygmentsDark.media = "" | ||
pygmentsNormal.disabled = false | ||
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)") | ||
|
||
const getColourScheme = () => document.documentElement.dataset.colour_scheme | ||
const setColourScheme = (colourScheme = getColourScheme()) => { | ||
document.documentElement.dataset.colour_scheme = colourScheme | ||
localStorage.setItem("colour_scheme", colourScheme) | ||
setPygments(colourScheme) | ||
} | ||
|
||
const makeDark = () => { | ||
dark.disabled = pygmentsDark.disabled = false | ||
dark.media = pygmentsNormal.media = pygmentsDark.media = "" | ||
pygmentsNormal.disabled = true | ||
// Map system theme to a cycle of steps | ||
const cycles = { | ||
dark: ["auto", "light", "dark"], // auto (dark) → light → dark | ||
light: ["auto", "dark", "light"], // auto (light) → dark → light | ||
} | ||
|
||
const nextColourScheme = (colourScheme = getColourScheme()) => { | ||
const cycle = cycles[prefersDark.matches ? "dark" : "light"] | ||
return cycle[(cycle.indexOf(colourScheme) + 1) % cycle.length] | ||
} | ||
|
||
const toggleColourScheme = () => { | ||
const colourScheme = localStorage.getItem("colour_scheme") | ||
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches | ||
|
||
if ((colourScheme === "dark") || (!colourScheme && prefersDark)) { | ||
makeLight() | ||
localStorage.setItem("colour_scheme", "light") | ||
} else { | ||
makeDark() | ||
localStorage.setItem("colour_scheme", "dark") | ||
} | ||
const setPygments = (colourScheme = getColourScheme()) => { | ||
const pygmentsDark = document.getElementById("pyg-dark") | ||
const pygmentsLight = document.getElementById("pyg-light") | ||
pygmentsDark.disabled = colourScheme === "light" | ||
pygmentsLight.disabled = colourScheme === "dark" | ||
pygmentsDark.media = colourScheme === "auto" ? "(prefers-color-scheme: dark)" : "" | ||
pygmentsLight.media = colourScheme === "auto" ? "(prefers-color-scheme: light)" : "" | ||
} | ||
|
||
/* set colour scheme from local storage */ | ||
document.addEventListener("DOMContentLoaded", () => { | ||
if (localStorage.getItem("colour_scheme") === "light") makeLight() | ||
if (localStorage.getItem("colour_scheme") === "dark") makeDark() | ||
}) | ||
// Update Pygments state (the page theme is initialised inline, see page.html) | ||
document.addEventListener("DOMContentLoaded", () => setColourScheme()) |
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
34 changes: 34 additions & 0 deletions
34
pep_sphinx_extensions/pep_theme/templates/partials/icons.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
{# Adapted from Just the Docs → Furo #} | ||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> | ||
<symbol id="svg-sun-half" viewBox="0 0 24 24" pointer-events="all"> | ||
<title>Following system colour scheme</title> | ||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" | ||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | ||
<circle cx="12" cy="12" r="9"></circle> | ||
<path d="M12 3v18m0-12l4.65-4.65M12 14.3l7.37-7.37M12 19.6l8.85-8.85"></path> | ||
</svg> | ||
</symbol> | ||
<symbol id="svg-moon" viewBox="0 0 24 24" pointer-events="all"> | ||
<title>Selected dark colour scheme</title> | ||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" | ||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | ||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path> | ||
<path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"></path> | ||
</svg> | ||
</symbol> | ||
<symbol id="svg-sun" viewBox="0 0 24 24" pointer-events="all"> | ||
<title>Selected light colour scheme</title> | ||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" | ||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | ||
<circle cx="12" cy="12" r="5"></circle> | ||
<line x1="12" y1="1" x2="12" y2="3"></line> | ||
<line x1="12" y1="21" x2="12" y2="23"></line> | ||
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line> | ||
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line> | ||
<line x1="1" y1="12" x2="3" y2="12"></line> | ||
<line x1="21" y1="12" x2="23" y2="12"></line> | ||
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line> | ||
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line> | ||
</svg> | ||
</symbol> | ||
</svg> |