src/index.css

@@ -4,16 +4,16 @@
 @import "./styles/animations.css";
 
 :root {
-  /* @colorThemes/lightTheme/grayBlueAccent */
-  --background: #f5f4ef;
-  --card: #dad6cd;
-  --foreground: #2a2928;
-  --primary-cta: #2a2928;
-  --primary-cta-text: #f5f4ef;
-  --secondary-cta: #ecebea;
-  --secondary-cta-text: #2a2928;
-  --accent: #ffffff;
-  --background-accent: #c6b180;
+  /* @colorThemes/darkTheme/redAccent */
+  --background: #1A1A1A;
+  --card: #2A2A2A;
+  --foreground: #F5F5F5;
+  --primary-cta: #E53E3E;
+  --primary-cta-text: #FFFFFF;
+  --secondary-cta: #3A3A3A;
+  --secondary-cta-text: #F5F5F5;
+  --accent: #E53E3E;
+  --background-accent: #C53030;
 
   /* @layout/border-radius/rounded */
   --radius: 9999px;
@@ -124,7 +124,7 @@
 
 * {
   scrollbar-width: thin;
-  scrollbar-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 0);
+  scrollbar-color: var(--foreground) transparent;
 }
 
 html {
@@ -161,7 +161,7 @@ h6 {
 /* WEBILD_PRIMARY_BUTTON */
 /* @primaryButtons/diagonal-gradient */
 .primary-button {
-  background: linear-gradient(to bottom right, color-mix(in srgb, var(--color-primary-cta) 80%, transparent), var(--color-foreground));
+  background: linear-gradient(to bottom right, var(--color-primary-cta), var(--color-background-accent));
   box-shadow: 2.10837px 3.16256px 9.48767px color-mix(in srgb, var(--color-accent) 30%, transparent);
 }