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>
This commit is contained in:
Jo-Philipp Wich 2021-11-07 11:04:52 +01:00
parent cd6ad0a242
commit ed86f03a9f
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

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

@ -70,8 +70,7 @@
color-scheme: light dark; color-scheme: light dark;
} }
@media (prefers-color-scheme: dark) { :root[data-darkmode="true"] {
:root {
--background-color-delta-l-sign: 1; --background-color-delta-l-sign: 1;
--background-color-high-h: 0; --background-color-high-h: 0;
--background-color-high-s: 0%; --background-color-high-s: 0%;
@ -82,7 +81,6 @@
--text-color-highest-l: 100%; --text-color-highest-l: 100%;
--border-color-delta-l-sign: 1; --border-color-delta-l-sign: 1;
} }
}
/* Reset.less /* Reset.less
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc). * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).

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 node = disp.context.dispatched
local darkpref
if theme == "bootstrap-dark" then
darkpref = "true"
elseif theme == "bootstrap-light" then
darkpref = "false"
end
-- send as HTML5 -- send as HTML5
http.prepare_content("text/html") http.prepare_content("text/html")
-%> -%>
<!DOCTYPE html> <!DOCTYPE html>
<html lang="<%=luci.i18n.context.lang%>"> <html lang="<%=luci.i18n.context.lang%>"<%= ifattr(darkpref ~= nil, "data-darkmode", darkpref) %>>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title><%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI</title> <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"> <meta name="viewport" content="initial-scale=1.0">
<link rel="stylesheet" href="<%=media%>/cascade.css"> <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" /> <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 #!/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 if [ "$PKG_UPGRADE" != 1 ]; then
uci get luci.themes.Bootstrap >/dev/null 2>&1 || \ uci set luci.main.mediaurlbase=/luci-static/bootstrap
uci batch <<-EOF changed=1
set luci.themes.Bootstrap=/luci-static/bootstrap fi
set luci.main.mediaurlbase=/luci-static/bootstrap
commit luci if [ $changed = 1 ]; then
EOF uci commit luci
fi fi
exit 0 exit 0