darkkmode.php

<?php
/**
 * Plugin Name:       DarkkMode
 * Description:       Plugin test
 * Version:           1.0.0
 * Author:            Rados
 * Author URI:        purr.cz
 * License:           GPL-2.0+
 * License URI:       http://www.gnu.org/licenses/gpl-2.0.txt
 */

add_action( 'admin_menu', 'darkkmode_add_admin_menu' );
add_action( 'admin_init', 'darkkmode_settings_init' );


function darkkmode_add_admin_menu(  ) { 

	add_options_page( 'DarkkMode', 'DarkkMode', 'manage_options', 'darkkmode', 'darkkmode_options_page' );

}


function darkkmode_settings_init(  ) { 

	register_setting( 'pluginPage', 'darkkmode_settings' );

	add_settings_section(
		'darkkmode_pluginPage_section', 
		__( 'Your section description', 'darkkmode' ), 
		'darkkmode_settings_section_callback', 
		'pluginPage'
	);

	add_settings_field( 
		'darkkmode_checkbox_field_0', 
		__( 'Settings field description', 'darkkmode' ), 
		'darkkmode_checkbox_field_0_render', 
		'pluginPage', 
		'darkkmode_pluginPage_section' 
	);

	add_settings_field( 
		'darkkmode_select_field_1', 
		__( 'Settings field description', 'darkkmode' ), 
		'darkkmode_select_field_1_render', 
		'pluginPage', 
		'darkkmode_pluginPage_section' 
	);

	add_settings_field( 
		'darkkmode_text_field_2', 
		__( 'Settings field description', 'darkkmode' ), 
		'darkkmode_text_field_2_render', 
		'pluginPage', 
		'darkkmode_pluginPage_section' 
	);

	add_settings_field( 
		'darkkmode_text_field_3', 
		__( 'Settings field description', 'darkkmode' ), 
		'darkkmode_text_field_3_render', 
		'pluginPage', 
		'darkkmode_pluginPage_section' 
	);


}


function darkkmode_checkbox_field_0_render(  ) { 

	$options = get_option( 'darkkmode_settings' );
	?>
	<input type='checkbox' name='darkkmode_settings[darkkmode_checkbox_field_0]' <?php checked( $options['darkkmode_checkbox_field_0'], 1 ); ?> value='1'>
	<?php

}


function darkkmode_select_field_1_render(  ) { 

	$options = get_option( 'darkkmode_settings' );
	?>
	<select name='darkkmode_settings[darkkmode_select_field_1]'>
		<option value='1' <?php selected( $options['darkkmode_select_field_1'], 1 ); ?>>Option 1</option>
		<option value='2' <?php selected( $options['darkkmode_select_field_1'], 2 ); ?>>Option 2</option>
	</select>

<?php

}


function darkkmode_text_field_2_render(  ) { 

	$options = get_option( 'darkkmode_settings' );
	?>
	<input type='text' name='darkkmode_settings[darkkmode_text_field_2]' value='<?php echo $options['darkkmode_text_field_2']; ?>'>
	<?php

}


function darkkmode_text_field_3_render(  ) { 

	$options = get_option( 'darkkmode_settings' );
	?>
	<input type='text' name='darkkmode_settings[darkkmode_text_field_3]' value='<?php echo $options['darkkmode_text_field_3']; ?>'>
	<?php

}


function darkkmode_settings_section_callback(  ) { 

	echo __( 'This section description', 'darkkmode' );

}


function darkkmode_options_page(  ) { 

		?>
		<form action='options.php' method='post'>

			<h2>DarkkMode</h2>

			<?php
			settings_fields( 'pluginPage' );
			do_settings_sections( 'pluginPage' );
			submit_button();
			?>

		</form>
		<?php

}

add_action('init', 'rm_handle_cb');
function rm_handle_cb() {
	$options = get_option( 'darkkmode_settings' );

  // If is checked, activate function to display coming soon page
  if( $options['darkkmode_checkbox_field_0'] == '1' ) { 
      // add_action( 'oxygen_enqueue_scripts', 'custom_enqueue_assets' );
add_action( 'oxygen_enqueue_frontend_scripts', 'custom_enqueue_assets' );
/**
 * Load assets on front end only.
 */
function custom_enqueue_assets() {
		wp_enqueue_style( 'dn-css', plugin_dir_url( __FILE__ ) . 'assets/css/main.css' );

		wp_enqueue_script( 'dn-js', plugin_dir_url( __FILE__ ) . 'assets/js/main.js', '', '1.0.0', false );
		
		$options = get_option( 'darkkmode_settings' );
		$purrMainColor = $options['darkkmode_text_field_2'];
		$purrSecondaryColor = $options['darkkmode_text_field_3'];

		$add_something_nonce = wp_create_nonce( "add_something" );
		$ajax_url = admin_url( 'admin-ajax.php' );
		$user_id = get_current_user_id();

		wp_localize_script( 'dn-js', 'dn_ajax_object', $options );

		$css = ":root {
			--main: {$purrMainColor};
			--secondary: {$purrSecondaryColor};
		}";
	
		wp_add_inline_style('dn-css', $css);

}

// If u want to load a function only in the front end.
add_action( 'wp_loaded', 'my_front_end_function');
function my_front_end_function() {
    if ( !is_admin() ) { 
        ?>

	<div id="purr-switch" class="color-change" onclick="toggleColors()">
    <div id="purr-day" class="purr-fancy-icon">
    <svg class="lnr lnr-moon"><use xlink:href="#lnr-moon"></use></svg>
    <div id="purr-night" class="purr-fancy-icon">
    <svg class="lnr lnr-sun"><use xlink:href="#lnr-sun"></use></svg>
    </div></div>

		<?php
    }
}
  } 
  else { 
      //do nothing
  }
  return;
}

Hi,

How does this works? Is this made to work with Oxygen Builder?

Can you add also these files?

wp_enqueue_style( 'dn-css', plugin_dir_url( __FILE__ ) . 'assets/css/main.css' );
wp_enqueue_script( 'dn-js', plugin_dir_url( __FILE__ ) . 'assets/js/main.js', '', '1.0.0', false );

Hi,

How does this works? Is this made to work with Oxygen Builder?

Hi, this is made for regular Wordpress themes, where you cant easily set variable colors. I will put Oxygen version soon on Github.