Post by Elli on Aug 16, 2019 10:39:21 GMT -7
Dark Mode
Preview
This is a dead simple script that will add class="dark" to the <body> element on click. All it requires is a button (recommended) or other element with the ID #js-toggle-dark-mode and styles to toggle. When the user refreshes the page, closes the browser window or tab, or starts a new session, the toggled styles will still be in place.
One could hypothetically take this to the extreme by creating an entirely new theme using existing markup. Assuming the stylesheet doesn't get too large, CSS is reasonably performant and should load quickly with the structure I've outlined below. (But really, this is just meant to switch between a dark and light version of the same theme.)
You can see this in use on my GamingBoards theme. (Toggle button fixed to right-center of the screen.)
NOTE: Requires jQuery! If you're using ProBoards, jQuery is already installed for you.
NOTE: Fully commented script can be found on the CodePen link above.
NOTE: If the user's browser is set to delete cookies when a session is closed, the menu state will not be maintained -- localStorage items are deleted along with cookies.
One could hypothetically take this to the extreme by creating an entirely new theme using existing markup. Assuming the stylesheet doesn't get too large, CSS is reasonably performant and should load quickly with the structure I've outlined below. (But really, this is just meant to switch between a dark and light version of the same theme.)
You can see this in use on my GamingBoards theme. (Toggle button fixed to right-center of the screen.)
NOTE: Requires jQuery! If you're using ProBoards, jQuery is already installed for you.
NOTE: Fully commented script can be found on the CodePen link above.
NOTE: If the user's browser is set to delete cookies when a session is closed, the menu state will not be maintained -- localStorage items are deleted along with cookies.
- Go to Admin > Themes > Layout Templates > Forum Wrapper
- Find this line:
<body>
... - Create a new line directly below it
- Paste the following JavaScript:
<script>
// Toggle dark mode
if (localStorage.getItem('darkmode') === 'true') {
document.body.className = 'dark';
}
</script> - Scroll to the very bottom of the code area
- Find the closing </body> tag
- Create a new line directly above it
- Paste the following:
<script>
$(function() {
// Toggle dark mode
(function darkMode() {
var $toggleButton = $('#js-toggle-dark-mode');
var $body = $('body');
function toggleDarkMode() {
if (!$body.hasClass('dark')) {
$body.addClass('dark');
localStorage.setItem('darkmode', 'true');
} else {
$body.removeClass('dark');
localStorage.removeItem('darkmode');
}
}
$toggleButton.on('click', toggleDarkMode);
})();
});
</script> - Wherever you want the toggle button to appear, add the following (should only be used once per page as ID selectors are unique):
<button id="js-toggle-dark-mode" type="button">Toggle Dark Mode</button>
- Click "Save Theme" or "Save Changes" to save your changes
- Now go to Admin > Themes > Advanced Styles & CSS and click on the "Style Sheet" tab
- Throughout the stylesheet, add "dark" styles by prefixing .dark to any selector (or affixing it to the body selector). For example:
body.dark { background-color: #222; }
.dark button { background-color: #fff; color: #222; } - Click "Save Theme" or "Save Changes" to save your changes