Simplify dynamic styles

agatemosu · Jul 30, 2024 · 5c78bf9 · 5c78bf9
1 parent 499d626
commit 5c78bf9
Show file tree

Hide file tree

Showing 4 changed files with 3 additions and 11 deletions.
diff --git 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
@@ -227,13 +227,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 → styles/dynamic-styles.css b/styles/square-img.css → 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
@@ -1,5 +1,6 @@
 @import "./blackout.css";
 @import "./buttons.css";
+@import "./dynamic-styles.css";
 @import "./export.css";
 @import "./pickr.css";
 @import "./tier-label.css";