Dark mode question
Hello Team,
If we see Demo1 of HTML it uses dark black colour, while other demos say Demo8 it used different purple colour,
How can we switch that Dark black to purple kind of colour in Demo1, BTW I am using Django template and it also shows Dark black instead of purple,
How to switch to purple?
Replies (9)
Hi,
You can fully customize the theme styles and colors via in src/sass/components/_variables.scss with the below SASS variables:
// Dark colors
$dark: $gray-900 !default;
$dark-active: darken($gray-900, 3%) !default;
$dark-light: $gray-200 !default;
$dark-inverse: $white !default;Then recompile your assets folder with Gulp or Webpack.
Please note that the build tools are required only in the development environment just to compile the assets when the source folder files are modified. In the hosting/server deployment, you will only need the compile assets, no need to install the build tools dependencies there.
Regards.
Hey Sean,
So for the Larvel version, should I change variables in /resources/_keenthemes/src/saas/components/_varibles.css ?
And then run npm run dev in root folder to build assets?
Hi,
Yes, right. You just need to change the SASS and recompile the assets folder as explained here. If you need any further help please let us know.
Regards.
Hello Sean,
The document mentioned that..."All bundled assets are located in the folder starterkit/lib/assets and you can include the static js, css and media files." but there's no such folder in the Laravel demo folder nor was it created after I build it.
Also, I did .. npm run dev after changing below variables in _variables.css, changed grey-900 to 100.
// Dark colors
$dark: $gray-100 !default;
$dark-active: darken($gray-100, 3%) !default;
$dark-light: $gray-100 !default;
$dark-inverse: $white !default;
but still, there's no effect on the theme.
Hi,
I recommend updating the _variables-dark.scss file located in /django/starterkit/_keenthemes/src/sass/components/ to modify the theme colors for the dark mode. In this file, you can adjust the SASS variables to achieve the desired color scheme.
After making these changes, save the file, and then run the command npm run dev in the root folder of your project to rebuild the assets with the updated styles. This should apply the purple color scheme to your theme.
If you encounter any further issues or need additional assistance, please feel free to ask.
Hello Faizal,
With this also no change,
I already have Laravel project built, and I did change in /resources/_keenthemes/saas/components/_variables-dark.scss and even in _variables.scss,
Then I did npm run dev in my root folder,
All assets were built, but no change in colors,
I want colors at HTML8 demo,
Hi Jigar,
I apologize for the misunderstanding. It seems I misinterpreted your context. Given your situation, here's a clearer explanation:
It appears there was a misunderstanding about the framework you're using. Your project structure suggests you're using Laravel, not Django.
To address your specific scenario, in your Laravel project, if you navigate to:/laravel/starterkit/resources/_keenthemes/src/sass/_init.scss
You'll notice the custom SCSS variables being imported in a specific order:
// Custom variables
@import "components/variables.custom"; // base custom variable
@import "components/variables"; // for light, override above variables
@import "components/variables-dark"; // for dark, override above variablesIf you're currently focused on the dark mode layout, you should search for the color variables you wish to modify in the `components/variables-dark.scss` file. If you're specifically working on the light mode layout, look for these variables in the `components/variables.scss` file.
In cases where you can't find the desired variables in these two files, you can make modifications in the `components/variables.custom.scss` file. However, be aware that changes in this file might still be influenced by the other two files, as they could potentially override the same variables for the respective light and dark modes.
Thank you for your patience, and if you encounter any further difficulties, please don't hesitate to ask for assistance.
Hello Faizal,
Near to close, i took _variables.css, _variables-dark.css and _variables.customs.css from HTML demo 8 and pasted in my Laravel project path,
Did npm run dev,
The card background, and header menu background were changed, but the body, header, sidebar color were not changed, see the below image,
https://imgur.com/a/WJmkAVu
Hi,
The issue to not only the variable changes, but also the overall styling structure.
If you're aiming to achieve the complete style of Demo 8, I would recommend considering a more comprehensive approach. Instead of just replacing the _variables.css, _variables-dark.css, and _variables.customs.css files, you might want to replace all the demo-specific assets (demo8) from the HTML version and integrate them into your Laravel project's assets folder. Specifically, you can find these assets in the resources/_keenthemes/src directory.
However, do keep in mind that while replacing the assets, not all styles might work perfectly due to potential differences in layouts and other factors between different demo versions. Demo 1 and Demo 8, for example, may have variations in their layouts that could affect how certain styles are applied.
I recommend making a backup of your Laravel project before attempting such changes, as it involves overwriting and adjusting several assets. Once you've integrated the assets, running npm run dev should help compile and apply the new styles.
Feel free to reach out if you need further assistance or have more questions.
