From bc5ceda9378cf53b528bd9c31789771ed50733a6 Mon Sep 17 00:00:00 2001
From: Nilesh <19304+nileshtrivedi@users.noreply.github.com>
Date: Fri, 3 Jun 2022 20:52:59 +0100
Subject: [PATCH] WIP #19 Theme randomizer

---
 src/tailwindui/AppShell.svelte | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/tailwindui/AppShell.svelte b/src/tailwindui/AppShell.svelte
index 35d46f9..2d6f7aa 100644
--- a/src/tailwindui/AppShell.svelte
+++ b/src/tailwindui/AppShell.svelte
@@ -5,6 +5,21 @@
     export let showNotificationBell = 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>
 
 <div >
@@ -82,6 +97,7 @@
         <div class="mt-5 flex-1 flex flex-col bg-lightTertiary text-lightBg">
           <nav class="flex-1 pb-4 space-y-1">
             <slot name="nav"></slot>
+            <button on:click={themeRandomize}>Randomize</button>
           </nav>
         </div>
       </div>