feat: Update docs theme

website/docusaurus.config.ts

@@ -1,6 +1,7 @@
-import { themes as prismThemes } from 'prism-react-renderer';
 import type { Config } from '@docusaurus/types';
 import type * as Preset from '@docusaurus/preset-classic';
+import lightTheme from './theme/lightTheme';
+import darkTheme from './theme/darkTheme';
 
 // This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
 
@@ -52,6 +53,9 @@ const config: Config = {
   themeConfig: {
     // Replace with your project's social card
     image: 'img/framework.png',
+    colorMode: {
+      defaultMode: 'dark',
+    },
     navbar: {
       title: 'Mirai',
       logo: {
@@ -119,8 +123,9 @@ const config: Config = {
       copyright: `Copyright © ${new Date().getFullYear()} Mirai`,
     },
     prism: {
-      theme: prismThemes.github,
-      darkTheme: prismThemes.dracula,
+      additionalLanguages: ['dart'],
+      theme: lightTheme,
+      darkTheme: darkTheme,
     },
   } satisfies Preset.ThemeConfig,
 };

website/src/css/custom.css

@@ -10,21 +10,43 @@
   --ifm-color-primary-dark: #29784c;
   --ifm-color-primary-darker: #277148;
   --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: #3cad6e;
+  --ifm-color-primary-light: #FF0000;
+  --ifm-color-primary-lighter: #FF0000;
+  --ifm-color-primary-lightest: #FF0000;
   --ifm-code-font-size: 95%;
+  --ifm-background-color: #FFFFFF;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
+.navbar{
+ background-color: #FFFFFF;
+}
+
+.footer {
+  --ifm-footer-background-color: #F4F6FA;
+  --ifm-footer-title-color: #16181A;
+  --ifm-footer-link-color: #16181A;
+}
+
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-primary: #269457;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
+  --ifm-color-primary: #63D794;
+  --ifm-color-primary-dark: #63D794;
+  --ifm-color-primary-darker: #63D794;
   --ifm-color-primary-darkest: #1a8870;
   --ifm-color-primary-light: #29d5b0;
   --ifm-color-primary-lighter: #32d8b4;
   --ifm-color-primary-lightest: #4fddbf;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+  background-color: #16181A;
+}
+
+html[data-theme='dark'] footer {
+  --ifm-footer-background-color: #1D1F21;
+  --ifm-footer-title-color: #FFFFFF;
+  --ifm-footer-link-color: #FFFFFF;
 }
+
+html[data-theme='dark'] .navbar{
+ background-color: #16181A;
+}

website/theme/darkTheme.ts

@@ -0,0 +1,98 @@
+import {PrismTheme} from 'prism-react-renderer';
+
+const darkTheme: PrismTheme = {
+  plain: {
+    color: "#FFFFFF",
+    backgroundColor: "#1D1F21",
+  },
+  styles: [
+    {
+      types: ["comment", "prolog", "doctype", "cdata"],
+      style: {
+        color: "#949494",
+        fontStyle: "italic",
+      },
+    },
+    {
+      types: ["namespace"],
+      style: {
+        opacity: 0.7,
+      },
+    },
+    {
+      types: ["string", "attr-value"],
+      style: {
+        color: "#95E183",
+      },
+    },
+    {
+      types: ["punctuation", "operator"],
+      style: {
+        color: "#FFFFFF",
+      },
+    },
+    {
+      types: [
+        "entity",
+        "url",
+        "symbol",
+        "variable",
+        "constant",
+        "property",
+        "regex",
+        "inserted",
+      ],
+      style: {
+        color: "#66A4FF",
+      },
+    },
+    {
+      types: [
+        "boolean",
+      ],
+      style: {
+        color: "#FF9A3E",
+      },
+    },
+    {
+      types: [
+        "number",
+      ],
+      style: {
+        color: "#60D0DC",
+      },
+    },
+    {
+      types: ["atrule", "keyword", "attr-name", "selector"],
+      style: {
+        color: "#00a4db",
+      },
+    },
+    {
+      types: ["function", "deleted", "tag"],
+      style: {
+        color: "#d73a49",
+      },
+    },
+{
+      types: ["function"],
+      style: {
+        color: "#66A4FF",
+      },
+    },
+    {
+      types: ["function-variable"],
+      style: {
+        color: "#6f42c1",
+      },
+    },
+    {
+      types: ["tag", "selector", "keyword"],
+      style: {
+        color: "#FF9A3E",
+      },
+    },
+  ],
+}
+
+export default darkTheme;

website/theme/lightTheme.ts

@@ -0,0 +1,78 @@
+import {PrismTheme} from 'prism-react-renderer';
+
+const lightTheme: PrismTheme = {
+  plain: {
+    color: "#16181A",
+    backgroundColor: "#F4F6FA",
+  },
+  styles: [
+    {
+      types: ["comment", "prolog", "doctype", "cdata"],
+      style: {
+        color: "#999988",
+        fontStyle: "italic",
+      },
+    },
+    { 
+      types: ["namespace"],
+      style: {
+        opacity: 0.7,
+      },
+    },
+    {
+      types: ["string", "attr-value"],
+      style: {
+        color: "#e3116c",
+      },
+    },
+    {
+      types: ["punctuation", "operator"],
+      style: {
+        color: "#393A34",
+      },
+    },
+    {
+      types: [
+        "entity",
+        "url",
+        "symbol",
+        "number",
+        "boolean",
+        "variable",
+        "constant",
+        "property",
+        "regex",
+        "inserted",
+      ],
+      style: {
+        color: "#36acaa",
+      },
+    },
+    {
+      types: ["atrule", "keyword", "attr-name", "selector"],
+      style: {
+        color: "#00a4db",
+      },
+    },
+    {
+      types: ["function", "deleted", "tag"],
+      style: {
+        color: "#d73a49",
+      },
+    },
+    {
+      types: ["function-variable"],
+      style: {
+        color: "#6f42c1",
+      },
+    },
+    {
+      types: ["tag", "selector", "keyword"],
+      style: {
+        color: "#00009f",
+      },
+    },
+  ],
+}
+
+export default lightTheme;