From d6b37d32d9eca736b20e6b2afd0f930f214ab973 Mon Sep 17 00:00:00 2001
From: DarkCat09 <a.chechkenev@yandex.ru>
Date: Mon, 24 Jul 2023 20:32:26 +0400
Subject: [PATCH] Async LessCSS loading; changed colors

---
 src/components/ThemeModal.astro | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/components/ThemeModal.astro b/src/components/ThemeModal.astro
index b1cfb56..89e7c66 100644
--- a/src/components/ThemeModal.astro
+++ b/src/components/ThemeModal.astro
@@ -27,10 +27,11 @@ import TextBox from "./TextBox.astro";
             <TextBox id="accent" label="Accent color" placeholder="HEX (#fff)" regex="#?(?:[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})" size={7} />
             <Input label="">
                 <span class="color-btns" slot="after">
-                    <ColorBtn name="red" hex="#ba505a" />
-                    <ColorBtn name="yellow" hex="#b9aa50" />
-                    <ColorBtn name="green" hex="#5bab65" />
-                    <ColorBtn name="blue" hex="#6570d6" />
+                    <ColorBtn name="maroon" hex="#d15a63" />
+                    <ColorBtn name="coffee" hex="#aa705b" />
+                    <ColorBtn name="grass" hex="#5bab65" />
+                    <ColorBtn name="mint" hex="#449c80" />
+                    <ColorBtn name="indigo" hex="#6570d6" />
                 </span>
             </Input>
         </fieldset>
@@ -52,6 +53,10 @@ import TextBox from "./TextBox.astro";
 
     .color-btns {
         margin-top: 0.2rem;
+
+        display: flex;
+        flex-direction: row;
+        column-gap: 0.25rem;
     }
 
     .hint {
@@ -234,12 +239,21 @@ import TextBox from "./TextBox.astro";
             lessStyles.type = 'text/css'
             lessStyles.href = '/theme_dyn.less'
             document.head.append(lessStyles)
+            // Create script element for Less config
+            const lessConfig = document.createElement('script')
+            lessConfig.innerText = 'less = ' + JSON.stringify({
+                env: 'production',
+                async: true,  // really important for slow internet connection
+                fileAsync: true,
+                errorReporting: 'console',
+            })
             // Create LessCSS script element
             const lessScript = document.createElement('script')
             lessScript.src = '/less.min.js'
             // Modify variables when less is loaded
             lessScript.addEventListener('load', reloadTheme)
             // Load LessCSS script
+            document.head.append(lessConfig)
             document.head.append(lessScript)
         }
         else