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

2
index.html
View File

@ -7,7 +7,7 @@
<script src="https://unpkg.com/feather-icons"></script> <script src="https://unpkg.com/feather-icons"></script>
</head> </head>
<body class=""> <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="container">
<div class="fblock"> <div class="fblock">
<div class="clock "> <div class="clock ">

25
js/theme.js
View File

@ -2,9 +2,30 @@ let darkTheme = localStorage.getItem('darkTheme');
const themeToggle = document.querySelector('#themeButton'); const themeToggle = document.querySelector('#themeButton');
const enableDark = () => { 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', () => { 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 // C O L O R S
--accent: #186efd60; --accent: #186efdaa;
--bg: #1e1f21; --bg: #f5f5f5;
--sbg: #2c2d31; --sbg: #e4e6e6;
--fg: #d8dee9; --fg: #3a3a3a;
@media only screen and (max-width: $bp-large) { @media only screen and (max-width: $bp-large) {
--fsg: 100px; --fsg: 100px;
@ -27,13 +27,15 @@ $bp-smallest: 31.25em;
--fss: 20px; --fss: 20px;
} }
} }
.lightmode { .darktheme {
--accent: #186efdaa; --accent: #186efd60;
--bg: #1e1f21;
--sbg: #2c2d31;
--fg: #d8dee9;
--bg: #f5f5f5;
--sbg: #e4e6e6;
--fg: #3a3a3a;
} }