theme-switch/index.js

Easily manage and switch themes

const firebase = require("firebase");

// const url = "http://localhost:5000/theme-switch/us-central1/api";
// const url = "https://us-central1-theme-switch.cloudfunctions.net/api";

var firebaseConfig = {
  apiKey: "AIzaSyD2bmDDpXR1SKJupQznpavT6yY5efulJTU",
  authDomain: "theme-switch.firebaseapp.com",
  databaseURL: "https://theme-switch.firebaseio.com",
  projectId: "theme-switch",
  storageBucket: "theme-switch.appspot.com",
  messagingSenderId: "531247626942",
  appId: "1:531247626942:web:948bcdbfcb269d4fcb3cef",
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);

const database = firebase.database();
let oldPaletteId = "";

function initialize() {
  let style = document.createElement("style");
  style.id = "theme-switch-style";
  document.head.appendChild(style);

  const loadedPaletteId = localStorage.getItem(
    "theme-switch-loaded-palette-id"
  );

  if (loadedPaletteId) {
    loadPalette(loadedPaletteId);
  }
}

function uninitialize() {
  const style = document.getElementById("theme-switch-style");
  style.innerHTML = "";
  localStorage.setItem("theme-switch-loaded-palette-id", "");
}

async function loadPalette(paletteId) {
  if (oldPaletteId) {
    database.ref(`palettes/${oldPaletteId}`).off();
  }

  oldPaletteId = paletteId;

  database.ref(`palettes/${paletteId}`).on("value", (snapshot) => {
    const palette = snapshot.val();

    if (!palette.palette) {
      console.log("Palette not found");
      return;
    }

    const style = document.getElementById("theme-switch-style");

    style.innerHTML = "";

    palette.palette.forEach((k) => {
      if (k["hover"]) {
        style.innerHTML += `
                  .${k["name"]}:hover {
                      ${k["type"]}: ${k["hex"]}
                  }
              `;
      } else {
        style.innerHTML += `
                  .${k["name"]} {
                      ${k["type"]}: ${k["hex"]}
                  }
              `;
      }
    });

    localStorage.setItem("theme-switch-loaded-palette-id", paletteId);
  });
}

module.exports = {
  initialize,
  uninitialize,
  loadPalette,
};