Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

Change auto generated theme colors


Just started working with demo13 and I was wondering how to generate a different color for the header and the aside menu (and logo section) for dark and light themes? The generated style.bundle.css file only generates one style object for the header and aside menu. How can I make it generate separate ones for light and dark themes? How and which file do I need to update?


user
Casey Scott 1 year ago
Gulp SASS HTML
3 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)

user
Sean Author 1 year ago

Hi,

In order to customize the layout and component colors you will need to edit SASS variables for the layout in src/sass/layout/_variables.scss.

In the above file you can refer to the bg color of header and sidebar panel and apply your own colors.

Then you will need to recompile the SASS changes into CSS by referring to the Gulp build tasks.

Please note that the NPM/Gulp tools are used for your local development in order to customize the theme CSS source while you don't need to do the same in your hosting environment. For the hosting environment, you can use the assets folder(css/js).

Regards,
Sean


user
Casey Scott 1 year ago

Thank you! Not used to SAAS but it's nice learning something new.


user
Sean Author 1 year ago

Hi happy,

That's great. All the best with your projects!

Regards,
Sean


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(