From 4b16c715acb5cbba9dac898abbbcaa06d0e83238 Mon Sep 17 00:00:00 2001
From: ornanovitch <ornano@felinn.org>
Date: Sat, 24 Jul 2021 13:36:39 +0200
Subject: [PATCH] dark mode
---
assets/app.js | 2 +-
assets/app.scss | 48 ++++++++++++++++++++++++++++++++++++++++++++++++
assets/theme.js | 28 ++++++++++++++++++++++++++++
3 files changed, 77 insertions(+), 1 deletion(-)
create mode 100644 assets/theme.js
diff --git a/assets/app.js b/assets/app.js
index d98b199..b5af402 100644
--- a/assets/app.js
+++ b/assets/app.js
@@ -1,5 +1,5 @@
require('./app.scss');
-require('@fortawesome/fontawesome-free/css/all.min.css');
+import './theme.js';
import $ from "jquery";
import 'bootstrap';
diff --git a/assets/app.scss b/assets/app.scss
index e69de29..570e6d8 100644
--- a/assets/app.scss
+++ b/assets/app.scss
@@ -0,0 +1,48 @@
+.theme-switch {
+ display: inline-block;
+ height: 24px;
+ position: relative;
+ width: 50px;
+}
+
+.theme-switch input {
+ display: none;
+}
+
+.slider {
+ background-color: #ccc;
+ bottom: 0;
+ cursor: pointer;
+ left: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+ transition: 400ms;
+}
+
+.slider::before {
+ background-color: #fff;
+ bottom: 4px;
+ content: "";
+ height: 16px;
+ left: 4px;
+ position: absolute;
+ transition: 400ms;
+ width: 16px;
+}
+
+input:checked + .slider {
+ background-color: #66bb6a;
+}
+
+input:checked + .slider::before {
+ transform: translateX(26px);
+}
+
+.slider.round {
+ border-radius: 34px;
+}
+
+.slider.round::before {
+ border-radius: 50%;
+}
diff --git a/assets/theme.js b/assets/theme.js
new file mode 100644
index 0000000..dc93dcf
--- /dev/null
+++ b/assets/theme.js
@@ -0,0 +1,28 @@
+var toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
+var currentTheme = localStorage.getItem('theme');
+var mainHeader = document.querySelector('.main-header');
+
+if (currentTheme) {
+ if (currentTheme === 'dark') {
+ if (!document.body.classList.contains('dark-mode')) {
+ document.body.classList.add("dark-mode");
+ }
+ toggleSwitch.checked = true;
+ }
+}
+
+function switchTheme(e) {
+ if (e.target.checked) {
+ if (!document.body.classList.contains('dark-mode')) {
+ document.body.classList.add("dark-mode");
+ }
+ localStorage.setItem('theme', 'dark');
+ } else {
+ if (document.body.classList.contains('dark-mode')) {
+ document.body.classList.remove("dark-mode");
+ }
+ localStorage.setItem('theme', 'light');
+ }
+}
+
+toggleSwitch.addEventListener('change', switchTheme, false);
--
GitLab