Load js file error

I was just about to start a ticket with the same issue. So I’ll reply here instead.

If you just comment out lines 33-37, then the error goes away (including in Dev Console). Then if the dev can push a permanent fix, it doesn’t matter that the change gets overwritten ??

/*
wp_enqueue_script('dark-mode-dashboard-js', plugins_url('js/dark-mode-dashboard.js', __FILE__), array('jquery'), DARK_MODE_DASHBOARD_VERSION, true);
    wp_localize_script('dark-mode-dashboard-js', 'darkModeDashboard', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce'    => wp_create_nonce('dark_mode_dashboard_nonce')
    ));
*/

Hope this helps you (and others).

@fibrojedi wouldn’t commenting out the nonce open the site up to security risks like CSRF? While it does solve the problem, I don’t think the risk is worth it. I currently have the same issue, so looking into a safer fix for this.

This section is where the security value is created. Commenting does not negatively affect security. But, the security check condition cannot be verified, if it exists. It is best for the plugin author to review the source code.

@atakanau it seems the dev has disappeared unfortunately – even their personal site is offline. (I wonder if that has something to do with this issue maybe). Given the access level of this plugin I was assuming a security check would be necessary (and of course it is according to WP guidelines), but… I suppose if you have enough other security measures in place it should be manageable. As it currently stands the check is doing naught anyways.

Valid points, I’ll work on a fix myself that’s better. It’s never safe to assume people have security elsewhere and that’s not an excuse for an insecure plugin. I’ll see what I can do.

Okay, I cheated to get the answer, so I am not claiming this is my work. But I have tested it and I’m not getting nonce errors, and switching mode still functions.

1. Go to about Line 99 where this function starts: dark_mode_dashboard_toolbar_change_js()
2. Add this code before the ?> that immediately follows the function declaration: $nonce = wp_create_nonce('dark_mode_dashboard_nonce');
3. A few lines down, replace this line 'security': darkModeDashboard.nonce with

'security': '<?php echo $nonce; ?>'

