I would like to give light mode and dark mode options on websites.
Can this be achieved?
PS: I think it will be a great bric if a developer can make that happen 
1 Like
There is already a Light/Dark mode feature request for the Blocs v4. Feel free to upvote it if you need this feature!
The more people ask for it, there is more chance that @Norm will implement it in the next major release of the software.
2 Likes
Please, can we speak about dark mode?
I’ve created ilcriptoverso.com and make 2 project in BlocsApp. One in white color and one in black color. So, now i’ve 2 css…how can i tell to my white project to load black css with a simple button for my user and viceversa?
Just treat the two projects in the same way you would add language versions of your website. Just create a menu option on the light version that changes the site from Light to Dark. On the dark version, change the link to change the site from Dark to Light. Upload the default style to your main web root. Create a subfolder for the other style and upload the second website to that folder. Your links would simply point to the same page on the opposite version of the site. This option essentially creates two versions of your website, each with it’s own CSS etc. However, a better option would be to create both types of pages within the same project by simply duplicating pages and changing the colour scheme of the duplicates. That way you can provide menu links to point to the opposite colour variation.
Something you should note: You cannot place a navigation in the global area at the top of the pages. Instead, you should create a navigation with a custom link that changes the mode and place the menu into the dynamic area of your pages. This will allow you to set the links for each page so that they direct to the corresponding page of the appropriate mode. For example, if your navigation bar has links to other site pages. you would set them to link to pages of the same colour mode. If someone changes the mode from any page, the links on the opposite colour mode will point to pages of the same colour mode.
2 Likes
it’s a great workaround. I had also thought of such a solution but not in the navbar;)
It’s quite easy to do really and the latter option has the benefit of only needing one CSS. It sounds confusing, but it really is much the same as making a multilingual site.
1 Like
duplicating the pages in a single project should I call index and index1 - about and about1?
Name them in any way you wish. Clearly, you will have to have an index.html which will become the default page for the default colour mode. You could then name its opposite number something like indexdark.html. The rest of the pages are easier to deal with as you would just add the word light or dark to the page name e.g. aboutdark.html and aboutlight.html. This sort of naming convention will make it easier when it comes to defining your navigation links.
1 Like
yes yes, now the concept is clearer to me … but in doing so I should create a very personal navbar deselected the “add to menu” function
There are some passages that I have to study well, it is not exactly comfortable as a solution but I have to try.
I had thought of putting the light version in the root and the dark version in a “dark” folder
Some good info here for enable dark mode using CSS.
Especially this bit it talks about, which would be a solution for you, it would change it based on user preference. And default to the light theme based on lack of browser support.
<head>
<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="light.css" media="(prefers-color-scheme: no-preference), (prefers-color-scheme: light)">
</head>I haven’t built a website that supports light and dark yet. I still think its early days, but it’s not far off becoming more mainstream in my opinion.
4 Likes
so you say that it would be enough to copy that code, obviously with the right parameters referring exclusively to the CSS generated by blocs?
do I add it in ?
Read that website.
You talked about wanting a toggle too. You can do that with Javascript, I would imagine you could make use of cookies to remember the users preference? Not sure, never done it.
Good luck. 
1 Like
no, in fact, only that code would not help me because I should associate it with a possible button for the switch. You’re right, tomorrow I’ll read it calmly and try to better understand the concept.
Meanwhile, I sleep on it Goodnight and thanks for the help for now, I’m sure we will return to the subject
You really only need to create two custom menus. One for the light version of your site which will contain links pointing to your light pages only, and a dark version that only points to your dark pages. Additionally, you will have one extra custom link on both menus that switches the colour mode . You will then be able to duplicate the menus and add them to the dynamic area of each page of your site - the light menu being copied to all the light pages and the dark menu being duplicated to all your dark pages. Once they are in place, you will have to customise the colour mode link on every page so that whatever page the user is on. clicking the colour mode link will go to the same page in the opposite colour.
It doesn’t really matter if you create two versions of the site and place one in say a dark subdirectory. You just have to make sure your colour mode links links include the path to the appropriate version of the site.
You wouldn’t really want to use the automatic add to menu feature if you were creating a single project, but it would work if you set up two versions of the site - you wouldn’t even need to set up page names to identify light or dark pages - the path in your colour mode link will divert to the appropriate directory. Once the visitor is viewing the site within that directory, they will stay there until they change the mode to divert them to the opposite directory.
The solution suggested by @PeteSharp is clearly much neater if you feel comfortable with creating a CSS file. this would probably have to be created manually, so if you just want to work within the confines of the app, the multi-page solution may be better for you.
i’m online now
now i am here…
No reply…?
