Show sourcecode

The following files exists in this folder. Click to view.

public_html/gamla-kurser/webbutv1/js/

dark-light.js
scrollbar.js
tabs.js

`dark-light.js`

58 lines ASCII Windows (CRLF)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58


const storageKey = 'theme-preference'



const onClick = () => {

  // flip current value

  theme.value = theme.value === 'light'

    ? 'dark'

    : 'light'



  setPreference()

}



const getColorPreference = () => {

  if (localStorage.getItem(storageKey))

    return localStorage.getItem(storageKey)

  else

    return window.matchMedia('(prefers-color-scheme: dark)').matches

      ? 'dark'

      : 'light'

}



const setPreference = () => {

  localStorage.setItem(storageKey, theme.value)

  reflectPreference()

}



const reflectPreference = () => {

  document.firstElementChild

    .setAttribute('data-theme', theme.value)



  document

    .querySelector('#theme-toggle')

    ?.setAttribute('aria-label', theme.value)

}



const theme = {

  value: getColorPreference(),

}



// set early so no page flashes / CSS is made aware

reflectPreference()



window.onload = () => {

  // set on load so screen readers can see latest value on the button

  reflectPreference()



  // now this script can find and listen for clicks on the control

  document

    .querySelector('#theme-toggle')

    .addEventListener('click', onClick)

}



// sync with system changes

window

  .matchMedia('(prefers-color-scheme: dark)')

  .addEventListener('change', ({matches:isDark}) => {

    theme.value = isDark ? 'dark' : 'light'

    setPreference()

  })