Modify Existing Colorscheme

If you want to modify an existing colorscheme, it's not advised to make changes directly to the SCSS files. In case the templates are updated in the future, your changes won't be retained in the updated files. Instead do this steps:

1. Navigate to luxize-tourist-attraction/scss/ directory, and then create colorsheme-modifier.scss

2. Choose which colorscheme between tourist-attraction you want to modify. new-colorscheme.scss

3. Let's say you choose luxize-tourist-attraction/scss/tourist-attraction.scss. Now Open (Edit) the file in your IDE/Text Editor.

4. At the top of the file, add this line of code:

   @import "colorsheme-modifier";
   
   // Variables
   //
   
   // Prefix for :root CSS variables
   

5. Now, you just have to type variable that you want to override inside colorsheme-modifier.scss. As for example you want to change the $primary color then all you need to do is open colorsheme-modifier.scss and just type this line of code:

   $primary: #ffcc00 !default;

6. On your terminal, run npm run css or npm run start to recompile scss files into css.

Creating Colorscheme

1. Navigate to luxize-tourist-attraction/scss/ and Create new file. For example we named it new-colorscheme.scss

2. Open new-colorscheme.scss and add these lines to include all bootstrap and luxize components.

   // Variables
   //
   
   // ------ you can put your colorscheme configuration here
   
   // IMPORTS
   
   
   // Importing luxize
   @import "luxize/luxize";

3. Edit luxize-tourist-attraction/package.json

4. Inside: "scripts" bracket "{ ... }", add these 3 lines below

       "css-prefix-new-tourist-attraction": "postcss --replace assets/css/luxize-new-tourist-attraction.css --use autoprefixer --map",
       "css-compile-new-tourist-attraction": "sass scss/new-tourist-attraction.scss assets/css/luxize-new-tourist-attraction.css",
       "css-minify-new-tourist-attraction": "./node_modules/.bin/cleancss --input-source-map assets/css/luxize-new-tourist-attraction.css.map --with-rebase --output assets/css/luxize-new-tourist-attraction.min.css assets/css/luxize-new-tourist-attraction.css",

5. Back to your terminal, run npm start to start the build tool

6. link luxize-new-tourist-attraction.css to your html files by replacing ".../luxize-tourist-attraction.css" to ".../luxize-new-tourist-attraction.css"

   <link rel="stylesheet" type="text/css" href="../assets/css/new-tourist-attraction.css">