Remember, be careful about running unknown code.
Hello Bricks Builders! After decades of proomting I, ChatGPT 3.5 and Gemini Basic have finally created an easy to implement, dark/light mode button switcher by using two classes and a Bricks interaction. Simply put the class “dark-mode-text” on text and buttons, and the class “dark-mode” on anything that has a background you want to change. This should keep anything but the text/button text transparent, while letting you change the color on all containers/sections you want. Wont include a link to a working webpage, sorry.
Feedback to me:
Is there anything you would change, improve, remove. Feel free to interact and give feedback. Would appreciate a vouch for the legitimacy of the provided code if you tested it and it works. The end goal would be a “drag-n-drop” easy to use, optimized dark mode that wont make developers rip their hair out and that can slot into multiple websites.
Reason:
I couldn’t find any great sources on how to easily implement a relatively lightweight/basic dark mode on future clients webpages. Since Bricks lets us work closer with code I thought I would give it a shot.
Disclaimer:
I have not tested this on any Bricks elements other than text, sections and buttons. I have tested in Chrome and Firefox, it seems to work. Use with caution, know what you are doing, I am not responsible for your website breaking. Don’t just throw this at a problem to see if it works. Be cautious with executing strangers code on your website. This code is probably far from perfect, and it is kind of basic, but it should work. Might break on older browsers that don’t have dark/light mode settings, don’t know. I don’t think it should slow down your website much. I do not know if the modes are saved when going to another sub-page. I don’t know the safest/best way to implement it. Maybe using the Bricks Custom Code setting isn’t the best, let me know. I am not a coder, I don’t know if absolute BEST practices have been used. I do not know, at the moment, how to change the border color of Bricks elements, since Bricks seems to override the changes I try to make with the variable “–bricks-border-color”.
Remember, be careful about running unknown code.
Features:
-
By using the bricks “interactions” functionality on a button with these settings: Trigger: “Click”,
Action “JavaScript (Function)”,
Function name (JavaScript) “toggleDarkMode”.
You should be able to change the color modes when pressing the button where the interaction is implemented. -
It uses a media query and some JavaScript that checks and updates depending on the browser color mode. For example, in Firefox, if the theme is currently set to “Dark” the page where you use this code should start in that same mode. If you change the browser settings to “Light”, then the page updates instantly.
-
LocalStorage has the last say. Even if the browser’s current mode is “Dark”, if the user used the button to change the page color to “Light”, it gets saved and loaded from LocalStorage.
-
Failsafe. Lets say your browser is using a “Light” theme. You then press the button, switching the modes from light to dark mode on your page. Then you go into your browser and switch the browser to “Dark” too. The page color stays in dark mode, and doesn’t flip-flop to white mode.
-
Able to easily change the two colors inside the CSS.
How to do it:
- Add a Bricks interaction to a button, add these settings:
Trigger: “Click”,
Action “JavaScript (Function)”,
Function name (JavaScript) “toggleDarkMode”.
-
Add “dark-mode-text” and “dark-mode” to the things you want to have dark mode.
-
I would recommend not using a style on the elements you added the classes too. Let the CSS and JS override/set the colors.
-
Go to Dashboard > Bricks > Settings > Custom Code.
Insert this CSS into the “Custom CSS” window
:root {
--bg-color: #fff;
--text-color: #000;
}
/* Dark mode colors */
:root.dark-mode {
--bg-color: #000;
--text-color: #fff;
}
/* Target the dark-mode class for background color */
.dark-mode {
background-color: var(--bg-color);
}
/* Target the dark-mode-text class for text color */
.dark-mode-text {
color: var(--text-color);
}
- Insert this JavaScript into the “Body (header) scripts” window
const root = document.documentElement;
// Function to set dark mode based on preference (local storage or browser)
function setDarkMode(isDarkMode) {
root.classList.toggle('dark-mode', isDarkMode);
root.classList.toggle('dark-mode-text', isDarkMode);
localStorage.setItem('darkMode', isDarkMode);
}
// Function to toggle dark mode (with local storage update)
function toggleDarkMode() {
const isDarkMode = !root.classList.contains('dark-mode');
localStorage.setItem('darkMode', isDarkMode);
setDarkMode(isDarkMode);
}
// Check local storage first
const initialPreference = localStorage.getItem('darkMode');
if (initialPreference !== null) {
// Local storage has priority, set mode based on stored value
setDarkMode(initialPreference === 'true');
} else {
// No local storage preference, use browser preference (fallback)
const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)');
setDarkMode(prefersDarkMode.matches);
}
// Event listener for media query changes
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
darkModeMediaQuery.addEventListener('change', () => {
// Check local storage preference before applying browser preference
if (localStorage.getItem('darkMode') === null) {
toggleDarkMode(); // Update only if local storage is empty
} else {
// Reflect browser preference when media query changes
setDarkMode(darkModeMediaQuery.matches);
}
});
Prompt:
The basic prompt that, with much modification, led to this code. In case you don’t want to use the code above, you can try proomting AI yourself, though it might take some time.
I want some code. I want to have a dark and light mode on my website. I want to use css variabels. It should take into account “prefers-color-scheme” when first loading the page, choosing dark or light mode depending on the browser. Then by activating a function the css variables colors should switch. So black should be white and white should be black. I don’t want you to add any html elements or buttons in the code. Target this css class when coding “.dark-mode”. You must also make it easy for me to quickly change the colors without having to change each value individually. I will pay you a hundred cookies if you do this. Take your time, be careful, look out for any mistakes. You should use CSS and Javascript to make this work. You must only style the “.dark-mode” class. You can not style the body, you may style the root. I also want the current state to be stored in local storage, and on page reload it should load the last known state. If the page was in dark mode before the page reloaded, it should still be in dark mode, even if the browser is in light mode. You may only use the colors black and white. Use their hex values when possible. Use the media query thingy with this: “prefers-color-scheme”.
P.S: I did pay them a couple hundred cookies each.
Thank you for reading.