Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Solved flickering bug for dark mode and added script to head #37

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Solved flickering bug for dark mode and added script to head #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5fd8d89
Solved flickering bug for dark mode and added script to head
fredtux Aug 26, 2020
cc66194
Fixed variable declaration
fredtux Aug 26, 2020
7fc6abb
Added dark mode css
fredtux Aug 29, 2020
9901cc7
Added dark mode css
fredtux Aug 29, 2020
2d00c89
Merge branch 'master'
fredtux Aug 29, 2020
d0c2f78
Added missing variable declaration
fredtux Aug 29, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 43 additions & 6 deletions dark-mode-switch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,21 @@
const darkSwitch = document.getElementById('darkSwitch');
// Global darkSwitch
var darkSwitch = null;

/**
* Execute at the beginning of the document
* If this is placed in <head> there will be no flickering
*/
(function () {
const darkThemeSelected =
localStorage.getItem('darkSwitch') !== null &&
localStorage.getItem('darkSwitch') === 'dark';

darkThemeSelected ? applyBackgroundTheme("dark") : applyBackgroundTheme("light");
})();

// Initialize js theme controls after document load
window.addEventListener('load', () => {
darkSwitch = document.getElementById('darkSwitch');
if (darkSwitch) {
initTheme();
darkSwitch.addEventListener('change', () => {
Expand All @@ -25,23 +41,44 @@ function initTheme() {
localStorage.getItem('darkSwitch') !== null &&
localStorage.getItem('darkSwitch') === 'dark';
darkSwitch.checked = darkThemeSelected;
darkThemeSelected ? document.body.setAttribute('data-theme', 'dark') :
document.body.removeAttribute('data-theme');
}


/**
* Summary: resetTheme checks if the switch is 'on' or 'off' and if it is toggled
* on it will set the HTML attribute 'data-theme' to dark so the dark-theme CSS is
* on it will set a style with the appropriate background
* applied.
* @return {void}
*/
function resetTheme() {
if (darkSwitch.checked) {
document.body.setAttribute('data-theme', 'dark');
applyBackgroundTheme('dark');
localStorage.setItem('darkSwitch', 'dark');
} else {
document.body.removeAttribute('data-theme');
applyBackgroundTheme('light');
localStorage.removeItem('darkSwitch');
}
}

/**
* Apply the stylesheet with the appropriate theme
* @param {*} color
*/
function applyBackgroundTheme(color) {
// CSS path for dark mode
var cssDark = 'dark-mode.css';

if (color === 'dark') { // If dark mode is enabled add css
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement("link");
style.setAttribute("rel", "stylesheet");
style.setAttribute("type", "text/css");
style.setAttribute("href", cssDark);
style.setAttribute("id", "dark-mode-switch");
head.appendChild(style);
} else { // If light mode is enabled remove style
var darkModeStyle = document.getElementById("dark-mode-switch");
if (darkModeStyle !== null && typeof darkModeStyle !== 'undefined')
darkModeStyle.parentNode.removeChild(darkModeStyle);
}
}
2 changes: 1 addition & 1 deletion dark-mode-switch.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

20 changes: 10 additions & 10 deletions dark-mode.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
[data-theme="dark"] {
background-color: #111 !important;
color: #eee;
body {
background-color: #111 !important;
color: #eee;
}

[data-theme="dark"] .bg-light {
background-color: #333 !important;
.bg-light {
background-color: #333 !important;
}

[data-theme="dark"] .bg-white {
background-color: #000 !important;
.bg-white {
background-color: #000 !important;
}

[data-theme="dark"] .bg-black {
background-color: #eee !important;
}
.bg-black {
background-color: #eee !important;
}
4 changes: 1 addition & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@
<link rel="author" href="https://christianoliff.com/">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="dark-mode.css">

<script src="dark-mode-switch.min.js"></script>
</head>

<body class="bg-white text-center d-flex h-100">
Expand All @@ -35,8 +35,6 @@ <h3 class="float-left">Dark Mode Switch</h3>
<input type="checkbox" class="custom-control-input" id="darkSwitch">
<label class="custom-control-label" for="darkSwitch">Dark Mode</label>
</div>
<script src="dark-mode-switch.min.js"></script>


</div>
</nav>
Expand Down