# Color Scheme - Light or dark - is not running

**URL:** https://discourse.roots.io/t/color-scheme-light-or-dark-is-not-running/13329
**Category:** sage
**Tags:** sage8, gulp, sage9
**Created:** 2018-08-14T01:38:32Z
**Posts:** 5

## Post 1 by @Mais_Cule — 2018-08-14T01:38:32Z

I wanted an option of choosing themes i.e. light or dark

I followed this instructions [here](https://discourse.roots.io/t/sage-and-color-schemes-light-and-dark-version-for-example/10804/)

But When I choose the option of light or dark, nothing changes. the color scheme remains the same.

Any idea anyone as to why?

Thanks

---

## Post 2 by @alwaysblank — 2018-08-14T05:55:52Z

Please post your code and a more detailed description of how you replicate the problem and how it manifests.

---

## Post 3 by @Mais_Cule — 2018-08-14T23:40:34Z

sure,

So i’ve added scss files in the config.json file

```
{
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "light": [
      "./styles/main.scss"
    ],
    "dark": [
      "./styles/dark.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "publicPath": "/wp-content/themes/ken",
  "devUrl": "http://dev.ken.com/",
  "proxyUrl": "http://localhost:3000",
  "cacheBusting": "[name]_[hash:8]",
  "watch": [
    "app/**/*.php",
    "config/**/*.php",
    "resources/views/**/*.php"
  ]
}
```

Here’s the standalone scss files

![add_scss_files](https://discourse.roots.io/uploads/default/original/2X/5/51086a70360a29667693a6fd0c30086760a361bc.PNG)

Customizer.php

```
<?php

namespace App;

add_action( 'customize_register', function() {

  global $wp_customize;

     // Theme variation setting

     		class Select_Control extends \WP_Customize_Control {
     			public $type = 'select';

     			public function render_content() {
            $themes = array(
              'light' => 'Light',
              'dark' => 'Dark',
            );
          ?>
     			<label>
     				<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
     				<select <?php $this->link(); ?>>
              <?php foreach($themes as $theme => $name) { ?>
                <option value="<?=$theme?>" <?php if($this->value() == $theme) echo 'selected="selected"'; ?>><?=$name?></option>
              <?php } ?>
     				</select>
     			</label>
     		<?php
     			} //render_content()
     		} //Select_Control()

     		$wp_customize->add_section('theme_colors', array('title'=>'Sub Theme'));

     		$wp_customize->add_setting('subtheme_setting', array('default'=>'light'));

     		$wp_customize->add_control( new Select_Control($wp_customize, 'subtheme_setting', array(
     			'label' => 'Color scheme',
     			'section' => 'theme_colors',
     			'setting' => 'subtheme_setting'
     		) ) );
});
```

Added it into array in functions.php

 ![added_customizer](https://discourse.roots.io/uploads/default/original/2X/8/888ee13bd5ae1055e5ac1edc4e7096650a9b72d0.PNG)

enqueue css file

```
add_action('wp_enqueue_scripts', function () {
    
    wp_enqueue_style('sage/main.css', asset_path('styles/' . get_theme_mod( 'subtheme_setting' ) . '.css'), false, null);

    wp_enqueue_script('sage/main.js', asset_path('scripts/main.js'), ['jquery'], null, true);
    wp_localize_script( 'sage/main.js', 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}, 100);
```

The problem that I have is that when selected light or dark theme it doesn’t change anything

the css link (below) can be seen in the sourecode but it doesnt have anything in it.

`<link rel='stylesheet' id='sage/main.css-css' href='http://dev.ken.com/wp-content/themes/ken/dist/styles/light.css' type='text/css' media='all' />`

---

## Post 4 by @MWDelaney — 2018-08-15T00:44:31Z

Did you do a `yarn build` to create the new stylesheets?

---

## Post 5 by @Mais_Cule — 2018-08-15T05:39:35Z

haha such a silly of me.

thank you! worked!