feat: added dark/light mode toggle

docusaurus.config.ts

@@ -4,10 +4,6 @@ import type { Options as PluginGTagOptions } from '@docusaurus/plugin-google-gta
 import type { Options as ThemeOptions } from '@docusaurus/theme-classic';
 import type { UserThemeConfig } from '@docusaurus/theme-common';
 import { visit } from 'unist-util-visit';
-import { themes as prismThemes } from 'prism-react-renderer';
-
-const lightCodeTheme = prismThemes.github;
-const darkCodeTheme = prismThemes.dracula;
 
 /**
  * Docusaurus does not process JSX `<img src ="...">` URLs
@@ -65,7 +61,8 @@ const pluginTheme: [string, ThemeOptions] = [
 
 const themeConfig: UserThemeConfig = {
   colorMode: {
-    disableSwitch: true,
+    defaultMode: 'dark',
+    // DisableSwitch: false,
   },
   navbar: {
     logo: {
@@ -215,7 +212,7 @@ const themeConfig: UserThemeConfig = {
   prism: {
     additionalLanguages: ['shell-session', 'bash'],
     theme: require('./src/css/custom-prism-theme.ts'),
-    darkTheme: darkCodeTheme,
+    darkTheme: require('./src/css/dark-custom-prism-theme.ts'),
   },
 };
 

src/css/dark-custom-prism-theme.ts

@@ -0,0 +1,73 @@
+import type { PrismTheme } from 'prism-react-renderer';
+
+// To see changes in development restart docusaurus
+
+const theme: PrismTheme = {
+  plain: {
+    color: '#F8F8F2',
+    backgroundColor: '#282A36',
+  },
+  styles: [
+    {
+      types: ['prolog', 'constant', 'builtin'],
+      style: {
+        color: 'rgb(189, 147, 249)',
+      },
+    },
+    {
+      types: ['inserted', 'function'],
+      style: {
+        color: 'rgb(80, 250, 123)',
+      },
+    },
+    {
+      types: ['deleted'],
+      style: {
+        color: 'rgb(255, 85, 85)',
+      },
+    },
+    {
+      types: ['changed'],
+      style: {
+        color: 'rgb(255, 184, 108)',
+      },
+    },
+    {
+      types: ['punctuation', 'symbol'],
+      style: {
+        color: 'rgb(248, 248, 242)',
+      },
+    },
+    {
+      types: ['string', 'char', 'tag', 'selector'],
+      style: {
+        color: 'rgb(255, 121, 198)',
+      },
+    },
+    {
+      types: ['keyword', 'variable'],
+      style: {
+        color: 'rgb(80, 250, 123)',
+      },
+    },
+    {
+      types: ['command'],
+      style: {
+        color: 'rgb(0, 199, 231)',
+      },
+    },
+    {
+      types: ['comment'],
+      style: {
+        color: 'rgb(98, 114, 164)',
+      },
+    },
+    {
+      types: ['attr-name'],
+      style: {
+        color: 'rgb(241, 250, 140)',
+      },
+    },
+  ],
+};
+export default theme;