From ed86f03a9f7c2f58a9111f925bb81303596b394b Mon Sep 17 00:00:00 2001 From: Jo-Philipp Wich Date: Sun, 7 Nov 2021 11:04:52 +0100 Subject: [PATCH] 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 --- .../htdocs/luci-static/bootstrap-dark | 1 + .../htdocs/luci-static/bootstrap-light | 1 + .../htdocs/luci-static/bootstrap/cascade.css | 22 +++++++-------- .../luasrc/view/themes/bootstrap-dark | 1 + .../luasrc/view/themes/bootstrap-light | 1 + .../luasrc/view/themes/bootstrap/header.htm | 20 ++++++++++++- .../etc/uci-defaults/30_luci-theme-bootstrap | 28 +++++++++++++++---- 7 files changed, 55 insertions(+), 19 deletions(-) create mode 120000 themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap-dark create mode 120000 themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap-light create mode 120000 themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap-dark create mode 120000 themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap-light 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") -%> - +> <%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI + <% if darkpref == nil then %> + + <% end %> 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 -- 2.30.2