UF5 DarkReader

README.md

Reference : https://chat.userfrosting.com/channel/support?msg=SB3bnhPwZgScGSvLM

Start from a fresh install of the UF5.1 Skeleton

Files to edit

1. package.json
2. webpack.entries.js
3. app/assets/darkreader.js
4. app/templates/content/scripts/site.html.twig

app_assets_darkreader.js

const DarkReader = require('darkreader/darkreader');

$(document).ready(function() {
    console.log(DarkReader)
    DarkReader.setFetchMethod(window.fetch);
    var checkedState = localStorage.getItem('theme-switch');
    if (checkedState === 'true') {
        $('#theme-switch').prop('checked', true);
        DarkReader.enable();
    } else if (checkedState === 'false') {
        $('#theme-switch').prop('checked', false);
        DarkReader.disable();
    } else {
        DarkReader.enable();
    }
    $('#theme-switch').change(function() {
        this.checked ? DarkReader.enable() : DarkReader.disable();
        localStorage.setItem('theme-switch', this.checked);
    });
});

app_templates_content_scripts_site.html.twig

{# This file should contain the list of javascript script to include site wide. It will be injected into the base template #}
{# The `app` entry from Webpack config is loaded here #}
{% block scripts_site %}
    {{ encore_entry_script_tags('app') }}
    {{ encore_entry_script_tags('darkreader') }}
{% endblock %}

package.json

{
    "dependencies": {
        "@userfrosting/sprinkle-admin": "~5.1.0",
        "@userfrosting/theme-adminlte": "~5.1.0",
        "darkreader": "^4.9.83"
    },
    "devDependencies": {
        "@symfony/webpack-encore": "^4.4.0",
        "file-loader": "^6.2.0",
        "sass": "^1.51.0",
        "webpack-notifier": "^1.14.1"
    },
    "scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production --progress"
    }
}

webpack.entries.js

/*
 * ENTRY CONFIG
 *
 * Add 1 entry for each "page" of your app
 * (including one that's included on every page - e.g. "app")
 *
 * Each entry will result in one JavaScript file (e.g. app.js)
 * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
 */

module.exports = {
    app: "./app/assets/app.js",
    darkreader: "./app/assets/darkreader.js",
};