From 9f8197dd978d13a543e6e60227bb8894af348a7f Mon Sep 17 00:00:00 2001
From: Tushar <80577646+TusharThakur04@users.noreply.github.com>
Date: Sat, 4 Apr 2026 01:38:26 +0530
Subject: [PATCH 1/3] styles: refactor dark theme switching for markdown
 elements

---
 src/components/Markdown/Markdown.css | 82 +++++++++++++++++++++++++++
 src/styles/dark.css                  | 84 ----------------------------
 2 files changed, 82 insertions(+), 84 deletions(-)

diff --git a/src/components/Markdown/Markdown.css b/src/components/Markdown/Markdown.css
index 9cbe7e55ce46..03f9f7bb9fa5 100644
--- a/src/components/Markdown/Markdown.css
+++ b/src/components/Markdown/Markdown.css
@@ -370,3 +370,85 @@
     @apply mt-[1.5em];
   }
 }
+
+.dark .markdown h1,
+.dark .markdown h2,
+.dark .markdown h3,
+.dark .markdown h4,
+.dark .markdown h5,
+.dark .markdown h6 {
+  @apply text-[#9ab3c0];
+}
+
+.dark .markdown code,
+.dark .markdown tt {
+  text-shadow: none;
+  @apply bg-[rgba(70,94,105,0.45)];
+}
+
+.dark .markdown blockquote {
+  @apply border-l-[#343434] text-[#a3a3a3];
+}
+
+.dark .markdown blockquote.tip {
+  @apply bg-[#192429] text-[#7da2b4];
+}
+
+.dark .markdown blockquote.warning {
+  @apply bg-[#27220a] text-[#a49d83];
+}
+
+.dark .markdown blockquote.todo {
+  @apply bg-[#402b1f] text-[#998478];
+}
+
+.dark .markdown hr {
+  @apply bg-[#343434];
+}
+
+.dark .markdown th {
+  @apply bg-[#121212] border-[#252525];
+}
+
+.dark .markdown tr,
+.dark .markdown tr:last-child {
+  @apply border-[#252525];
+}
+
+.dark .markdown tr:nth-child(2n) {
+  @apply bg-[#202020];
+}
+
+.dark .markdown td {
+  @apply border-[#252525];
+}
+
+.dark .markdown pre {
+  @apply bg-[#131b1f];
+}
+
+.dark .markdown pre code {
+  @apply bg-transparent;
+}
+
+.dark .markdown a code {
+  @apply text-[#69a8ee];
+}
+
+.dark .markdown a code:hover {
+  @apply text-[#82b7f6];
+}
+
+.dark .markdown aside.tip,
+.dark .markdown aside.warning,
+.dark .markdown aside.preview,
+.dark .markdown aside.todo {
+  @apply bg-[#222222] text-white;
+}
+
+.dark .markdown aside.tip > .tip__prefix,
+.dark .markdown aside.warning > .warning__prefix,
+.dark .markdown aside.preview > .preview__prefix,
+.dark .markdown aside.todo > .todo__prefix {
+  @apply text-white;
+}
diff --git a/src/styles/dark.css b/src/styles/dark.css
index c761f6a8448a..b004eed7f3a5 100644
--- a/src/styles/dark.css
+++ b/src/styles/dark.css
@@ -9,90 +9,6 @@
     @apply bg-[#202020];
   }
 
-  .markdown {
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      @apply text-[#9ab3c0];
-    }
-
-    code,
-    tt {
-      text-shadow: none;
-      @apply bg-[rgba(70,94,105,0.45)];
-    }
-
-    blockquote {
-      @apply border-l-[#343434] text-[#a3a3a3];
-    }
-
-    blockquote.tip {
-      @apply bg-[#192429] text-[#7da2b4];
-    }
-
-    blockquote.warning {
-      @apply bg-[#27220a] text-[#a49d83];
-    }
-
-    blockquote.todo {
-      @apply bg-[#402b1f] text-[#998478];
-    }
-
-    hr {
-      @apply bg-[#343434];
-    }
-
-    th {
-      @apply bg-[#121212] border-[#252525];
-    }
-
-    tr,
-    tr:last-child {
-      @apply border-[#252525];
-    }
-
-    tr:nth-child(2n) {
-      @apply bg-[#202020];
-    }
-
-    td {
-      @apply border-[#252525];
-    }
-
-    pre {
-      @apply bg-[#131b1f];
-
-      code {
-        @apply bg-transparent;
-      }
-    }
-
-    a code {
-      @apply text-[#69a8ee];
-
-      &:hover {
-        @apply text-[#82b7f6];
-      }
-    }
-
-    aside.tip,
-    aside.warning,
-    aside.preview,
-    aside.todo {
-      @apply bg-[#222222] text-white;
-    }
-
-    aside.tip > .tip__prefix,
-    aside.warning > .warning__prefix,
-    aside.preview > .preview__prefix,
-    aside.todo > .todo__prefix {
-      @apply text-white;
-    }
-  }
-
   .gitter__button {
     @apply bg-[#1c3b39];
   }

From d419387c787702b400f88e62518c86015332b072 Mon Sep 17 00:00:00 2001
From: Tushar <80577646+TusharThakur04@users.noreply.github.com>
Date: Fri, 10 Apr 2026 16:57:46 +0530
Subject: [PATCH 2/3] refactor color codes to variables

---
 src/components/Markdown/Markdown.css |  30 ++++----
 src/styles/dark.css                  | 100 ++++++++++++++++++++++++---
 2 files changed, 107 insertions(+), 23 deletions(-)

diff --git a/src/components/Markdown/Markdown.css b/src/components/Markdown/Markdown.css
index 03f9f7bb9fa5..1bceda5d83d6 100644
--- a/src/components/Markdown/Markdown.css
+++ b/src/components/Markdown/Markdown.css
@@ -377,54 +377,54 @@
 .dark .markdown h4,
 .dark .markdown h5,
 .dark .markdown h6 {
-  @apply text-[#9ab3c0];
+  @apply text-dark-heading;
 }
 
 .dark .markdown code,
 .dark .markdown tt {
   text-shadow: none;
-  @apply bg-[rgba(70,94,105,0.45)];
+  @apply bg-dark-code-inline-bg;
 }
 
 .dark .markdown blockquote {
-  @apply border-l-[#343434] text-[#a3a3a3];
+  @apply border-l-dark-section-border text-dark-muted;
 }
 
 .dark .markdown blockquote.tip {
-  @apply bg-[#192429] text-[#7da2b4];
+  @apply bg-dark-aside-tip-bg text-dark-aside-tip-text;
 }
 
 .dark .markdown blockquote.warning {
-  @apply bg-[#27220a] text-[#a49d83];
+  @apply bg-dark-aside-warning-bg text-dark-aside-warning-text;
 }
 
 .dark .markdown blockquote.todo {
-  @apply bg-[#402b1f] text-[#998478];
+  @apply bg-dark-aside-todo-bg text-dark-aside-todo-text;
 }
 
 .dark .markdown hr {
-  @apply bg-[#343434];
+  @apply bg-dark-section-border;
 }
 
 .dark .markdown th {
-  @apply bg-[#121212] border-[#252525];
+  @apply bg-dark-bg border-dark-border;
 }
 
 .dark .markdown tr,
 .dark .markdown tr:last-child {
-  @apply border-[#252525];
+  @apply border-dark-border;
 }
 
 .dark .markdown tr:nth-child(2n) {
-  @apply bg-[#202020];
+  @apply bg-dark-surface;
 }
 
 .dark .markdown td {
-  @apply border-[#252525];
+  @apply border-dark-border;
 }
 
 .dark .markdown pre {
-  @apply bg-[#131b1f];
+  @apply bg-dark-code-bg;
 }
 
 .dark .markdown pre code {
@@ -432,18 +432,18 @@
 }
 
 .dark .markdown a code {
-  @apply text-[#69a8ee];
+  @apply text-dark-link;
 }
 
 .dark .markdown a code:hover {
-  @apply text-[#82b7f6];
+  @apply text-dark-link-hover;
 }
 
 .dark .markdown aside.tip,
 .dark .markdown aside.warning,
 .dark .markdown aside.preview,
 .dark .markdown aside.todo {
-  @apply bg-[#222222] text-white;
+  @apply bg-dark-surface-2 text-white;
 }
 
 .dark .markdown aside.tip > .tip__prefix,
diff --git a/src/styles/dark.css b/src/styles/dark.css
index b004eed7f3a5..9bb6041dbdc6 100644
--- a/src/styles/dark.css
+++ b/src/styles/dark.css
@@ -2,11 +2,95 @@
 
 [data-theme="dark"] {
   body {
-    @apply bg-[#121212] text-[#e0e0e0];
+    @apply bg-dark-bg text-dark-text;
   }
 
   .splash__section--dark {
-    @apply bg-[#202020];
+    @apply bg-dark-surface;
+  }
+
+  .markdown {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      @apply text-dark-heading;
+    }
+
+    code,
+    tt {
+      text-shadow: none;
+      @apply bg-dark-code-inline-bg;
+    }
+
+    blockquote {
+      @apply border-l-dark-section-border text-dark-muted;
+    }
+
+    blockquote.tip {
+      @apply bg-dark-aside-tip-bg text-dark-aside-tip-text;
+    }
+
+    blockquote.warning {
+      @apply bg-dark-aside-warning-bg text-dark-aside-warning-text;
+    }
+
+    blockquote.todo {
+      @apply bg-dark-aside-todo-bg text-dark-aside-todo-text;
+    }
+
+    hr {
+      @apply bg-dark-section-border;
+    }
+
+    th {
+      @apply bg-dark-bg border-dark-border;
+    }
+
+    tr,
+    tr:last-child {
+      @apply border-dark-border;
+    }
+
+    tr:nth-child(2n) {
+      @apply bg-dark-surface;
+    }
+
+    td {
+      @apply border-dark-border;
+    }
+
+    pre {
+      @apply bg-dark-code-bg;
+
+      code {
+        @apply bg-transparent;
+      }
+    }
+
+    a code {
+      @apply text-dark-link;
+
+      &:hover {
+        @apply text-dark-link-hover;
+      }
+    }
+
+    aside.tip,
+    aside.warning,
+    aside.preview,
+    aside.todo {
+      @apply bg-dark-surface-2 text-white;
+    }
+
+    aside.tip > .tip__prefix,
+    aside.warning > .warning__prefix,
+    aside.preview > .preview__prefix,
+    aside.todo > .todo__prefix {
+      @apply text-white;
+    }
   }
 
   .gitter__button {
@@ -15,11 +99,11 @@
 
   .sponsors__content,
   .footer__inner {
-    @apply border-[#252525];
+    @apply border-dark-border;
   }
 
   .page-links__gap {
-    @apply text-gray-300;
+    @apply text-dark-muted;
   }
 
   .site {
@@ -27,11 +111,11 @@
   }
 
   .sidebar__docs-version {
-    @apply border-[#252525] text-[#b8b8b8];
+    @apply border-dark-border text-dark-sidebar-version;
   }
 
   .contributor .contributor__name {
-    @apply bg-[#121212] text-[#9ab3c0];
+    @apply bg-dark-bg text-dark-heading;
   }
 
   .footer-openjsf-logo {
@@ -46,12 +130,12 @@
 @layer base {
   [data-theme="dark"] a,
   [data-theme="dark"] button.as-link {
-    @apply text-[#69a8ee];
+    @apply text-dark-link;
   }
 }
 
 @layer base {
   [data-theme="dark"] a:hover {
-    @apply text-[#82b7f6];
+    @apply text-dark-link-hover;
   }
 }

From cba9e383d938a6f41d822510b0960f7a55d728ea Mon Sep 17 00:00:00 2001
From: Tushar <80577646+TusharThakur04@users.noreply.github.com>
Date: Fri, 10 Apr 2026 17:04:58 +0530
Subject: [PATCH 3/3] rebase

---
 src/styles/dark.css | 84 ---------------------------------------------
 1 file changed, 84 deletions(-)

diff --git a/src/styles/dark.css b/src/styles/dark.css
index 9bb6041dbdc6..2a596145734b 100644
--- a/src/styles/dark.css
+++ b/src/styles/dark.css
@@ -9,90 +9,6 @@
     @apply bg-dark-surface;
   }
 
-  .markdown {
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      @apply text-dark-heading;
-    }
-
-    code,
-    tt {
-      text-shadow: none;
-      @apply bg-dark-code-inline-bg;
-    }
-
-    blockquote {
-      @apply border-l-dark-section-border text-dark-muted;
-    }
-
-    blockquote.tip {
-      @apply bg-dark-aside-tip-bg text-dark-aside-tip-text;
-    }
-
-    blockquote.warning {
-      @apply bg-dark-aside-warning-bg text-dark-aside-warning-text;
-    }
-
-    blockquote.todo {
-      @apply bg-dark-aside-todo-bg text-dark-aside-todo-text;
-    }
-
-    hr {
-      @apply bg-dark-section-border;
-    }
-
-    th {
-      @apply bg-dark-bg border-dark-border;
-    }
-
-    tr,
-    tr:last-child {
-      @apply border-dark-border;
-    }
-
-    tr:nth-child(2n) {
-      @apply bg-dark-surface;
-    }
-
-    td {
-      @apply border-dark-border;
-    }
-
-    pre {
-      @apply bg-dark-code-bg;
-
-      code {
-        @apply bg-transparent;
-      }
-    }
-
-    a code {
-      @apply text-dark-link;
-
-      &:hover {
-        @apply text-dark-link-hover;
-      }
-    }
-
-    aside.tip,
-    aside.warning,
-    aside.preview,
-    aside.todo {
-      @apply bg-dark-surface-2 text-white;
-    }
-
-    aside.tip > .tip__prefix,
-    aside.warning > .warning__prefix,
-    aside.preview > .preview__prefix,
-    aside.todo > .todo__prefix {
-      @apply text-white;
-    }
-  }
-
   .gitter__button {
     @apply bg-[#1c3b39];
   }