4. A couple of lines down replace $.post(darkModeDashboard.ajax_url, data, function(response){ with

$.post('<?php echo admin_url('admin-ajax.php'); ?>', data, function(response) {

I wanted to put it line-by-line so you can see the changes.

That make my full code:

<?php
/**
 * Plugin Name: Dark Mode for WP Dashboard
 * Plugin URI: https://www.ads-software.com/plugins/dark-mode-for-wp-dashboard/
 * Description: Enable dark mode for the WordPress dashboard
 * Author: Naiche
 * Author URI: https://profiles.www.ads-software.com/naiches/
 * Text Domain: dark-mode-for-wp-dashboard
 * Version: 1.2.4
 * License: GPLv2 or later
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
 */

if ( ! defined( 'ABSPATH' ) ) {
    die();
}
define('DARK_MODE_DASHBOARD_VERSION', '1.2.4'); // Updated version
define('DARK_MODE_DASHBOARD_PLUGIN_PATH', plugin_dir_url(__FILE__));

/**
* Add styles and scripts
*/
function dark_mode_dashboard_add_styles() {
    /**
    * Check if dark mode is disable for the current user
    */
    if(wp_get_current_user()->dark_mode_dashboard != 1) {
        $dark_mode_dashboard_style = apply_filters( 'dark_mode_dashboard_css', DARK_MODE_DASHBOARD_PLUGIN_PATH . '/assets/css/dark-mode-dashboard.css' );
        wp_register_style( 'dark-mode-dashboard', $dark_mode_dashboard_style, array(), DARK_MODE_DASHBOARD_VERSION );
        wp_enqueue_style( 'dark-mode-dashboard');
    }
}
add_action( 'admin_enqueue_scripts', 'dark_mode_dashboard_add_styles' );

/**
* Add field to user profile page
*/
add_action( 'show_user_profile', 'dark_mode_dashboard_user_profile_fields' );
add_action( 'edit_user_profile', 'dark_mode_dashboard_user_profile_fields' );

function dark_mode_dashboard_user_profile_fields( $user ) { ?>
    <h3><?php esc_html_e("Dark Mode for WP Dashboard", "dark-mode-for-wp-dashboard"); ?></h3>

    <table class="form-table">
        <tr>
            <th><label for="darkmode"><?php esc_html_e("Disable darkmode?", "dark-mode-for-wp-dashboard"); ?></label></th>
            <td>
                <input type="checkbox" name="dark_mode_dashboard" id="darkmode" value="1" <?php checked($user->dark_mode_dashboard, true, true); ?>>
            </td>
        </tr>
    </table>
<?php }

/**
* Save data from user profile field to database
*/
add_action( 'personal_options_update', 'dark_mode_dashboard_save_user_profile_fields' );
add_action( 'edit_user_profile_update', 'dark_mode_dashboard_save_user_profile_fields' );

function dark_mode_dashboard_save_user_profile_fields( $user_id ) {
    if ( empty( $_POST['_wpnonce'] ) || ! wp_verify_nonce( $_POST['_wpnonce'], 'update-user_' . $user_id ) ) {
        return;
    }

    if ( !current_user_can( 'edit_user', $user_id ) ) {
        return false;
    }

    update_user_meta( $user_id, 'dark_mode_dashboard', $_POST['dark_mode_dashboard'] );
}

/**
* Admin toolbar add toggle
*/
function dark_mode_dashboard_toolbar_link($wp_admin_bar) {
    $args = array(
        'id' => 'dark-mode-dashboard',
        'title' => 'Dark Mode Toggle',
        'href' => '#',
        'meta' => array(
            'class' => 'dark-mode-dashboard',
            'title' => 'Dark Mode Toggle'
        )
    );
    $wp_admin_bar->add_node($args);
}
add_action('admin_bar_menu', 'dark_mode_dashboard_toolbar_link', 999);

/**
* Admin toolbar toggle, trigger the ajax handler function using jQuery
*/
add_action( 'admin_footer', 'dark_mode_dashboard_toolbar_change_js' );
function dark_mode_dashboard_toolbar_change_js() {
  $nonce = wp_create_nonce('dark_mode_dashboard_nonce'); ?>
  <script type="text/javascript" >
    jQuery(document).ready(function($) {
        $('#wp-admin-bar-dark-mode-dashboard .ab-item').on('click', function() {
            var data = {
                'action': 'dark_mode_dashboard_change_user_profile_mode',
                'security': '<?php echo $nonce; ?>'
            };

            $.post('<?php echo admin_url('admin-ajax.php'); ?>', data, function(response) {
                if (response.success) {
                    document.location.reload(true);
                } else {
                    alert('Failed to change mode');
                }
            });
        });
    });
  </script>
  <style>
    #wpadminbar #wp-admin-bar-dark-mode-dashboard .ab-item:before {
        content: "\f339";
        top: 2px;
    }
  </style> <?php
}

/**
* Admin toolbar toggle, hook and define ajax handler function
*/
add_action( 'wp_ajax_dark_mode_dashboard_change_user_profile_mode', 'dark_mode_dashboard_change_user_profile_mode' );
function dark_mode_dashboard_change_user_profile_mode() {
    // Verify the nonce
    check_ajax_referer('dark_mode_dashboard_nonce', 'security');

    $user_id = get_current_user_id();

    if ( !current_user_can( 'edit_user', $user_id ) ) {
        wp_send_json_error('Unauthorized user');
        return false;
    }

    if(get_user_meta($user_id, 'dark_mode_dashboard', true) == 1) {
        update_user_meta( $user_id, 'dark_mode_dashboard', '' );
    } else {
        update_user_meta( $user_id, 'dark_mode_dashboard', 1 );
    }

    wp_send_json_success();
    wp_die(); // this is required to terminate immediately and return a proper response
}

Let me know if you hit bugs/issues though, it’s got to be better to patch this than start a whole new plugin. I didn’t need Dark Mode for the front as such, only the back office, which is why I ended up with this plugin.

• This reply was modified 5 months ago by Fibro Jedi.
• This reply was modified 5 months ago by Fibro Jedi. Reason: Minor formatting changes

@fibrojedi I did some testing and your solution does indeed resolve the nonce error in the inspector. It appears however that the css is still broken, for example, on the post creation page – headers and other text are nearly or completely invisible as they are light grey or white, and the background is also white. I’m guessing there is a file that’s not being loaded somehow. Haven’t had time to investigate further yet though. Cheers

@tonyquicktech hey, okay so I had a look and there is only one .css file mentioned in the PHP and it should be loading, even though there are others in the main PHP file (others in the /assets/scss/plugins folder).

It’s appearing correctly in my View Source, and I don’t see the header/background issues you do.

Though now I look at it, the // in the css path, might not be helping.

Change Line 28 (from my re-worked bit) to

$dark_mode_dashboard_style = apply_filters( 'dark_mode_dashboard_css', DARK_MODE_DASHBOARD_PLUGIN_PATH . 'assets/css/dark-mode-dashboard.css' );

As I’m not seeing the white background, can you just check you’re not also using a Dark Mode browser extension as sometimes these can invert the colours. The background colour is set in .css and .scss files.

In your case, the issue is the background colour, not the text, as the text is supposed to be light as a contrast to the background which is supposed to be dark.

Try adding this in, which is my extremely-simple-code so you can blame me:

function dark_mode_dashboard_force_background_color(){
 ?>
 <style>
   /* Overriding background colour: by @fibrojedi for @tonyquicktech
      This is the same colour as in the CSS files, but injected here to be certain */
   body{
     background:#23282d!important;
   }
 </style>
 <?php
}
add_action('admin_print_styles','dark_mode_dashboard_force_background_color');

• This reply was modified 4 months, 3 weeks ago by Fibro Jedi. Reason: spell checking and formatting

The other way you could place it would be to swap admin_print_styles to admin_footer pretty much ensuring it’s the last style call on the <body> tag (depending on other plugins and browser extensions, anyway).