diff options
| author | Jo-Philipp Wich <jo@mein.io> | 2021-11-07 13:04:52 +0300 |
|---|---|---|
| committer | Jo-Philipp Wich <jo@mein.io> | 2021-11-07 13:06:33 +0300 |
| commit | ed86f03a9f7c2f58a9111f925bb81303596b394b (patch) | |
| tree | f4f3f9f08c36bb9ce1ec8e50ca371dbf58dcd20a /themes | |
| 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')
7 files changed, 55 insertions, 19 deletions
diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap-dark b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap-dark new file mode 120000 index 0000000000..ac7bcbbf37 --- /dev/null +++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap-dark @@ -0,0 +1 @@ +bootstrap
\ No newline at end of file diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap-light b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap-light new file mode 120000 index 0000000000..ac7bcbbf37 --- /dev/null +++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap-light @@ -0,0 +1 @@ +bootstrap
\ No newline at end of file diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css index 4063a39fac..615ce80ea9 100644 --- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css +++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css @@ -70,18 +70,16 @@ color-scheme: light dark; } -@media (prefers-color-scheme: dark) { - :root { - --background-color-delta-l-sign: 1; - --background-color-high-h: 0; - --background-color-high-s: 0%; - --background-color-high-l: calc(34 / 255 * 100%); - --text-color-delta-l-sign: -1; - --text-color-highest-h: 0; - --text-color-highest-s: 0%; - --text-color-highest-l: 100%; - --border-color-delta-l-sign: 1; - } +:root[data-darkmode="true"] { + --background-color-delta-l-sign: 1; + --background-color-high-h: 0; + --background-color-high-s: 0%; + --background-color-high-l: calc(34 / 255 * 100%); + --text-color-delta-l-sign: -1; + --text-color-highest-h: 0; + --text-color-highest-s: 0%; + --text-color-highest-l: 100%; + --border-color-delta-l-sign: 1; } /* Reset.less 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" /> diff --git a/themes/luci-theme-bootstrap/root/etc/uci-defaults/30_luci-theme-bootstrap b/themes/luci-theme-bootstrap/root/etc/uci-defaults/30_luci-theme-bootstrap index 4381a15c2e..b66e5b2be3 100755 --- a/themes/luci-theme-bootstrap/root/etc/uci-defaults/30_luci-theme-bootstrap +++ b/themes/luci-theme-bootstrap/root/etc/uci-defaults/30_luci-theme-bootstrap @@ -1,12 +1,28 @@ #!/bin/sh +changed=0 + +set_opt() { + local key=$1 + local val=$2 + + if ! uci -q get "luci.themes.$key" 2>/dev/null; then + uci set "luci.themes.$key=$val" + changed=1 + fi +} + +set_opt Bootstrap /luci-static/bootstrap +set_opt BootstrapDark /luci-static/bootstrap-dark +set_opt BootstrapLight /luci-static/bootstrap-light + if [ "$PKG_UPGRADE" != 1 ]; then - uci get luci.themes.Bootstrap >/dev/null 2>&1 || \ - uci batch <<-EOF - set luci.themes.Bootstrap=/luci-static/bootstrap - set luci.main.mediaurlbase=/luci-static/bootstrap - commit luci - EOF + uci set luci.main.mediaurlbase=/luci-static/bootstrap + changed=1 +fi + +if [ $changed = 1 ]; then + uci commit luci fi exit 0 |