Different Css for different theme colors

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

  1. 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.
  2. Also, a lot of Knack styles are taking precedence over this external, check into css priority as well.
  3. 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];

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!