From f7657546b94a58c814a7226f6df9bb935b7b8368 Mon Sep 17 00:00:00 2001
From: agatemosu <agaatem@outlook.com>
Date: Tue, 30 Jul 2024 13:08:55 +0200
Subject: [PATCH] Simplify dynamic styles

---
 index.html                                    | 3 ---
 script.js                                     | 9 +--------
 styles/{square-img.css => dynamic-styles.css} | 2 +-
 styles/main.css                               | 1 +
 4 files changed, 3 insertions(+), 12 deletions(-)
 rename styles/{square-img.css => dynamic-styles.css} (72%)

diff --git a/index.html b/index.html
index 29e716a..3fc4f7c 100644
--- a/index.html
+++ b/index.html
@@ -7,10 +7,7 @@
 		<link rel="icon" href="./assets/icon.svg" />
 		<link rel="stylesheet" href="./styles/main.css" />
 		<script src="./script.js" type="module"></script>
-
 		<link rel="preload" href="./assets/check.svg" as="image" />
-		<style id="dynamic-styles"></style>
-
 		<link
 			rel="stylesheet"
 			href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/monolith.min.css"
diff --git a/script.js b/script.js
index 3f03c87..9d26e43 100644
--- a/script.js
+++ b/script.js
@@ -12,7 +12,6 @@ const clearColor = "#778899";
 
 const mainContainer = document.querySelector("main");
 const imagesBar = document.querySelector("#images-bar");
-const dynamicStyles = document.querySelector("#dynamic-styles");
 const exportContainer = document.querySelector("#export-container");
 const exportedImage = document.querySelector("#exported-image");
 const blackout = document.querySelector("#blackout");
@@ -227,13 +226,7 @@ function addContainerDrag(container) {
 }
 
 function dynamicStyle(checkbox) {
-	const importText = `@import "./styles/${checkbox.id}.css";`;
-
-	if (checkbox.checked) {
-		dynamicStyles.innerHTML += importText;
-	} else {
-		dynamicStyles.innerHTML = dynamicStyles.innerHTML.replace(importText, "");
-	}
+	document.body.classList.toggle(checkbox.id, checkbox.checked);
 }
 
 async function exportImage() {
diff --git a/styles/square-img.css b/styles/dynamic-styles.css
similarity index 72%
rename from styles/square-img.css
rename to styles/dynamic-styles.css
index 25504d6..4482190 100644
--- a/styles/square-img.css
+++ b/styles/dynamic-styles.css
@@ -1,4 +1,4 @@
-.tier-element {
+body.square-img .tier-element {
 	background-position: center;
 	background-size: cover;
 	width: 80px;
diff --git a/styles/main.css b/styles/main.css
index 680a656..3d44326 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -1,5 +1,6 @@
 @import "./blackout.css";
 @import "./buttons.css";
+@import "./dynamic-styles.css";
 @import "./export.css";
 @import "./pickr.css";
 @import "./tier-label.css";