AtaraxiaDev/Bento
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added Light / Dark mode

Browse Source
This commit is contained in:
Rod 2020-08-30 01:32:40 -05:00
parent c3c65f1dd5
commit c2c58d6faa
4 changed files with 44 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
css/style.css
View File

@ -4,21 +4,21 @@
--fsm: 85px;
--fss: 30px;
--fses: 18px;
--accent: #186efd60;
--bg: #1e1f21;
--sbg: #2c2d31;
--fg: #d8dee9; }
--accent: #186efdaa;
--bg: #f5f5f5;
--sbg: #e4e6e6;
--fg: #3a3a3a; }
@media only screen and (max-width: 68.75em) {
:root {
--fsg: 100px;
--fsm: 65px;
--fss: 20px; } }
.lightmode {
--accent: #186efdaa;
--bg: #f5f5f5;
--sbg: #e4e6e6;
--fg: #3a3a3a; }
.darktheme {
--accent: #186efd60;
--bg: #1e1f21;
--sbg: #2c2d31;
--fg: #d8dee9; }
* {
margin: 0;

2
index.html
View File

@ -7,7 +7,7 @@
<script src="https://unpkg.com/feather-icons"></script>
</head>
<body class="">
<button id="themeButton"><i class="bicon" data-feather="sun"></i></button>
<button id="themeButton"><i id="bicon" data-feather="moon"></i></button>
<div class="container">
<div class="fblock">
<div class="clock ">

23
js/theme.js
View File

@ -2,9 +2,30 @@ let darkTheme = localStorage.getItem('darkTheme');
const themeToggle = document.querySelector('#themeButton');
const enableDark = () => {
document.body.classList.add('darktheme');
localStorage.setItem('darkTheme', 'enabled');
themeToggle.innerHTML = `<i id="bicon" data-feather="moon"></i>`;
feather.replace();
};
const disableDark = () => {
document.body.classList.remove('darktheme');
localStorage.setItem('darkTheme', null);
themeToggle.innerHTML = `<i id="bicon" data-feather="sun"></i>`;
feather.replace();
};
if (darkTheme === 'enabled') {
enableDark();
} else {
disableDark();
}
themeToggle.addEventListener('click', () => {
darkTheme = localStorage.getItem('darkTheme');
if (darkTheme !== 'enabled') {
enableDark();
} else {
disableDark();
}
});

20
sass/main.scss
View File

@ -15,11 +15,11 @@ $bp-smallest: 31.25em;
// C O L O R S
--accent: #186efd60;
--accent: #186efdaa;
--bg: #1e1f21;
--sbg: #2c2d31;
--fg: #d8dee9;
--bg: #f5f5f5;
--sbg: #e4e6e6;
--fg: #3a3a3a;
@media only screen and (max-width: $bp-large) {
--fsg: 100px;
@ -27,13 +27,15 @@ $bp-smallest: 31.25em;
--fss: 20px;
}
}
.lightmode {
.darktheme {
--accent: #186efd60;
--bg: #1e1f21;
--sbg: #2c2d31;
--fg: #d8dee9;
--accent: #186efdaa;
--bg: #f5f5f5;
--sbg: #e4e6e6;
--fg: #3a3a3a;
}