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.

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 variables

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.

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;