kopia lustrzana https://github.com/learn-awesome/learndb
WIP #19 Theme randomizer
rodzic
4011bdaf60
commit
bc5ceda937
|
@ -5,6 +5,21 @@
|
||||||
export let showNotificationBell = false;
|
export let showNotificationBell = false;
|
||||||
export let showProfileMenu = false;
|
export let showProfileMenu = false;
|
||||||
|
|
||||||
|
const randint = (min, max) => min + Math.round(Math.random() * (max - min))
|
||||||
|
|
||||||
|
function themeRandomize(){
|
||||||
|
var hue = randint(0,360)
|
||||||
|
var saturation = randint(0,100)
|
||||||
|
var lightness = randint(0,100)
|
||||||
|
|
||||||
|
let primary = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
|
||||||
|
let opposite = `hsl(${(hue + 180) % 360}, ${saturation}%, ${100-lightness}%)`;
|
||||||
|
tailwind.config.theme.extend.colors.lightTertiary = primary;
|
||||||
|
tailwind.config.theme.extend.colors.lightBg = opposite;
|
||||||
|
console.log({primary});
|
||||||
|
console.log({opposite});
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div >
|
<div >
|
||||||
|
@ -82,6 +97,7 @@
|
||||||
<div class="mt-5 flex-1 flex flex-col bg-lightTertiary text-lightBg">
|
<div class="mt-5 flex-1 flex flex-col bg-lightTertiary text-lightBg">
|
||||||
<nav class="flex-1 pb-4 space-y-1">
|
<nav class="flex-1 pb-4 space-y-1">
|
||||||
<slot name="nav"></slot>
|
<slot name="nav"></slot>
|
||||||
|
<button on:click={themeRandomize}>Randomize</button>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Ładowanie…
Reference in New Issue