Color Scheme - Light or dark - is not running

sage
, ,
1

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

I followed this instructions here

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

2

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

3

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

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
added_customizer752×142 14.6 KB

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' />

4

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

2 Likes
5

haha such a silly of me.

thank you! worked!