Fix Dark Mode issue (#34)

Author: simcod

src/components/ArticleTeaser.tsx

@@ -1,10 +1,12 @@
 import Link from '@docusaurus/Link';
 import {ArticleTeaserProps} from "@site/src/types/ArticleTeaserProps";
+import { useColorMode } from "@docusaurus/theme-common";
 
 export default function ArticleTeaser(props: ArticleTeaserProps) {
+  const { isDarkTheme } = useColorMode();
   return (
     <article>
-      <Link to={props.slug} className="group  border border-neutral-200 dark:border-white/5 filter backdrop-blur-xl rounded-lg block p-8 h-full">
+      <Link to={props.slug} className={`${ isDarkTheme ? "dark:bg-neutral-900" : "bg-white/50"} group border border-neutral-200 dark:border-white/5 filter backdrop-blur-xl rounded-lg block p-8 h-full`}>
         <div className=" relative">
           <h3 className="mt-0 text-lg font-semibold leading-6  group-hover:text-amber-500 !line-clamp-2 h-12">
             {props.title}

src/components/sections/Offering.tsx

@@ -4,7 +4,7 @@ import Row from "../../components/Row";
 import Section from "../../components/Section";
 import SectionIntro from "../../components/SectionIntro";
 import { Button } from "../../components/Button";
-// import { useColorMode } from "@docusaurus/theme-common";
+import { useColorMode } from "@docusaurus/theme-common";
 
 let cloudFeatures = [
   { src: "/img/icons8-gdpr.svg", title: "Fully DSGVO and GDPR compliant", key: "compilence" },
@@ -16,7 +16,7 @@ let cloudFeatures = [
 ];
 
 export default function Offering() {
-  // const colorMode = useColorMode();
+  const { isDarkTheme } = useColorMode();
   return (
     <Section id="cloud-offering" className="pb-0 sm:pb-20 dark:bg-neutral-900 ">
       <Row className=" overflow-clip">
@@ -66,7 +66,7 @@ export default function Offering() {
             <div className="aspect-w-16 aspect-h-9 relative sm:ml-10 rounded-lg overflow-clip sm:-mr-96">
               <img
                 className="w-full object-cover h-full"
-                src="/img/browser-mockup-light.png"
+                src={isDarkTheme ? "/img/browser-mockup-dark.png" : "/img/browser-mockup-light.png"}
                 alt="Screenshot of the user interface of the metalstack.cloud management console."
               />
             </div>