DarkCat09/dc09.ru
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Async LessCSS loading; changed colors

Browse source
This commit is contained in:
DarkCat09 2023-07-24 20:32:26 +04:00
parent 623b11ac65
commit d6b37d32d9
1 changed files with 18 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/components/ThemeModal.astro
View file

@ -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} /> <TextBox id="accent" label="Accent color" placeholder="HEX (#fff)" regex="#?(?:[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})" size={7} />
<Input label=""> <Input label="">
<span class="color-btns" slot="after"> <span class="color-btns" slot="after">
<ColorBtn name="red" hex="#ba505a" /> <ColorBtn name="maroon" hex="#d15a63" />
<ColorBtn name="yellow" hex="#b9aa50" /> <ColorBtn name="coffee" hex="#aa705b" />
<ColorBtn name="green" hex="#5bab65" /> <ColorBtn name="grass" hex="#5bab65" />
<ColorBtn name="blue" hex="#6570d6" /> <ColorBtn name="mint" hex="#449c80" />
<ColorBtn name="indigo" hex="#6570d6" />
</span> </span>
</Input> </Input>
</fieldset> </fieldset>
@ -52,6 +53,10 @@ import TextBox from "./TextBox.astro";
.color-btns { .color-btns {
margin-top: 0.2rem; margin-top: 0.2rem;
display: flex;
flex-direction: row;
column-gap: 0.25rem;
} }
.hint { .hint {
@ -234,12 +239,21 @@ import TextBox from "./TextBox.astro";
lessStyles.type = 'text/css' lessStyles.type = 'text/css'
lessStyles.href = '/theme_dyn.less' lessStyles.href = '/theme_dyn.less'
document.head.append(lessStyles) 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 // Create LessCSS script element
const lessScript = document.createElement('script') const lessScript = document.createElement('script')
lessScript.src = '/less.min.js' lessScript.src = '/less.min.js'
// Modify variables when less is loaded // Modify variables when less is loaded
lessScript.addEventListener('load', reloadTheme) lessScript.addEventListener('load', reloadTheme)
// Load LessCSS script // Load LessCSS script
document.head.append(lessConfig)
document.head.append(lessScript) document.head.append(lessScript)
} }
else else