View | Details | Raw Unified | Return to bug 31327
Collapse All | Expand All

(-)a/koha-tmpl/intranet-tmpl/prog/css/src/_color-mode.scss (+19 lines)
Line 0 Link Here
1
@mixin color-mode($mode: light, $root: false) {
2
  @if $color-mode-type == "media-query" {
3
    @if $root == true {
4
      @media (prefers-color-scheme: $mode) {
5
        :root {
6
          @content;
7
        }
8
      }
9
    } @else {
10
      @media (prefers-color-scheme: $mode) {
11
        @content;
12
      }
13
    }
14
  } @else {
15
    [data-bs-theme="#{$mode}"] {
16
      @content;
17
    }
18
  }
19
}
(-)a/koha-tmpl/intranet-tmpl/prog/css/src/_variables-dark.scss (+2 lines)
Line 0 Link Here
1
$default-color-grey: #E0E0E0;
2
(-)a/koha-tmpl/intranet-tmpl/prog/css/src/_variables.scss (+2 lines)
Lines 1789-1791 $default-bs-btn-active-color: #555; Link Here
1789
$default-bs-btn-disabled-bg: #F3F4F4;
1789
$default-bs-btn-disabled-bg: #F3F4F4;
1790
$default-bs-btn-disabled-border-color: #CECECE;
1790
$default-bs-btn-disabled-border-color: #CECECE;
1791
$default-bs-btn-disabled-color: #282828;
1791
$default-bs-btn-disabled-color: #282828;
1792
1793
$default-color-grey: #E6E6E6;
(-)a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss (-7 / +17 lines)
Lines 6-17 Link Here
6
// Configuration
6
// Configuration
7
// Include any default variable overrides here
7
// Include any default variable overrides here
8
@import "_variables";
8
@import "_variables";
9
@import "_variables-dark";
10
@import "_color-mode";
9
11
10
// Include remainder of required Bootstrap stylesheets
12
// Include remainder of required Bootstrap stylesheets
11
@import "~bootstrap/scss/_variables";
13
@import "~bootstrap/scss/_variables";
14
@import "~bootstrap/scss/_variables-dark";
12
@import "~bootstrap/scss/_mixins";
15
@import "~bootstrap/scss/_mixins";
13
16
14
$enable-dark-mode: false;
17
$color-mode-type: data;
18
19
@include color-mode(dark) {
20
  .element {
21
    color: var(--bs-primary-text-emphasis);
22
    background-color: var(--bs-primary-bg-subtle);
23
  }
24
}
15
25
16
@import "~bootstrap/scss/_maps";
26
@import "~bootstrap/scss/_maps";
17
@import "~bootstrap/scss/_utilities";
27
@import "~bootstrap/scss/_utilities";
Lines 128-134 a { Link Here
128
    }
138
    }
