Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Respect user preference for color scheme #1456

Merged
merged 5 commits into from
Nov 16, 2020
Merged

Respect user preference for color scheme #1456

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0af86d7
Respect user preference for color scheme
abhishalya Oct 29, 2020
cd72017
Add attribute to denote primary dark theme
abhishalya Nov 4, 2020
ddc2ce5
Fix selection in theme modal to check for color preference
abhishalya Nov 8, 2020
43db537
Remove typeof while checking for localstorage
abhishalya Nov 12, 2020
50ad05a
Add CHANGELOG
mortenpi Nov 11, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@

* ![Enhancement][badge-enhancement] Documenter now support Azure DevOps Repos URL scheme when generating edit and source links pointing to the repository. ([#1462][github-1462], [#1463][github-1463], [#1471][github-1471])

* ![Enhancement][badge-enhancement] The HTML front end now respects the user's OS-level dark theme preference (determined via the `prefers-color-scheme: dark` media query). ([#1320][github-1320], [#1456][github-1456])

## Version `v0.25.4`

* ![Feature][badge-feature] Documenter can now deploy from Buildkite CI to GitHub Pages with `Documenter.Buildkite`. ([#1469][github-1469])
Expand Down Expand Up @@ -657,6 +659,7 @@
[github-1307]: https://github.com/JuliaDocs/Documenter.jl/pull/1307
[github-1310]: https://github.com/JuliaDocs/Documenter.jl/pull/1310
[github-1315]: https://github.com/JuliaDocs/Documenter.jl/pull/1315
[github-1320]: https://github.com/JuliaDocs/Documenter.jl/issues/1320
[github-1323]: https://github.com/JuliaDocs/Documenter.jl/pull/1323
[github-1328]: https://github.com/JuliaDocs/Documenter.jl/pull/1328
[github-1337]: https://github.com/JuliaDocs/Documenter.jl/issues/1337
Expand Down Expand Up @@ -687,6 +690,7 @@
[github-1448]: https://github.com/JuliaDocs/Documenter.jl/pull/1448
[github-1440]: https://github.com/JuliaDocs/Documenter.jl/pull/1440
[github-1452]: https://github.com/JuliaDocs/Documenter.jl/pull/1452
[github-1456]: https://github.com/JuliaDocs/Documenter.jl/pull/1456
[github-1462]: https://github.com/JuliaDocs/Documenter.jl/issues/1462
[github-1463]: https://github.com/JuliaDocs/Documenter.jl/pull/1463
[github-1466]: https://github.com/JuliaDocs/Documenter.jl/issues/1466
Expand Down
4 changes: 4 additions & 0 deletions assets/html/js/themes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,10 @@ $(document).ready(function() {
$('#documenter-themepicker option').each(function(i,e) {
e.selected = (e.value === theme);
})
} else {
$('#documenter-themepicker option').each(function(i,e) {
e.selected = $("html").hasClass(`theme--${e.value}`);
})
}
}
})
38 changes: 31 additions & 7 deletions assets/html/themeswap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,20 @@
// Small function to quickly swap out themes. Gets put into the <head> tag..
function set_theme_from_local_storage() {
// Browser does not support Web Storage, bail early.
if(typeof(window.localStorage) === "undefined") return;
// Get the user-picked theme from localStorage. May be `null`, which means the default
// theme.
var theme = window.localStorage.getItem("documenter-theme");
// Intialize the theme to null, which means default
var theme = null;
// If the browser supports the localstorage and is not disabled then try to get the
// documenter theme
if(window.localStorage != null) {
// Get the user-picked theme from localStorage. May be `null`, which means the default
// theme.
theme = window.localStorage.getItem("documenter-theme");
}
// Check if the browser supports user color preference
var darkPreference = false;
// Check if the users preference is for dark color scheme
if(window.matchMedia('(prefers-color-scheme: dark)').matches === true) {
darkPreference = true;
}
// Initialize a few variables for the loop:
//
// - active: will contain the index of the theme that should be active. Note that there
Expand All @@ -14,7 +24,7 @@ function set_theme_from_local_storage() {
//
// - disabled: style sheets that should be disabled (i.e. all the theme style sheets
// that are not the currently active theme)
var active = null; var disabled = [];
var active = null; var disabled = []; var darkTheme = null;
for (var i = 0; i < document.styleSheets.length; i++) {
var ss = document.styleSheets[i];
// The <link> tag of each style sheet is expected to have a data-theme-name attribute
Expand All @@ -25,8 +35,12 @@ function set_theme_from_local_storage() {
// To distinguish the default (primary) theme, it needs to have the data-theme-primary
// attribute set.
var isprimary = (ss.ownerNode.getAttribute("data-theme-primary") !== null);
// Check if the theme is primary dark theme
var isDarkTheme = (ss.ownerNode.getAttribute("data-theme-primary-dark") !== null);
// If ss is for dark theme then set the value of darkTheme to the name of the theme
if(isDarkTheme) darkTheme = themename;
// If we find a matching theme (and it's not the default), we'll set active to non-null
if(!isprimary && themename === theme) active = i;
if(themename === theme) active = i;
mortenpi marked this conversation as resolved.
Show resolved Hide resolved
// Store the style sheets of inactive themes so that we could disable them
if(themename !== theme) disabled.push(ss);
}
Expand All @@ -38,5 +52,15 @@ function set_theme_from_local_storage() {
ss.disabled = true;
});
}
else if(darkTheme !== null && darkPreference === true) {
// If we did find an active theme, we'll (1) add the theme--$(theme) class to <html>
document.getElementsByTagName('html')[0].className = "theme--" + darkTheme;
// and (2) disable all the other theme stylesheets
disabled.forEach(function(ss){
if (ss.ownerNode.getAttribute("data-theme-name") !== darkTheme) {
ss.disabled = true;
}
});
}
}
set_theme_from_local_storage();
1 change: 1 addition & 0 deletions src/Writers/HTMLWriter.jl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -856,6 +856,7 @@ function render_head(ctx, navnode)
Symbol("data-theme-name") => theme,
]
(i == 1) && push!(e.attributes, Symbol("data-theme-primary") => "")
(i == 2) && push!(e.attributes, Symbol("data-theme-primary-dark") => "")
return e
end,
script[:src => relhref(src, ctx.themeswap_js)],
Expand Down