archive/css/theme.css


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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

/* Thanks to https://alexandersandberg.com/articles/creating-a-website-theme-switcher-with-css-only */
:root {
  /* Light mode */
  --light-text: #222430;
  --light-bg: #f5f6f7;
  --light-theme: #1f9aff;
  --light-gray: #707070;

  /* Dark mode */
  --dark-text: #f7f7f7;
  --dark-bg: #222430;
  --dark-theme: #bd93f9;
  --dark-gray: #838383;

  /* Default mode */
  --text-color: var(--dark-text);
  --bg-color: var(--dark-bg);
  --theme-color: var(--dark-theme);
  --gray-color: var(--dark-gray);
}

#theme-switch:checked ~ #page {
  --text-color: var(--light-text);
  --bg-color: var(--light-bg);
  --theme-color: var(--light-theme);
  --gray-color: var(--light-gray);
}

#theme-switch:checked ~ #divbodyholder {
  --text-color: var(--light-text);
  --bg-color: var(--light-bg);
  --theme-color: var(--light-theme);
  --gray-color: var(--light-gray);
}

:root {
  /* Light mode */
  --light-switch-text: "тёмный|dark";

  /* Dark mode */
  --dark-switch-text: "светлый|light";

  /* Default mode */
  --switch-text: var(--dark-switch-text);
}

#theme-switch:checked ~ #page {
  --switch-text: var(--light-switch-text);
}

#theme-switch:checked ~ #divbodyholder {
  --switch-text: var(--light-switch-text);
}

#switch-label::after {
  content: var(--switch-text);
}

#theme-switch {
  position: absolute !important;
  height: 0px;
  width: 0px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --switch-text: var(--dark-switch-text);
    --text-color: var(--dark-text);
    --bg-color: var(--dark-bg);
    --theme-color: var(--dark-theme);
    --gray-color: var(--dark-gray);
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --switch-text: var(--light-switch-text);
    --text-color: var(--light-text);
    --bg-color: var(--light-bg);
    --theme-color: var(--light-theme);
    --gray-color: var(--light-gray);
  }
}