Bugzilla – Attachment 173536 Details for
Bug 31327
Add color scheme picker to the OPAC
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 31327: PoC Dark theme
Bug-31327-PoC-Dark-theme.patch (text/plain), 9.48 KB, created by
Jonathan Druart
on 2024-10-28 13:12:39 UTC
(
hide
)
Description:
Bug 31327: PoC Dark theme
Filename:
MIME Type:
Creator:
Jonathan Druart
Created:
2024-10-28 13:12:39 UTC
Size:
9.48 KB
patch
obsolete
>From 1751a206f02165c1f7bf6efd6129e81e26920cb1 Mon Sep 17 00:00:00 2001 >From: Jonathan Druart <jonathan.druart@bugs.koha-community.org> >Date: Mon, 28 Oct 2024 14:10:12 +0100 >Subject: [PATCH] Bug 31327: PoC Dark theme > >See https://getbootstrap.com/docs/5.3/customize/color-modes/ >--- > .../prog/css/src/_color-mode.scss | 19 +++++ > .../prog/css/src/_variables-dark.scss | 2 + > .../prog/css/src/_variables.scss | 2 + > .../prog/css/src/staff-global.scss | 24 ++++-- > .../prog/en/includes/doc-head-open.inc | 2 +- > .../intranet-tmpl/prog/en/includes/header.inc | 3 +- > .../prog/en/includes/js_includes.inc | 1 + > .../intranet-tmpl/prog/js/switch-theme.js | 80 +++++++++++++++++++ > 8 files changed, 124 insertions(+), 9 deletions(-) > create mode 100644 koha-tmpl/intranet-tmpl/prog/css/src/_color-mode.scss > create mode 100644 koha-tmpl/intranet-tmpl/prog/css/src/_variables-dark.scss > create mode 100644 koha-tmpl/intranet-tmpl/prog/js/switch-theme.js > >diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_color-mode.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_color-mode.scss >new file mode 100644 >index 00000000000..d65b335c556 >--- /dev/null >+++ b/koha-tmpl/intranet-tmpl/prog/css/src/_color-mode.scss >@@ -0,0 +1,19 @@ >+@mixin color-mode($mode: light, $root: false) { >+ @if $color-mode-type == "media-query" { >+ @if $root == true { >+ @media (prefers-color-scheme: $mode) { >+ :root { >+ @content; >+ } >+ } >+ } @else { >+ @media (prefers-color-scheme: $mode) { >+ @content; >+ } >+ } >+ } @else { >+ [data-bs-theme="#{$mode}"] { >+ @content; >+ } >+ } >+} >diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_variables-dark.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_variables-dark.scss >new file mode 100644 >index 00000000000..d3d54f030ab >--- /dev/null >+++ b/koha-tmpl/intranet-tmpl/prog/css/src/_variables-dark.scss >@@ -0,0 +1,2 @@ >+$default-color-grey: #E0E0E0; >+ >diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_variables.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_variables.scss >index 1cf18685d25..ccad83be65a 100644 >--- a/koha-tmpl/intranet-tmpl/prog/css/src/_variables.scss >+++ b/koha-tmpl/intranet-tmpl/prog/css/src/_variables.scss >@@ -1789,3 +1789,5 @@ $default-bs-btn-active-color: #555; > $default-bs-btn-disabled-bg: #F3F4F4; > $default-bs-btn-disabled-border-color: #CECECE; > $default-bs-btn-disabled-color: #282828; >+ >+$default-color-grey: #E6E6E6; >diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss >index 6b6c5e7f0c4..a819fea3cff 100644 >--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss >+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss >@@ -6,12 +6,22 @@ > // Configuration > // Include any default variable overrides here > @import "_variables"; >+@import "_variables-dark"; >+@import "_color-mode"; > > // Include remainder of required Bootstrap stylesheets > @import "~bootstrap/scss/_variables"; >+@import "~bootstrap/scss/_variables-dark"; > @import "~bootstrap/scss/_mixins"; > >-$enable-dark-mode: false; >+$color-mode-type: data; >+ >+@include color-mode(dark) { >+ .element { >+ color: var(--bs-primary-text-emphasis); >+ background-color: var(--bs-primary-bg-subtle); >+ } >+} > > @import "~bootstrap/scss/_maps"; > @import "~bootstrap/scss/_utilities"; >@@ -128,7 +138,7 @@ a { > } > > &.edit-patronimage { >- background-color: #E6E6E6; >+ background-color: $default-color-grey; > border-color: #ADADAD; > color: #333; > >@@ -415,7 +425,7 @@ aside { > #menu, > #navmenulist, > #serialmenu { >- background-color: #E6E6E6; >+ background-color: $default-color-grey; > display: block; > padding: 1em 0 1em 0; > >@@ -439,7 +449,7 @@ aside { > list-style: none; > > a { >- border-left: 5px solid #E6E6E6; >+ border-left: 5px solid $default-color-grey; > color: #000; > display: block; > padding: .7em .3em .7em 1rem; >@@ -1268,7 +1278,7 @@ dd { > } > > .patroninfo { >- background-color: #E6E6E6; >+ background-color: $default-color-grey; > color: #000; > left: -10px; > margin-right: .5rem; >@@ -2098,7 +2108,7 @@ li { > } > > #search-facets { >- background-color: #E6E6E6; >+ background-color: $default-color-grey; > > h4 { > background-color: $background-color-primary; >@@ -3419,7 +3429,7 @@ progress { > } > > #browse-return-to-results { >- background-color: #E6E6E6; >+ background-color: $default-color-grey; > border: 1px solid lighten( $background-color-primary, 30% ); > border-bottom-width: 0; > border-top-left-radius: 5px; >diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/doc-head-open.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/doc-head-open.inc >index a524bc683a6..f9f1b9292c8 100644 >--- a/koha-tmpl/intranet-tmpl/prog/en/includes/doc-head-open.inc >+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/doc-head-open.inc >@@ -29,5 +29,5 @@ > [% END %] > [% END %] > >-[% IF ( bidi ) %]<html lang="[% lang | html %]" dir="[% bidi | html %]">[% ELSE %]<html lang="[% lang | html %]">[% END %] >+[% IF ( bidi ) %]<html lang="[% lang | html %]" dir="[% bidi | html %]" data-bs-theme="dark">[% ELSE %]<html lang="[% lang | html %]" data-bs-theme="dark">[% END %] > <head> >diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/header.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/header.inc >index 66b8467b8e6..a3a06476d2f 100644 >--- a/koha-tmpl/intranet-tmpl/prog/en/includes/header.inc >+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/header.inc >@@ -240,7 +240,8 @@ > </ul> > </li> > [% INCLUDE 'langmenu-staff-top.inc' %] >- >+ <button type="button" class="btn btn-dark" data-bs-theme-value="light">Light</button> >+ <button type="button" class="btn btn-dark" data-bs-theme-value="dark">Dark</button> > [% ELSE %] > <li class="nav-item loggedout"> > <a href="/cgi-bin/koha/mainpage.pl" id="login">Log in</a> >diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/js_includes.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/js_includes.inc >index 87d469824e2..603d69e8bce 100644 >--- a/koha-tmpl/intranet-tmpl/prog/en/includes/js_includes.inc >+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/js_includes.inc >@@ -26,6 +26,7 @@ > [% Asset.js("lib/jquery/plugins/jquery.validate.min.js") | $raw %] > <!-- koha core js --> > [% Asset.js("js/staff-global.js") | $raw %] >+[% Asset.js("js/switch-theme.js") | $raw %] > [% INCLUDE 'js-date-format.inc' %] > [% INCLUDE 'js-patron-get-age.inc' %] > [% INCLUDE 'js-patron-format-address.inc' %] >diff --git a/koha-tmpl/intranet-tmpl/prog/js/switch-theme.js b/koha-tmpl/intranet-tmpl/prog/js/switch-theme.js >new file mode 100644 >index 00000000000..6fa2b84e02d >--- /dev/null >+++ b/koha-tmpl/intranet-tmpl/prog/js/switch-theme.js >@@ -0,0 +1,80 @@ >+/*! >+ * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/) >+ * Copyright 2011-2024 The Bootstrap Authors >+ * Licensed under the Creative Commons Attribution 3.0 Unported License. >+ */ >+ >+(() => { >+ 'use strict' >+ >+ const getStoredTheme = () => localStorage.getItem('theme') >+ const setStoredTheme = theme => localStorage.setItem('theme', theme) >+ >+ const getPreferredTheme = () => { >+ const storedTheme = getStoredTheme() >+ if (storedTheme) { >+ return storedTheme >+ } >+ >+ return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' >+ } >+ >+ const setTheme = theme => { >+ if (theme === 'auto') { >+ document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')) >+ } else { >+ document.documentElement.setAttribute('data-bs-theme', theme) >+ } >+ } >+ >+ setTheme(getPreferredTheme()) >+ >+ const showActiveTheme = (theme, focus = false) => { >+ const themeSwitcher = document.querySelector('#bd-theme') >+ >+ if (!themeSwitcher) { >+ return >+ } >+ >+ const themeSwitcherText = document.querySelector('#bd-theme-text') >+ const activeThemeIcon = document.querySelector('.theme-icon-active use') >+ const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`) >+ //const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href') >+ >+ document.querySelectorAll('[data-bs-theme-value]').forEach(element => { >+ element.classList.remove('active') >+ element.setAttribute('aria-pressed', 'false') >+ }) >+ >+ btnToActive.classList.add('active') >+ btnToActive.setAttribute('aria-pressed', 'true') >+ //activeThemeIcon.setAttribute('href', svgOfActiveBtn) >+ const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})` >+ themeSwitcher.setAttribute('aria-label', themeSwitcherLabel) >+ >+ if (focus) { >+ themeSwitcher.focus() >+ } >+ } >+ >+ window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => { >+ const storedTheme = getStoredTheme() >+ if (storedTheme !== 'light' && storedTheme !== 'dark') { >+ setTheme(getPreferredTheme()) >+ } >+ }) >+ >+ window.addEventListener('DOMContentLoaded', () => { >+ showActiveTheme(getPreferredTheme()) >+ >+ document.querySelectorAll('[data-bs-theme-value]') >+ .forEach(toggle => { >+ toggle.addEventListener('click', () => { >+ const theme = toggle.getAttribute('data-bs-theme-value') >+ setStoredTheme(theme) >+ setTheme(theme) >+ showActiveTheme(theme, true) >+ }) >+ }) >+ }) >+})() >-- >2.34.1
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 31327
: 173536