fix: Add dark mode support for navbar logo (#1325)

Author: jcputney

docs-site/docusaurus.config.ts

@@ -7,7 +7,7 @@ import type * as Preset from "@docusaurus/preset-classic";
 const config: Config = {
   title: "scorm-again",
   tagline: "A modern SCORM runtime for JavaScript",
-  favicon: "img/favicon.ico",
+  favicon: "img/favicon.svg",
 
   // Future flags, see https://docusaurus.io/docs/api/docusaurus-config#future
   future: {
@@ -113,7 +113,8 @@ const config: Config = {
       title: "scorm-again",
       logo: {
         alt: "scorm-again Logo",
-        src: "img/scorm-again-logo-small.svg"
+        src: "img/scorm-again-logo-small.svg",
+        srcDark: "img/scorm-again-logo-small-dark.svg"
       },
       items: [
         {

docs-site/src/pages/index.tsx

@@ -3,6 +3,7 @@ import clsx from "clsx";
 import Link from "@docusaurus/Link";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import useBaseUrl from "@docusaurus/useBaseUrl";
+import { useColorMode } from "@docusaurus/theme-common";
 import Layout from "@theme/Layout";
 import HomepageFeatures from "@site/src/components/HomepageFeatures";
 import Heading from "@theme/Heading";
@@ -12,7 +13,12 @@ import styles from "./index.module.css";
 
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
-  const logoUrl = useBaseUrl("/img/scorm-again-logo.svg");
+  const { colorMode } = useColorMode();
+  const logoUrl = useBaseUrl(
+    colorMode === "dark"
+      ? "/img/scorm-again-logo-dark.svg"
+      : "/img/scorm-again-logo.svg"
+  );
   return (
     <header className={clsx("hero", styles.heroBanner)}>
       <div className="container">