Difuse/luci
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

luci-theme-bootstrap: add explicit dark/light mode selection

Browse source 
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>
(cherry picked from commit ed86f03a9f)
This commit is contained in:
Jo-Philipp Wich 2021-11-07 11:04:52 +01:00
parent 433816e9bd
commit c14cac4eb9
7 changed files with 55 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap-dark Symbolic link
View file

@ -0,0 +1 @@
bootstrap

1
themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap-light Symbolic link
View file

@ -0,0 +1 @@
bootstrap

22
themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
View file

@ -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

1
themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap-dark Symbolic link
View file

@ -0,0 +1 @@
bootstrap

1
themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap-light Symbolic link
View file

@ -0,0 +1 @@
bootstrap

20
themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm
View file

@ -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" />

28
themes/luci-theme-bootstrap/root/etc/uci-defaults/30_luci-theme-bootstrap
View file

@ -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