Add light theme to code-blocks

Author: vLuckyyy

app/globals.css

@@ -1,3 +1,98 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    border-color: hsl(var(--border));
+  }
+  body {
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+  }
+}
+
+code[class*="language-"],
+pre[class*="language-"] {
+  color: var(--prism-text, #24292e) !important;
+  background-color: var(--prism-bg, #ffffff) !important;
+  text-shadow: none !important;
+  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace !important;
+}
+
+code[class*="language-"] > span:not([class]) {
+  color: var(--prism-text, #24292e) !important;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  background: var(--prism-bg, #ffffff) !important;
+}
+
 @import '../node_modules/@south-paw/typeface-minecraft/index.css' layer(base);
 @import './prism-tomorrow.css' layer(base);
 @import 'tailwindcss';
@@ -275,3 +370,14 @@ code,
 .prose code {
   font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
 }
+
+code[class*="language-"],
+pre[class*="language-"] {
+  text-shadow: none !important;
+  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace !important;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  color: var(--prism-text) !important;
+}

app/prism-tomorrow.css

@@ -1,7 +1,44 @@
+/* Zdefiniowanie zmiennych dla obu motywów */
+:root {
+  /* Light Theme (GitHub Light style) - Wysoki kontrast */
+  --prism-bg: #ffffff;
+  --prism-text: #24292e;
+  --prism-comment: #6e7781;
+  --prism-punctuation: #24292e;
+  --prism-tag: #22863a;
+  --prism-attr-name: #6f42c1;
+  --prism-function-name: #6f42c1;
+  --prism-primitive: #005cc5;
+  --prism-property: #005cc5;
+  --prism-keyword: #d73a49;
+  --prism-string: #032f62;
+  --prism-operator: #d73a49;
+  --prism-variable: #e36209;
+}
+
+html.dark {
+  /* Dark Theme (Original Tomorrow Night) */
+  --prism-bg: #181c23;
+  --prism-text: #ccc;
+  --prism-comment: #999;
+  --prism-punctuation: #ccc;
+  --prism-tag: #e2777a;
+  --prism-attr-name: #e2777a;
+  --prism-function-name: #6196cc;
+  --prism-primitive: #f08d49;
+  --prism-property: #f8c555;
+  --prism-keyword: #cc99cd;
+  --prism-string: #7ec699;
+  --prism-operator: #67cdcc;
+  --prism-variable: #e2777a;
+}
+
+/* Zwiększona specyficzność selektorów */
 code[class*="language-"],
 pre[class*="language-"] {
-  color: #ccc;
-  background: #181c23 !important;
+  color: var(--prism-text) !important; /* Wymuszenie koloru podstawowego tekstu */
+  background: var(--prism-bg) !important;
+  text-shadow: none !important; /* Usunięcie cienia, który czasem powoduje rozmycie kolorów */
   font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
   font-size: 1em;
   text-align: left;
@@ -25,77 +62,83 @@ pre[class*="language-"] {
   padding: 1em;
   margin: 0.5em 0;
   overflow: auto;
-  background: #181c23 !important;
+  background: var(--prism-bg) !important;
 }
 
 :not(pre) > code[class*="language-"],
 pre[class*="language-"] {
-  background: #23272e;
+  background: var(--prism-bg);
 }
 
 :not(pre) > code[class*="language-"] {
   padding: 0.1em;
   border-radius: 0.3em;
   white-space: normal;
-  background: #181c23 !important;
+  background: var(--prism-bg) !important;
 }
 
 .token.comment,
 .token.block-comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
-  color: #999;
+  color: var(--prism-comment);
 }
 
 .token.punctuation {
-  color: #ccc;
+  color: var(--prism-punctuation);
 }
 
 .token.tag,
-.token.attr-name,
 .token.namespace,
 .token.deleted {
-  color: #e2777a;
+  color: var(--prism-tag);
+}
+
+.token.attr-name {
+  color: var(--prism-attr-name);
 }
 
 .token.function-name {
-  color: #6196cc;
+  color: var(--prism-function-name);
 }
 
 .token.boolean,
 .token.number,
 .token.function {
-  color: #f08d49;
+  color: var(--prism-primitive);
 }
 
 .token.property,
 .token.class-name,
 .token.constant,
 .token.symbol {
-  color: #f8c555;
+  color: var(--prism-property);
 }
 
 .token.selector,
 .token.important,
 .token.atrule,
 .token.keyword,
 .token.builtin {
-  color: #cc99cd;
+  color: var(--prism-keyword);
 }
 
 .token.string,
 .token.char,
 .token.attr-value,
-.token.regex,
+.token.regex {
+  color: var(--prism-string);
+}
+
 .token.variable {
-  color: #7ec699;
+  color: var(--prism-variable);
 }
 
 .token.operator,
 .token.entity,
 .token.url {
-  color: #67cdcc;
+  color: var(--prism-operator);
 }
 
 .token.important,