New themes, etc

Cattn · Jul 2, 2024 · 3958067 · 3958067
1 parent afe9be2
commit 3958067
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 5 deletions.
diff --git a/src/app.pcss b/src/app.pcss
@@ -30,7 +30,7 @@
     --foreground: 210 20% 98%;
     --card: 224 71.4% 4.1%;
     --card-foreground: 210 20% 98%;
-    --popover: 224 71.4% 1.1%;
+    --popover: 224 71.4% 2.4%;
     --popover-foreground: 210 20% 98%;
     --primary: 210 20% 98%;
     --primary-foreground: 220.9 39.3% 11%;
@@ -51,7 +51,7 @@
     --foreground: 270 20% 98%;
     --card: 270 50% 5%;
     --card-foreground: 270 20% 98%;
-    --popover: 270 50% 2%;
+    --popover: 270 50% 2.4%;
     --popover-foreground: 270 20% 98%;
     --primary: 270 20% 98%;
     --primary-foreground: 220.9 39.3% 11%;
@@ -67,7 +67,49 @@
     --input: 240 40% 20%;
     --ring: 240 15% 84%;
 }
+html[data-theme='green'] {
+  --background: 224 71.4% 4.1%;
+  --foreground: 120 70% 40%;
+  --card: 180 77.4% 4.1%;
+  --card-foreground: 120 70% 40%;
+  --popover: 200 60% 3.3%;;
+  --popover-foreground: 120 70% 40%;
+  --primary: 120 70% 40%;
+  --primary-foreground: 220.9 39.3% 11%;
+  --secondary: 90 70% 20%;
+  --secondary-foreground: 120 70% 40%;
+  --muted: 90 70% 20%;
+  --muted-foreground: 90 70% 70%;
+  --accent: 90 70% 20%;
+  --accent-foreground: 120 70% 40%;
+  --destructive: 0 72.22% 50.59%;
+  --destructive-foreground: 210 20% 98%;
+  --border: 215 27.9% 30.9%;
+  --input: 215 27.9% 16.9%;
+  --ring: 216 12.2% 83.9%;
+}
 
+html[data-theme='oldGreen'] {
+  --background: 120 70% 40%;
+  --foreground: 120 70% 0%;
+  --card: 120 70% 20%;
+  --card-foreground: 120 70% 0%;
+  --popover: 120 70% 20%;
+  --popover-foreground: 120 70% 0%;
+  --primary: 120 70% 0%;
+  --primary-foreground: 120 70% 100%;
+  --secondary: 90 70% 20%;
+  --secondary-foreground: 120 70% 0%;
+  --muted: 80 70% 20%;
+  --muted-foreground: 120 70% 70%;
+  --accent: 100 70% 20%;
+  --accent-foreground: 120 70% 0%;
+  --destructive: 120 70% 20%;
+  --destructive-foreground: 120 70% 100%;
+  --border: 120 70% 20%;
+  --input: 120 70% 20%;
+  --ring: 120 70% 20%;
+}
 }
 @layer base {
   * {

diff --git a/src/lib/images/themes/3.png b/src/lib/images/themes/3.png
diff --git a/src/routes/options/theme/+page.svelte b/src/routes/options/theme/+page.svelte
@@ -31,7 +31,7 @@
           <div class="p-1">
             <Card.Root>
               <Card.Content
-                class="flex-auto items-center justify-center p-6"
+                class="flex-auto items-center justify-center p-10 h-96 w-full rounded-md object-cover mb-5"
               >
               <img src={
                 i === 0 ? defaultTheme :
@@ -41,7 +41,7 @@
                 i === 4 ? sunsetTheme :
                 i === 5 ? synthTheme :
                 defaultTheme
-                } alt="Gray by Drew Beamer" class="h-full w-full rounded-md" />
+                } alt="Gray by Drew Beamer" class="h-full p-2 w-full rounded-md object-cover" />
                 <div class="flex justify-center mt-2">
                     <Button on:click={() => changeTheme(i === 0 ? "dark" : i === 1 ? "green" : i === 2 ? "oldGreen" : i === 3 ? "red" : i === 4 ? "sunset" : "synth")}>Change Theme</Button>
                 </div>
@@ -54,4 +54,4 @@
     <Carousel.Previous />
     <Carousel.Next />
   </Carousel.Root>
-</div>
+</div>