Reference : https://chat.userfrosting.com/channel/support?msg=SB3bnhPwZgScGSvLM
Start from a fresh install of the UF5.1 Skeleton
- package.json
- webpack.entries.js
- app/assets/darkreader.js
- app/templates/content/scripts/site.html.twig
Reference : https://chat.userfrosting.com/channel/support?msg=SB3bnhPwZgScGSvLM
Start from a fresh install of the UF5.1 Skeleton
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); | |
}); | |
}); |
{# 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 %} |
{ | |
"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" | |
} | |
} |
/* | |
* 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", | |
}; |