diff --git a/assets/app.js b/assets/app.js index d98b199a9e70778d24e8bcac97a2e8029604796f..b5af402d6574bc6860b2adf36e01e71e6212cb07 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 e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..570e6d88215f336757b082d4747987346034349a 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 0000000000000000000000000000000000000000..dc93dcfbee23a7813913ec0c6b93d718fe365df4 --- /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);