Hi everyone,
Does anyone know how can I use two different css external files in order to let users choose which theme color they want? Like a light or dark theme for the app?
The basics of it are here, add button to page that loads external stylesheet:
Taken partially from this answer, https://support.knack.com/hc/en-us/community/posts/220703928-How-to-Load-an-External-Style-Sheet.
Issues that need to be addressed with this code
- If you come back to the page, it adds it again, so you need to add some code to check if this button does not exist, then add button to page.
- Also, a lot of Knack styles are taking precedence over this external, check into css priority as well.
- Switch it up to toggle two alternate stylesheets
$(document).on('knack-scene-render.scene_149', function(event, scene) {
// 1. Create the button
var button = document.createElement("button");
button.innerHTML = "Add stylesheet";
var body = document.getElementsByTagName("body")[0];
body.appendChild(button);
button.addEventListener ("click", function() {
var path = "https://maps.hayward-ca.gov/resources/css/";;
var style = document.createElement( 'link' );
style.rel = 'stylesheet';
style.type = 'text/css';
style.href = path + '/test.css';
document.getElementsByTagName( 'head' )[0].appendChild( style );
});
});
I wrote a post about adding Dark Mode / Dark Theme to your Knack app. Hope it helps someone!