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;
}
@media (prefers-color-scheme: dark) {
:root {
:root[data-darkmode="true"] {
--background-color-delta-l-sign: 1;
--background-color-high-h: 0;
--background-color-high-s: 0%;
@ -82,7 +81,6 @@
--text-color-highest-l: 100%;
--border-color-delta-l-sign: 1;
}
}
/* 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).

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