I’m trying to use the tools in the website module to change the website into a dark theme. I created a new theme and made the background color black and the text color white. I applied this theme to the website in website settings.
This only partially themes the default website, though. The products section of the default homepage is still black on white. The products link routed to /all-products is still black on white. The publications section of the homepage is still black on white. The blogs page routed to /blog still previews blog entries as black on white. The navbar is still black on white. The hero section changes the background to black but maintains black text. The login page is still black on white.
I thought the intention of the website theme is to create simple, consistent themes without requiring work in CSS. Is this actually possible? Can the website theme doctype be used to create a consistent color scheme for every part of the homepage and website?
As of V13, dark theme is already available.
But i assume you want to make it default for all users as currently users have the choice to switch right?
Hi, thanks for your response. Sorry I suppose I wasn’t clear. I’m talking about the website module within erpnext, not dark mode for the erpnext app. Yes, I have “Timeless Night” selected for the overall theme. I’m talking about the external website visitors see, which is controlled by Website\Website Settings and Website\Website Theme. I do wish there was a way to take the way “Timeless Night” themes the erpnext app and apply it to the external website!
Also I should mention:
Installed Apps
ERPNext: v13.29.2 (version-13)
Frappe Framework: v13.29.0 (version-13)
1 Like
Hi there,
I haven’t looked to closely at the template variables exposed by Website Theme, but I doubt that you’ll be able to create an acceptable “dark mode” just with them. You’ll need to use the scss/css fields.
I just noticed that “Website\Homepage” is experimental.
“fix: ensure website theme is applied correctly by @prssanna in #25786” is listed in “ERPNext Version 14.0.0-beta.1 Release Notes” but unfortunately I see the same behavior noted above in version 14.
Hi – I’m trying to make simple changes to the colors in the “Website Theme,” and am finding that the “Theme Configuration” settings to change colors do not seem to change anything; I’m assuming these customizations are overrided by the ERPNext / Frappe CSS.
I also found that adding anything to the “Custom Overrides” section also did not change anything on the website, but elements added to “Custome SCSS” IS visible.
Is this the expected behavior? Is there some setting I’m missing? Or is this a bug or a configuration error on my end?
The colors will change the definitions of SCSS variables. It depends where those variables are used (or are not used) whether or not you will see changes to the website.
Yes- the “custom overrides” and “custom scss” difference is expected. They have different functions. In the docs, it explains:
In the “Custom Overrides” field you can overwrite the variables defined by any app’s theme file. The content of this field will be included before importing any other SCSS.
…
In the “Custom SCSS” field you can add your own styles. This will be included after importing the app’s themes. You can also override any specific style.
Just to close the loop on this one, we ended up solving this with the video tutorial in this forum post.
