NEOS-564 Re-Enables Dark mode in Docs, fixes Color Component and Cards

docs/docusaurus.config.ts

@@ -91,8 +91,8 @@ const config: Config = {
     image: 'img/docusaurus-social-card.jpg',
     colorMode: {
       defaultMode: 'light',
-      // disabling color mode and preference until dark mode switching is fixed
-      disableSwitch: true,
+      disableSwitch: false,
+      // disabling preference until dark mode switching is fixed: https://github.com/facebook/docusaurus/issues/8938
       respectPrefersColorScheme: false,
     },
     navbar: {

docs/src/CustomComponents/CustomCard.tsx

@@ -8,14 +8,16 @@ export function CustomCard(props: Card): ReactElement {
   return (
     <Link
       href={link}
-      className="custom-card no-underline hover:no-underline group text-gray-900"
+      className="border border-gray-200 dark:border-gray-900 dark:bg-[#232323] hover:dark:border-gray-700 hover:border-[#acc7f9] hover:shadow-md hover:text-gray-800 text-gray-900 dark:text-gray-300 rounded-xl p-4 flex flex-col justify-between space-y-2 dark:hover:text-gray-100 no-underline hover:no-underline group"
     >
       <div className="flex flex-col space-y-4">
         <div className="flex flex-row gap-2 items-center">
-          <div className="custom-card-icon">{icon}</div>
-          <div className="card-title">{title}</div>
+          <div className="border-2 border-blue-200 dark:border-gray-800 rounded-lg bg-blue-100 dark:bg-gray-700 dark:text-gray-300 p-2">
+            {icon}
+          </div>
+          <div className="font-semibold text-base">{title}</div>
         </div>
-        <div className="card-text">{description}</div>
+        <div className="font-light">{description}</div>
       </div>
       <div className="flex justify-end transition-transform duration-300 transform group-hover:translate-x-[4px]">
         <ArrowRightIcon />

docs/src/CustomComponents/CustomCardList.tsx

@@ -15,7 +15,7 @@ export interface Card {
 export function CustomCardList(props: Props): ReactElement {
   const { cards } = props;
   return (
-    <div className="custom-card-list no-underline">
+    <div className="grid grid-cols-1 lg:grid-cols-2 gap-2 no-underline">
       {cards.map((item) => (
         <CustomCard
           key={item.title}

docs/src/css/overrides.css

@@ -129,30 +129,6 @@ this is the class for the sidebar categories that section headers
     @apply text-gray-900 text-xl font-semibold dark:text-gray-300;
   }
 
-  .card {
-    @apply rounded-xl shadow-lg;
-  }
-
-  .custom-card-list {
-    @apply grid grid-cols-1 lg:grid-cols-2 gap-2;
-  }
-
-  .custom-card {
-    @apply border border-gray-200 dark:border-gray-900 dark:bg-[#232323] hover:dark:border-gray-700 hover:border-[#acc7f9] hover:shadow-md hover:text-gray-800 dark:text-gray-300 rounded-xl p-4 flex flex-col justify-between space-y-2 dark:hover:text-gray-100;
-  }
-
-  .custom-card-icon {
-    @apply border-2 border-blue-200 dark:border-gray-800 rounded-lg bg-blue-100 dark:bg-gray-700 dark:text-gray-300 p-2;
-  }
-
-  .card-title {
-    @apply font-semibold text-base;
-  }
-
-  .card-text {
-    @apply font-light;
-  }
-
   /*
     the prev and next nav links at the bottom of the page
     */

docs/tailwind.config.js

@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ['./src/**/*.{js,jsx,ts,tsx}', './docs/*.mdx'],
+  content: ['./src/**/*.{js,jsx,ts,tsx}', './docs/**/*.mdx', './docs/**/*.md'],
   theme: {},
   darkMode: ['class', '[data-theme="dark"]'],
   plugins: [],