Create a switch input that takes your site content to the dark side.
Change your background and text elements for night time reading by placing them inside box containers and adding a few lines of code on your Site code tab.
You can also utilize the wix-storage module to save this configuration on all of your site or application pages, even after visitors close their browser.
Challenge yourself:
Experiment with different color schemes for your visitors
Enable “dark mode” by default during nighttime hours
Share your creations and ideas wtih us!
@freedfoxworldwide , if you want to do it without changing the code at all, all you need to do is to put a white container box on the header& Footer. Because the current code changes the color of boxes.
I tried it and it works if you first set the center of the elements to be transparent (on the editor).
So you can apply the dark theme on them as well.
In other words, if you set the color on the editor to be a specific rgba color and make sure there’s no center color. Then all you need to add to the code is:
//code code code
function saveDefaultColorScheme() {
pageElements.textElements = $w("Text");
pageElements.boxContainers = $w("Box");
pageElements.boxContainers.push($w("#header1"));
pageElements.boxContainers.push($w("#footer1"));
pageElements.buttons = $w("Button");
//the rest of the code
@jonatandor35 Hi again! I really want to implement this but unable to change the page background color hinders me from doing this. The workaround is the “BOX” having all over the page but it isn’t responsive, do you have a workaround that will stretch it on different devices like how “Strips” do?
@freedfoxworldwide as of now you’re quite limited when it comes to strips or pages. I hope the Corvid Dev Team will develop it in the future.
Meanwhile i think there’s nothing we can do but use other elements such as boxes.
Try to make the box as big as possible so it’ll fit to most of the screens.
@jonatandor35 Thanks! One last thing. I tried your code and it works! Although, when I switch “on” the dark mode, the header won’t go back to what it was when I switch “off” again. Is it like that as well when you try it yourself? Thank you so much.
@freedfoxworldwide first of all, let me add to my previous message, that actually if you have a premium account you can change the page background:
On the header put an html component.
In the htmlComp put code to post a message to change the color.
On Corvid site panel put some code to trigger the htmlComponent.
On the dashboard > settings > tracking & analytics add a snippet to the body that onMessage will change the page background.
In other words, you will use Corvid to tell an iFrame to tell the sinppet (that you’ve put on the tracking section) to change the background color.
But that’s pretty complicated and not straightforward (and it’s mostly not Corvid).
Now to your second question, it has to be something in the header design settings:
On the editor > click the header settings > choose a header theme > left preset > change the background and make the center opacity 0 %.
@deleteduser Nice
Actually, for dark mode you don’t even need to use a 3rd party. You can just upload a one-pixel image of your own (as it’s a fixed color, known in advance).
Hey hey,
I can’t get my head round why editing text on the example site breaks the dark mode - text stops changing to white if I have more than one paragraph. It just can’t seem to handle line-breaks.
If you copy-paste this comment into the text on the example site you’ll see that it just stops working. This is equally true if you just make new text boxes, or edit existing ones by writing random text.
Can we look at possibly changing the hex colour value to a different colour that is websafe as some users are now reporting that the colour is coming back as an invalid value.
I have opened the tutorial and tested it myself and the #323232 works fine for myself, however #333333 is the nearest web safe colour.
Thank you so much.