From 36fc730054c7c23df7cfe81770feff4b80e73d9e Mon Sep 17 00:00:00 2001
From: cssbubble <cssbubble@gmail.com>
Date: Tue, 14 Jun 2022 12:55:09 +0100
Subject: [PATCH] topic names in alphabetical order, course detail file
 deleted, minor changes

---
 src/AdvancedSearch.svelte     | 59 ++++++++++++++++++++++++++++++++---
 src/App.svelte                |  8 ++---
 src/AppShell.svelte           | 21 +++++--------
 src/BookCard.svelte           |  2 +-
 src/Bookmarks.svelte          |  2 +-
 src/CourseDetail.svelte       |  0
 src/FormatList.svelte         |  2 +-
 src/GenericCard.svelte        |  2 +-
 src/ItemDetail.svelte         |  3 +-
 src/NavButtonWithLabel.svelte |  4 +--
 src/Review.svelte             |  2 +-
 src/SearchForm.svelte         |  2 +-
 src/TopicMasonryGrid.svelte   | 18 +++++------
 templates/index.html          | 39 +++++++++++++++++++----
 14 files changed, 118 insertions(+), 46 deletions(-)
 delete mode 100644 src/CourseDetail.svelte

diff --git a/src/AdvancedSearch.svelte b/src/AdvancedSearch.svelte
index f83e5e5..f75cb2e 100644
--- a/src/AdvancedSearch.svelte
+++ b/src/AdvancedSearch.svelte
@@ -26,10 +26,10 @@
 
 
 <form class="hidden w-full md:pl-24 md:flex justify-center" on:submit|preventDefault>
-  <div class="fixed top-2">
-    <div class="transform overflow-hidden rounded-md bg-primary_light shadow-2xl ring-1 ring-black ring-opacity-5 transition-all w-96">
+  <div class="fixed top-2 w-full">
+    <div class="transform overflow-hidden rounded-md bg-primary_light shadow-2xl ring-1 ring-black ring-opacity-5 transition-all w-2/3 mx-auto">
       <sl-input 
-        placeholder="Search..." size="medium" clearable autofocus
+        placeholder="Search..." size="medium" clearable
         class="p-0"
         on:sl-input={e => query=e.target.value} 
         on:keydown={e => e.key === 'Escape' && resetQuery()} 