129
139
130
    &.edit-patronimage {
140
    &.edit-patronimage {
131
        background-color: #E6E6E6;
141
        background-color: $default-color-grey;
132
        border-color: #ADADAD;
142
        border-color: #ADADAD;
133
        color: #333;
143
        color: #333;
134
144
Lines 415-421 aside { Link Here
415
#menu,
425
#menu,
416
#navmenulist,
426
#navmenulist,
417
#serialmenu {
427
#serialmenu {
418
    background-color: #E6E6E6;
428
    background-color: $default-color-grey;
419
    display: block;
429
    display: block;
420
    padding: 1em 0 1em 0;
430
    padding: 1em 0 1em 0;
421
431
Lines 439-445 aside { Link Here
439
            list-style: none;
449
            list-style: none;
440
450
441
            a {
451
            a {
442
                border-left: 5px solid #E6E6E6;
452
                border-left: 5px solid $default-color-grey;
443
                color: #000;
453
                color: #000;
444
                display: block;
454
                display: block;
445
                padding: .7em .3em .7em 1rem;
455
                padding: .7em .3em .7em 1rem;
Lines 1268-1274 dd { Link Here
1268
}
1278
}
1269
1279
1270
.patroninfo {
1280
.patroninfo {
1271
    background-color: #E6E6E6;
1281
    background-color: $default-color-grey;
1272
    color: #000;
1282
    color: #000;
1273
    left: -10px;
1283
    left: -10px;
1274
    margin-right: .5rem;
1284
    margin-right: .5rem;
Lines 2098-2104 li { Link Here
2098
}
2108
}
2099
2109
2100
#search-facets {
2110
#search-facets {
2101
    background-color: #E6E6E6;
2111
    background-color: $default-color-grey;
2102
2112
2103
    h4 {
2113
    h4 {
2104
        background-color: $background-color-primary;
2114
        background-color: $background-color-primary;
Lines 3419-3425 progress { Link Here
3419
}
3429
}
3420
3430
3421
#browse-return-to-results {
3431
#browse-return-to-results {
3422
    background-color: #E6E6E6;
3432
    background-color: $default-color-grey;
3423
    border: 1px solid lighten( $background-color-primary, 30% );
3433
    border: 1px solid lighten( $background-color-primary, 30% );
3424
    border-bottom-width: 0;
3434
    border-bottom-width: 0;
3425
    border-top-left-radius: 5px;
3435
    border-top-left-radius: 5px;
(-)a/koha-tmpl/intranet-tmpl/prog/en/includes/doc-head-open.inc (-1 / +1 lines)
Lines 29-33 Link Here
29
    [% END %]
29
    [% END %]
30
[% END %]
30
[% END %]
31
31
32
[% IF ( bidi ) %]<html lang="[% lang | html %]" dir="[% bidi | html %]">[% ELSE %]<html lang="[% lang | html %]">[% END %]
32
[% IF ( bidi ) %]<html lang="[% lang | html %]" dir="[% bidi | html %]" data-bs-theme="dark">[% ELSE %]<html lang="[% lang | html %]" data-bs-theme="dark">[% END %]
33
<head>
33
<head>
(-)a/koha-tmpl/intranet-tmpl/prog/en/includes/header.inc (-1 / +2 lines)
Lines 240-246 Link Here
240
                        </ul>
240
                        </ul>
241
                    </li>
241
                    </li>
242
                    [% INCLUDE 'langmenu-staff-top.inc' %]
242
                    [% INCLUDE 'langmenu-staff-top.inc' %]
243
243
                    <button type="button" class="btn btn-dark" data-bs-theme-value="light">Light</button>
244
                    <button type="button" class="btn btn-dark" data-bs-theme-value="dark">Dark</button>
244
                [% ELSE %]
245
                [% ELSE %]
245
                    <li class="nav-item loggedout">
246
                    <li class="nav-item loggedout">
246
                        <a href="/cgi-bin/koha/mainpage.pl" id="login">Log in</a>
247
                        <a href="/cgi-bin/koha/mainpage.pl" id="login">Log in</a>
(-)a/koha-tmpl/intranet-tmpl/prog/en/includes/js_includes.inc (+1 lines)
Lines 26-31 Link Here
26
[% Asset.js("lib/jquery/plugins/jquery.validate.min.js") | $raw %]
26
[% Asset.js("lib/jquery/plugins/jquery.validate.min.js") | $raw %]
27
<!-- koha core js -->
27
<!-- koha core js -->
28
[% Asset.js("js/staff-global.js") | $raw %]
28
[% Asset.js("js/staff-global.js") | $raw %]
29
[% Asset.js("js/switch-theme.js") | $raw %]
29
[% INCLUDE 'js-date-format.inc' %]
30
[% INCLUDE 'js-date-format.inc' %]
30
[% INCLUDE 'js-patron-get-age.inc' %]
31
[% INCLUDE 'js-patron-get-age.inc' %]
31
[% INCLUDE 'js-patron-format-address.inc' %]
32
[% INCLUDE 'js-patron-format-address.inc' %]
(-)a/koha-tmpl/intranet-tmpl/prog/js/switch-theme.js (-1 / +80 lines)
Line 0 Link Here
0
- 
1
/*!
2
 * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
3
 * Copyright 2011-2024 The Bootstrap Authors
4
 * Licensed under the Creative Commons Attribution 3.0 Unported License.
5
 */
6
7
(() => {
8
  'use strict'
9
10
  const getStoredTheme = () => localStorage.getItem('theme')
11
  const setStoredTheme = theme => localStorage.setItem('theme', theme)
12
13
  const getPreferredTheme = () => {
14
    const storedTheme = getStoredTheme()
15
    if (storedTheme) {
16
      return storedTheme
17
    }
18
19
    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
20
  }
21
22
  const setTheme = theme => {
23
    if (theme === 'auto') {
24
      document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
25
    } else {
26
      document.documentElement.setAttribute('data-bs-theme', theme)
27
    }
28
  }
29
30
  setTheme(getPreferredTheme())
31
32
  const showActiveTheme = (theme, focus = false) => {
33
    const themeSwitcher = document.querySelector('#bd-theme')
34
35
    if (!themeSwitcher) {
36
      return
37
    }
38
39
    const themeSwitcherText = document.querySelector('#bd-theme-text')
40
    const activeThemeIcon = document.querySelector('.theme-icon-active use')
41
    const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
42
    //const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
43
44
    document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
45
      element.classList.remove('active')
46
      element.setAttribute('aria-pressed', 'false')
47
    })
48
49
    btnToActive.classList.add('active')
50
    btnToActive.setAttribute('aria-pressed', 'true')
51
    //activeThemeIcon.setAttribute('href', svgOfActiveBtn)
52
    const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
53
    themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
54
55
    if (focus) {
56
      themeSwitcher.focus()
57
    }
58
  }
59
60
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
61
    const storedTheme = getStoredTheme()
62
    if (storedTheme !== 'light' && storedTheme !== 'dark') {
63
      setTheme(getPreferredTheme())
64
    }
65
  })
66
67
  window.addEventListener('DOMContentLoaded', () => {
68
    showActiveTheme(getPreferredTheme())
69
70
    document.querySelectorAll('[data-bs-theme-value]')
71
      .forEach(toggle => {
72
        toggle.addEventListener('click', () => {
73
          const theme = toggle.getAttribute('data-bs-theme-value')
74
          setStoredTheme(theme)
75
          setTheme(theme)
76
          showActiveTheme(theme, true)
77
        })
78
      })
79
  })
80
})()

Return to bug 31327