1 files changed, 85 insertions, 0 deletions
diff --git a/css/theme.css b/css/theme.css
new file mode 100644
index 0000000..2d15bc5
--- /dev/null
+++ b/css/theme.css
@@ -0,0 +1,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);
+  }
+}