diff options
| author | Jo-Philipp Wich <jo@mein.io> | 2021-11-07 11:04:52 +0100 |
|---|---|---|
| committer | Jo-Philipp Wich <jo@mein.io> | 2021-11-07 11:06:33 +0100 |
| commit | ed86f03a9f7c2f58a9111f925bb81303596b394b (patch) | |
| tree | f4f3f9f08c36bb9ce1ec8e50ca371dbf58dcd20a /themes/luci-theme-bootstrap/luasrc/view | |
| parent | cd6ad0a242a580fe006e7813c1904fe334299f9a (diff) | |
luci-theme-bootstrap: add explicit dark/light mode selection
Register two further "virtual" themes called BootstrapDark and
BootstrapLight which force dark and light mode respectively.
The actual Bootstrap theme itself will continue to auto-select
dark mode preference based on OS/Browser preference settings.
Fixes: #5492
Signed-off-by: Jo-Philipp Wich <jo@mein.io>
Diffstat (limited to 'themes/luci-theme-bootstrap/luasrc/view')
3 files changed, 21 insertions, 1 deletions
diff --git a/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap-dark b/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap-dark new file mode 120000 index 0000000000..ac7bcbbf37 --- /dev/null +++ b/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap-dark @@ -0,0 +1 @@ +bootstrap
\ No newline at end of file diff --git a/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap-light b/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap-light new file mode 120000 index 0000000000..ac7bcbbf37 --- /dev/null +++ b/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap-light @@ -0,0 +1 @@ +bootstrap
\ No newline at end of file diff --git a/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm b/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm index 6e4861fe0b..a3f28fd709 100644 --- a/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm +++ b/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm @@ -15,14 +15,32 @@ local node = disp.context.dispatched + local darkpref + + if theme == "bootstrap-dark" then + darkpref = "true" + elseif theme == "bootstrap-light" then + darkpref = "false" + end + -- send as HTML5 http.prepare_content("text/html") -%> <!DOCTYPE html> -<html lang="<%=luci.i18n.context.lang%>"> +<html lang="<%=luci.i18n.context.lang%>"<%= ifattr(darkpref ~= nil, "data-darkmode", darkpref) %>> <head> <meta charset="utf-8"> <title><%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI</title> + <% if darkpref == nil then %> + <script type="text/javascript"> + var mediaQuery = window.matchMedia('(prefers-color-scheme: dark)'), + rootElement = document.querySelector(':root'), + setDarkMode = function(match) { rootElement.setAttribute('data-darkmode', match.matches) }; + + mediaQuery.addEventListener('change', setDarkMode); + setDarkMode(mediaQuery); + </script> + <% end %> <meta name="viewport" content="initial-scale=1.0"> <link rel="stylesheet" href="<%=media%>/cascade.css"> <link rel="stylesheet" media="only screen and (max-device-width: 854px)" href="<%=media%>/mobile.css" type="text/css" /> |