From 1751a206f02165c1f7bf6efd6129e81e26920cb1 Mon Sep 17 00:00:00 2001 From: Jonathan Druart 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 ) %][% ELSE %][% END %] +[% IF ( bidi ) %][% ELSE %][% END %] 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 @@ [% INCLUDE 'langmenu-staff-top.inc' %] - + + [% ELSE %]