@@ -51,7 +51,58 @@
         {#if result_items.length > 0}
         <sl-menu-label class="bg-gray-200">Items</sl-menu-label>
           {#each result_items as item}
-            <sl-menu-item value="#/item/{item.rowid}">{item.name}</sl-menu-item>
+            <sl-menu-item value="#/item/{item.rowid}">{item.name}
+              {#each item.links.split(";") as type} 
+                  {#if type.split("|")[0] === 'book'}
+                  <sl-icon name="book" slot="suffix"></sl-icon>
+                  {/if}
+                  {#if type.split("|")[0] === 'video'}
+                  <sl-icon name="play-circle" slot="suffix"></sl-icon>
+                  {/if} 
+                  {#if type.split("|")[0] === 'audio'}
+                  <sl-icon name="headphones" slot="suffix"></sl-icon>
+                  {/if} 
+                  {#if type.split("|")[0] === 'article'}
+                  <sl-icon name="file-text" slot="suffix"></sl-icon>
+                  {/if}
+                  {#if type.split("|")[0] === 'software'}
+                  <sl-icon name="app" slot="suffix"></sl-icon>
+                  {/if} 
+                  {#if type.split("|")[0] === 'blogs'}
+                  <span slot="suffix">b</span>
+                  {/if}
+                  {#if type.split("|")[0] === 'forums'}
+                  <sl-icon name="chat-dots" slot="suffix"></sl-icon>
+                  {/if}
+                  {#if type.split("|")[0] === 'cheatsheets'}
+                  <sl-icon name="list-columns-reverse" slot="suffix"></sl-icon>
+                  {/if}
+                  {#if type.split("|")[0] === 'code'}
+                  <sl-icon name="code" slot="suffix"></sl-icon>
+                  {/if}
+                  {#if type.split("|")[0] === 'conferences'}
+                  <sl-icon name="people" slot="suffix"></sl-icon>
+                  {/if}
+                  {#if type.split("|")[0] === 'course'}
+                  <sl-icon name="lightbulb" slot="suffix"></sl-icon>
+                  {/if}               
+                  {#if type.split("|")[0] === 'flashcard'}
+                  <sl-icon name="postcard" slot="suffix"></sl-icon>
+                  {/if}
+                  {#if type.split("|")[0] === 'games'}
+                  <sl-icon name="controller" slot="suffix"></sl-icon>
+                  {/if}
+                  {#if type.split("|")[0] === 'infographics'}
+                  <sl-icon name="images" slot="suffix"></sl-icon>
+                  {/if}
+                  {#if type.split("|")[0] === 'people'}
+                  <sl-icon name="person-circle" slot="suffix"></sl-icon>
+                  {/if}
+                  {#if type.split("|")[0] === 'wiki'}
+                  <sl-icon name="globe2" slot="suffix"></sl-icon>
+                  {/if}
+                {/each}
+            </sl-menu-item>
           {/each}
         {/if}
       </sl-menu>
diff --git a/src/App.svelte b/src/App.svelte
index db92188..c09e414 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -112,20 +112,20 @@
             <ViewGridIcon class=" flex-shrink-0 h-6 w-6"/>
         </NavButtonWithLabel>
 
-        <a href="#/randomtopic" on:click={getRandomTopicName} class={(currentView === "/randomtopic" ? 'text-secondary dark:text-primary_light' : '') + " w-full group flex justify-start gap-3 items-center py-5 pl-4 text-sm font-medium"}>
+        <a href="#/randomtopic" on:click={getRandomTopicName} class={(currentView === "/randomtopic" ? 'text-secondary' : '') + " w-full group flex justify-start gap-3 items-center py-5 pl-4 text-sm font-medium"}>
             <GiftIcon class=" flex-shrink-0 h-6 w-6"/>
             <div class="flex flex-col items-start">
                 <h3 class="text-center">Random Topic</h3>
-                <div class={(currentView === "/randomtopic" ? 'bg-secondary w-full dark:bg-primary_light' : '') + " w-5 mt-0.25 h-0.5 bg-primary dark:bg-neutral_light group-hover:w-full ease-in-out duration-300"}></div>
+                <div class={(currentView === "/randomtopic" ? 'bg-secondary w-full' : '') + " w-5 mt-0.25 h-0.5 bg-primary group-hover:w-full ease-in-out duration-300"}></div>
             </div>
             
         </a>
 
-        <a href="#/randomitem" on:click={getRandomItemId} class={(currentView === "/randomitem" ? 'text-secondary dark:text-primary_light' : '') + "  w-full group flex justify-start gap-3 items-center py-5 pl-4 text-sm font-medium"}>
+        <a href="#/randomitem" on:click={getRandomItemId} class={(currentView === "/randomitem" ? 'text-secondary' : '') + "  w-full group flex justify-start gap-3 items-center py-5 pl-4 text-sm font-medium"}>
             <GiftIcon class=" flex-shrink-0 h-6 w-6"/>
             <div class="flex flex-col items-start">
                 <h3 class="text-center">Random Item</h3>
-                <div class={(currentView === "/randomitem" ? 'bg-secondary w-full dark:bg-primary_light' : '') + " w-5 mt-0.25 h-0.5 bg-primary dark:bg-neutral_light group-hover:w-full ease-in-out duration-300"}></div>
+                <div class={(currentView === "/randomitem" ? 'bg-secondary w-full' : '') + " w-5 mt-0.25 h-0.5 bg-primary group-hover:w-full ease-in-out duration-300"}></div>
             </div>
             
         </a>
diff --git a/src/AppShell.svelte b/src/AppShell.svelte
index 202bc56..f2229d1 100644
--- a/src/AppShell.svelte
+++ b/src/AppShell.svelte
@@ -23,22 +23,15 @@
       tailwind.config.theme.extend.colors.secondary = `hsl(${hues[4]}, ${saturation}%, ${lightness}%)`;
       tailwind.config.theme.extend.colors.lightGradOne = `hsl(${hues[5]}, ${saturation}%, ${lightness}%)`;
       tailwind.config.theme.extend.colors.lightGradTwo = `hsl(${hues[6]}, ${saturation}%, ${lightness}%)`;
-
-      tailwind.config.theme.extend.colors.darkPrimary = `hsl(${(hues[0] + 180) % 360}, ${saturation}%, ${lightness}%)`;
-      tailwind.config.theme.extend.colors.darkSecondary = `hsl(${(hues[1] + 180) % 360}, ${saturation}%, ${lightness}%)`;
-      tailwind.config.theme.extend.colors.darkTertiary = `hsl(${(hues[2] + 180) % 360}, ${saturation}%, ${lightness}%)`;
-      tailwind.config.theme.extend.colors.darkBg = `hsl(${(hues[3] + 180) % 360}, ${saturation}%, ${lightness}%)`;
-      tailwind.config.theme.extend.colors.darkPrimCont = `hsl(${(hues[4] + 180) % 360}, ${saturation}%, ${lightness}%)`;
-      tailwind.config.theme.extend.colors.darkButtonBg = `hsl(${(hues[5] + 180) % 360}, ${saturation}%, ${lightness}%)`;
-      tailwind.config.theme.extend.colors.dark = `hsl(${(hues[6] + 180) % 360}, ${saturation}%, ${lightness}%)`;
-
+      tailwind.config.theme.extend.colors.primary_medium = `hsl(${hues[6]}, ${saturation}%, ${lightness}%)`;
     }
-
+    
+    
 </script>
 
 <div >
   <!-- sticky top bar  -->
-  <div class="sticky top-0 z-50 flex-shrink-0 flex items-center text-primary_light bg-primary shadow h-16">
+  <div class="sticky top-0 z-50 flex-shrink-0 flex items-center text-neutral-50 bg-blue-900 shadow h-16">
     <div class="flex items-center">
       {#if isNavDrawerOpen == false}
       <button on:click={e => isNavDrawerOpen = true} type="button" class="px-4 border-r border-primary_light text-primary_light focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary md:hidden">
@@ -56,7 +49,7 @@
 
       <div class=" py-3 flex flex-col items-center flex-shrink-0 px-4 tracking-wider font-bold group">
         <a href="/" class="">LearnAwesome</a>
-        <div class="w-1/5 mt-0.25 h-0.5 bg-primary_light group-hover:w-full ease-in-out duration-300"></div>
+        <div class="w-1/5 mt-0.25 h-0.5 bg-neutral-50 group-hover:w-full ease-in-out duration-300"></div>
       </div>
     </div>
     
@@ -94,7 +87,7 @@
 
     <div class="fixed inset-y-0 left-0 flex z-50 mt-12">
       <div class="relative flex-1 flex flex-col w-64 w-full pb-4">
-        <div class="md:ml-6 flex-1 h-0 overflow-y-auto bg-primary_light text-primary dark:from-neutral_dark dark:to-neutral_dark dark:text-primary_light">
+        <div class="md:ml-6 flex-1 h-0 overflow-y-auto bg-primary_light text-primary">
           <nav class="px-4 space-y-1" on:click={e => isNavDrawerOpen = false}>
             <slot name="nav"></slot>
             {#if window.location.href.startsWith('http://127.0.0.1')}
@@ -115,7 +108,7 @@
         <a href="/" class="">LearnAwesome</a>
         <div class="w-1/5 mt-0.25 h-0.5 bg-primary group-hover:w-full ease-in-out duration-300"></div>
       </div> -->
-      <div class="mt-12 flex-1 flex flex-col bg-primary_light text-primary dark:from-neutral_dark dark:to-neutral_dark dark:text-primary_light">
+      <div class="mt-12 flex-1 flex flex-col bg-primary_light text-primary">
         <nav class="flex-1 pb-4 space-y-1 pt-5">
           <slot name="nav"></slot>
           {#if window.location.href.startsWith('http://127.0.0.1')}
diff --git a/src/BookCard.svelte b/src/BookCard.svelte
index 3a8200d..b2ef3c4 100644
--- a/src/BookCard.svelte
+++ b/src/BookCard.svelte
@@ -9,7 +9,7 @@
     <img class=" h-36 w-24 md:h-56 md:w-40 shrink-0" src={item.image || randomCover(item.iid)} alt="{item.name}"/>
   
     {#if item.rating}
-    <h1 class="text-sm md:text-lg font-semibold p-2 text-white tracking-wider">
+    <h1 class="text-sm md:text-lg font-semibold p-2 text-primary_light tracking-wider">
       <sl-rating style="--symbol-size: 0.80 rem;" readonly precision="0.1" value={item.rating}></sl-rating>
     </h1>
     {/if}
diff --git a/src/Bookmarks.svelte b/src/Bookmarks.svelte
index 87e4a53..6c0d201 100644
--- a/src/Bookmarks.svelte
+++ b/src/Bookmarks.svelte
@@ -23,6 +23,6 @@
 
 </script>
 
-<h1 class="my-2 text-lightButton2 dark:text-darkButton2">{kind == 0 ? 'Want to learn' : 'Finished learning'}</h1>
+<h1 class="my-2">{kind == 0 ? 'Want to learn' : 'Finished learning'}</h1>
 
 <ItemList {items}/>
\ No newline at end of file
diff --git a/src/CourseDetail.svelte b/src/CourseDetail.svelte
deleted file mode 100644
index e69de29..0000000
diff --git a/src/FormatList.svelte b/src/FormatList.svelte
index 2e23f7c..2000dee 100644
--- a/src/FormatList.svelte
+++ b/src/FormatList.svelte
@@ -3,7 +3,7 @@
   
 </script>
 
-<div class=" mx-auto grid pl-items-center gap-3 sm:grid-cols-3 grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 min-h-screen">
+<div class=" mx-auto grid place-items-center gap-3 sm:grid-cols-3 grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 min-h-screen">
   {#each formats as format}
   <a href="#/format/{format.id}" class="w-32 h-28 lg:w-44 relative flex flex-col rounded-lg shadow-md overflow-hidden transform transition ease-out duration-300 hover:scale-105 ">
       <div class="flex-shrink-0 relative">
diff --git a/src/GenericCard.svelte b/src/GenericCard.svelte
index e9c5a4c..bbf86fa 100644
--- a/src/GenericCard.svelte
+++ b/src/GenericCard.svelte
@@ -2,7 +2,7 @@
   export let item: {name: string, creators: string, rowid: number};
 </script>
 
-<a class="flex flex-wrap p-2 sm:p-8 justify-between rounded break-inside-avoid sm:w-64 max-w-sm bg-white text-primary dark:bg-neutral_dark dark:text-primary_light hover:rounded-3xl border border-secondary ease-in-out duration-300" href="#/item/{item.rowid}">
+<a class="flex flex-wrap p-2 sm:p-8 justify-between rounded break-inside-avoid sm:w-64 max-w-sm bg-primary_light text-primary hover:rounded-3xl border border-secondary ease-in-out duration-300" href="#/item/{item.rowid}">
   <div class="flex flex-col justify-between">
     <div class="flex flex-col">
       <strong class="font-extrabold text-sm sm:text-lg">{item.name}</strong>
diff --git a/src/ItemDetail.svelte b/src/ItemDetail.svelte
index 232444f..f7a43c5 100644
--- a/src/ItemDetail.svelte
+++ b/src/ItemDetail.svelte
@@ -180,10 +180,11 @@ import AdvancedSearch from "./AdvancedSearch.svelte";
             </div>
           </div>
         </div>
-        <hr class="bg-neutral_light"/>
+        
 
         <!-- Description  -->
         {#if item.description}
+        <hr class="bg-neutral_light"/>
         <section class="my-8">
           <h2 class="font-bold text-lg">Description</h2>
           <p class="mt-4 tracking-wide">{item.description}</p>
diff --git a/src/NavButtonWithLabel.svelte b/src/NavButtonWithLabel.svelte
index 07a7c6b..2c56248 100644
--- a/src/NavButtonWithLabel.svelte
+++ b/src/NavButtonWithLabel.svelte
@@ -7,13 +7,13 @@
 </script>
 
 
-<a href={target} target={target.startsWith('http') ? '_blank' : ''} class={(isActive ? 'text-secondary dark:text-primary_light' : '') + " sw-full group flex flex-col py-5 pl-4 text-sm font-medium"}>
+<a href={target} target={target.startsWith('http') ? '_blank' : ''} class={(isActive ? 'text-secondary ' : '') + " sw-full group flex flex-col py-5 pl-4 text-sm font-medium"}>
   <div class="flex justify-start gap-3 items-center">
     <slot></slot>
   
     <div class="flex flex-col items-start">
       <h3 class="text-center"> {label}</h3>
-      <div class={(isActive ? 'bg-secondary w-full dark:bg-primary_light ' : '') + " w-5 mt-0.25 h-0.5 bg-primary dark:bg-neutral_light group-hover:w-full ease-in-out duration-300"}></div>
+      <div class={(isActive ? 'bg-secondary w-full ' : '') + " w-5 mt-0.25 h-0.5 bg-primary group-hover:w-full ease-in-out duration-300"}></div>
     </div>
   </div>  
 </a>
diff --git a/src/Review.svelte b/src/Review.svelte
index e094fe1..ca9f3d6 100644
--- a/src/Review.svelte
+++ b/src/Review.svelte
@@ -10,7 +10,7 @@
     overflow: hidden;
   }
 </style>
-<article class="px-3 py-4 bg-lightSecondary2 text-lightSecondary1 dark:bg-darkSecondary2 dark:text-darkSecondary1 rounded-lg text-xs w-48 max-w-sm shrink-0">
+<article class="px-3 py-4 bg-neutral_light text-neutral_dark rounded-lg text-xs w-48 max-w-sm shrink-0">
     <h3 class="font-semibold">{review.blurb.toString().slice(0,10)}...</h3>
     <p class="mt-2 line-clamp">{review.blurb}</p>
     <div class="mt-3">
diff --git a/src/SearchForm.svelte b/src/SearchForm.svelte
index b500feb..9aa942e 100644
--- a/src/SearchForm.svelte
+++ b/src/SearchForm.svelte
@@ -21,7 +21,7 @@
 
 </script>
 
-<div class="sticky z-10 top-16 lg:-ml-10 bg-gradient-to-r from-lightGradOne to-lightGradTwo dark:bg-gradient-to-r dark:from-neutral_light dark:to-neutral_light rounded">
+<div class="sticky z-10 top-16 bg-gradient-to-r from-lightGradOne to-lightGradTwo rounded">
   <div class="relative pt-1">
     {#if  showForm == false}
     <div class="bg-primary rounded absolute top-0 right-0">
diff --git a/src/TopicMasonryGrid.svelte b/src/TopicMasonryGrid.svelte
index 871998e..cf657d6 100644
--- a/src/TopicMasonryGrid.svelte
+++ b/src/TopicMasonryGrid.svelte
@@ -98,21 +98,21 @@
   {#each [...map.entries()].sort((t1,t2) => (t1[0].sort_index || 100) - (t2[0].sort_index || 100)) as parent}
   {#if parent[0] !== 'Misc'}
     <a href={"#/topic/" + parent[0].name}>
-        <div class="rounded shadow-md p-4 break-inside-avoid mb-4 border border-secondary dark:border-primary_light bg-primary_light ease-in-out duration-300 hover:rounded-3xl dark:bg-neutral_light ">
+        <div class="rounded shadow-md p-4 break-inside-avoid mb-4 border border-secondary bg-primary_light ease-in-out duration-300 hover:rounded-3xl ">
             {#if typeof(parent[0]) == "string"}
             <span class="mt-1 p-1  font-extrabold text-lg text-primary underline">{ parent[0] }</span>
             {:else}
             <div class="group inline-flex">
-                <a href={"#/topic/" + parent[0].name}><span class="mt-1 p-1 text-primary font-extrabold text-lg dark:text-primary_light">{ format_topic_name(parent[0]) }</span>
-                    <div class="w-5 mt-0.25 h-0.5 ml-1 bg-primary dark:bg-lightGradOne group-hover:w-full ease-in-out duration-300"></div>
+                <a href={"#/topic/" + parent[0].name}><span class="mt-1 p-1 text-primary font-extrabold text-lg ">{ format_topic_name(parent[0]) }</span>
+                    <div class="w-5 mt-0.25 h-0.5 ml-1 bg-primary group-hover:w-full ease-in-out duration-300"></div>
                 </a>
             </div>
             
             {/if}
         
             <div class="mt-2 flex flex-wrap">
-            {#each parent[1].sort((t1,t2) => (t1.sort_index || 100) - (t2.sort_index || 100)) as child}
-                <a href={"#/topic/" + child.name} class="text-primary dark:text-lightGradOne no-underline hover:underline hover:underline-offset-2 px-2 ">{format_topic_name(child)}</a>
+            {#each parent[1].sort((t1,t2) => (t1.name.localeCompare(t2.name))) as child}
+                <a href={"#/topic/" + child.name} class="text-primary no-underline hover:underline hover:underline-offset-2 px-2 ">{format_topic_name(child)}</a>
             {/each}
             </div>    
         </div>
@@ -120,16 +120,16 @@
     {/if}
 
     {#if parent[0] == 'Misc'}
-    <div class="rounded-lg shadow-md p-4 break-inside-avoid mb-4 border border-secondary dark:border-primary_light bg-primary_light dark:bg-neutral_light ease-in-out duration-300 hover:rounded-3xl">
+    <div class="rounded-lg shadow-md p-4 break-inside-avoid mb-4 border border-secondary bg-primary_light  ease-in-out duration-300 hover:rounded-3xl">
         {#if typeof(parent[0]) == "string"}
-        <span class="mt-1 p-1  font-semibold text-lg text-primary dark:text-primary_light">{ parent[0] }</span>
+        <span class="mt-1 p-1  font-semibold text-lg text-primary ">{ parent[0] }</span>
         {:else}
-        <a href={"#/topic/" + parent[0].name}><span class="mt-1 p-1 text-primary font-extrabold text-lg  dark:text-primary_light">{ format_topic_name(parent[0]) }</span></a>
+        <a href={"#/topic/" + parent[0].name}><span class="mt-1 p-1 text-primary font-extrabold text-lg ">{ format_topic_name(parent[0]) }</span></a>
         {/if}
     
         <div class="mt-2 flex flex-wrap">
         {#each parent[1].sort((t1,t2) => (t1.sort_index || 100) - (t2.sort_index || 100)) as child}
-            <a href={"#/topic/" + child.name} class="text-primary dark:text-lightGradOne no-underline hover:underline hover:underline-offset-2 px-2 ">{format_topic_name(child)}</a>
+            <a href={"#/topic/" + child.name} class="text-primary no-underline hover:underline hover:underline-offset-2 px-2 ">{format_topic_name(child)}</a>
         {/each}
         </div>    
     </div>
diff --git a/templates/index.html b/templates/index.html
index a4c81e6..3155256 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -9,15 +9,15 @@
 				theme: {
 					extend: {
 						colors: {
-							primary: '#1E3A8A', //blue-900
+
+							primary: '#1e3a8a', //blue-900
 							primary_light: '#FAFAFA', //neutral-50
 							neutral_light: '#737373', // neutral-400
 							neutral_dark: '#262626', // neutral-800
 							secondary: '#6B21A8', // purple-800
-							primary_medium: '#60A5FA', //blue-400
-							//white: '#ffffff',
-							lightGradOne: '#DBEAFE', //blue-100
-							lightGradTwo: '#F3E8FF', //purple-100
+							// primary_medium: '#60A5FA', //blue-400
+							gradOne: '#DBEAFE', //blue-100
+							gradTwo: '#F3E8FF', //purple-100
 						},
 					},
 					fontFamily: {
@@ -26,6 +26,33 @@
 					}
 				}
 			}
+
+		function darkmode(){
+			return;
+      tailwind.config.theme.extend.colors.primary = '#787A91';
+      tailwind.config.theme.extend.colors.primary_light = '#262626';
+      tailwind.config.theme.extend.colors.neutral_light = '#737373';
+      tailwind.config.theme.extend.colors.neutral_dark = '#FAFAFA';
+      tailwind.config.theme.extend.colors.secondary = '#FAFAFA';
+      tailwind.config.theme.extend.colors.gradOne = '#444444';
+      tailwind.config.theme.extend.colors.gradTwo = '#171717';
+      tailwind.config.theme.extend.colors.primary_medium = '#141E61';
+    }
+
+		function lightmode(){
+      tailwind.config.theme.extend.colors.primary = '#1E3A8A';
+      tailwind.config.theme.extend.colors.primary_light = '#FAFAFA';
+      tailwind.config.theme.extend.colors.neutral_light = '#737373';
+      tailwind.config.theme.extend.colors.neutral_dark = '#262626';
+      tailwind.config.theme.extend.colors.secondary = '#6B21A8';
+      tailwind.config.theme.extend.colors.gradOne = '#DBEAFE';
+      tailwind.config.theme.extend.colors.gradTwo = '#F3E8FF';
+      tailwind.config.theme.extend.colors.primary_medium = '#60A5FA';
+    }
+
+		window.matchMedia("(prefers-color-scheme: dark)").matches ? darkmode() : lightmode();
+		
+		window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",   e => e.matches ? darkmode() : lightmode() );
 		</script>	
     <script src="/static/bundle.js" defer></script>
 		<link href="/static/bundle.css" rel="stylesheet" />
@@ -44,7 +71,7 @@
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 		<link href="https://fonts.googleapis.com/css2?family=Gentium+Plus:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> 
 	</head>
-	<body class="max-w-none mx-auto h-full bg-gradient-to-r from-lightGradOne to-lightGradTwo text-nutral_dark dark:bg-gradient-to-r dark:from-neutral_dark dark:to-neutral_dark dark:text-primary_light font-serif">
+	<body class="max-w-none mx-auto h-full bg-gradient-to-r from-gradOne to-gradTwo text-nutral_dark font-serif">
 		<div class="h-full" id="app"></div>
 	</body>
 </html>