fix: refactor dark theme switching for markdown elements (#8163)

Author: TusharThakur04

src/components/Markdown/Markdown.css

@@ -371,3 +371,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-dark-heading;
+}
+
+.dark .markdown code,
+.dark .markdown tt {
+  text-shadow: none;
+  @apply bg-dark-code-inline-bg;
+}
+
+.dark .markdown blockquote {
+  @apply border-l-dark-section-border text-dark-muted;
+}
+
+.dark .markdown blockquote.tip {
+  @apply bg-dark-aside-tip-bg text-dark-aside-tip-text;
+}
+
+.dark .markdown blockquote.warning {
+  @apply bg-dark-aside-warning-bg text-dark-aside-warning-text;
+}
+
+.dark .markdown blockquote.todo {
+  @apply bg-dark-aside-todo-bg text-dark-aside-todo-text;
+}
+
+.dark .markdown hr {
+  @apply bg-dark-section-border;
+}
+
+.dark .markdown th {
+  @apply bg-dark-bg border-dark-border;
+}
+
+.dark .markdown tr,
+.dark .markdown tr:last-child {
+  @apply border-dark-border;
+}
+
+.dark .markdown tr:nth-child(2n) {
+  @apply bg-dark-surface;
+}
+
+.dark .markdown td {
+  @apply border-dark-border;
+}
+
+.dark .markdown pre {
+  @apply bg-dark-code-bg;
+}
+
+.dark .markdown pre code {
+  @apply bg-transparent;
+}
+
+.dark .markdown a code {
+  @apply text-dark-link;
+}
+
+.dark .markdown a code:hover {
+  @apply text-dark-link-hover;
+}
+
+.dark .markdown aside.tip,
+.dark .markdown aside.warning,
+.dark .markdown aside.preview,
+.dark .markdown aside.todo {
+  @apply bg-dark-surface-2 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;
+}

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];
   }