feat: fixed colours

Author: ikelaiah

layouts/index.html

@@ -12,13 +12,12 @@ <h1>Pascal - Readable, Reliable Programming</h1>
 <section class="content-section">
     <div class="container">
         <h2 class="section-title">Clean, Readable Code</h2>
-        <div class="highlight">
-            <pre class="chroma"><code><span class="k">program</span> <span class="n">HelloWorld</span>;
-<span class="k">begin</span>
-    <span class="nf">writeln</span>(<span class="s1">'Hello, World!'</span>);
-    <span class="nf">writeln</span>(<span class="s1">'Welcome to Pascal programming'</span>);
-<span class="k">end</span>.</code></pre>
-        </div>
+        {{ $codeExample := `program HelloWorld;
+begin
+    writeln('Hello, World!');
+    writeln('Welcome to Pascal programming');
+end.` }}
+        {{ highlight $codeExample "objectpascal" "linenos=false" }}
     </div>
 </section>
 

static/css/main.css

@@ -66,6 +66,14 @@ body {
   transition: var(--transition);
 }
 
+/* Dark theme adjustments for syntax highlighting */
+[data-theme="dark"] .chroma { background-color: var(--code-bg) !important; color: var(--text-primary) !important; }
+[data-theme="dark"] .highlight { background-color: var(--code-bg) !important; }
+[data-theme="dark"] .highlight > div { background-color: var(--code-bg) !important; }
+[data-theme="dark"] .highlight pre { background-color: var(--code-bg) !important; color: var(--text-primary) !important; }
+[data-theme="dark"] .chroma .lntable { background-color: var(--code-bg) !important; }
+[data-theme="dark"] .chroma .lntd { background-color: var(--code-bg) !important; }
+
 /* Container */
 .container {
   max-width: var(--container-max-width);