Веб-сайт самохостера Lotigara

summaryrefslogtreecommitdiff
path: root/css/theme.css
diff options
context:
space:
mode:
Diffstat (limited to 'css/theme.css')
-rw-r--r--css/theme.css85
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);
+ }
+}