Add dark mode to generated website

akd-io · akd-io · commit 186c9e8a159d · 2023-06-14T18:32:35.000+02:00
diff --git a/packages/create-next-stack/prod-assets/templates/LandingPage/LandingPageTemplate.module.css b/packages/create-next-stack/prod-assets/templates/LandingPage/LandingPageTemplate.module.css
@@ -1,5 +1,10 @@
 .landingPageTemplate {
   color: black;
+  background-color: white;
+  @media (prefers-color-scheme: dark) {
+    color: #eee;
+    background-color: hsl(0, 0%, 20%);
+  }
 }
 
 .textGradient {
diff --git a/packages/create-next-stack/prod-assets/templates/LandingPage/components/InlineCode.module.css b/packages/create-next-stack/prod-assets/templates/LandingPage/components/InlineCode.module.css
@@ -6,4 +6,7 @@
     Bitstream Vera Sans Mono, Courier New, monospace;
   font-size: 0.8em;
   background-color: hsl(0, 0%, 95%);
+  @media (prefers-color-scheme: dark) {
+    background-color: hsl(0, 0%, 25%);
+  }
 }
diff --git a/packages/create-next-stack/prod-assets/templates/LandingPage/components/TechnologyGridItem.module.css b/packages/create-next-stack/prod-assets/templates/LandingPage/components/TechnologyGridItem.module.css
@@ -7,6 +7,10 @@
   gap: 20px;
 
   box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.15);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: hsl(0, 0%, 25%);
+  }
 }
 
 .linksContainer {

Original file line number	Diff line number	Diff line change
`@@ -6,4 +6,7 @@`
`6`	`6`	`Bitstream Vera Sans Mono, Courier New, monospace;`
`7`	`7`	`font-size: 0.8em;`
`8`	`8`	`background-color: hsl(0, 0%, 95%);`
	`9`	`+ @media (prefers-color-scheme: dark) {`
	`10`	`+ background-color: hsl(0, 0%, 25%);`
	`11`	`+ }`
`9`	`12`	`}`
Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,10 @@`
`7`	`7`	`gap: 20px;`
`8`	`8`
`9`	`9`	`box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.15);`
	`10`	`+`
	`11`	`+ @media (prefers-color-scheme: dark) {`
	`12`	`+ background-color: hsl(0, 0%, 25%);`
	`13`	`+ }`
`10`	`14`	`}`
`11`	`15`
`12`	`16`	`.linksContainer {`