From b9527aaa0907e0e971f00a23f2e0cda0834ce785 Mon Sep 17 00:00:00 2001 From: Divyanshu Bhargava Date: Mon, 27 Jan 2025 16:22:00 +0400 Subject: [PATCH] feat: Update docs theme --- website/docusaurus.config.ts | 11 ++-- website/src/css/custom.css | 34 ++++++++++--- website/theme/darkTheme.ts | 98 ++++++++++++++++++++++++++++++++++++ website/theme/lightTheme.ts | 78 ++++++++++++++++++++++++++++ 4 files changed, 212 insertions(+), 9 deletions(-) create mode 100644 website/theme/darkTheme.ts create mode 100644 website/theme/lightTheme.ts diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts index 0b04f4ac..1ccb7e25 100644 --- a/website/docusaurus.config.ts +++ b/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, }; diff --git a/website/src/css/custom.css b/website/src/css/custom.css index 2e1f52de..d9e6dc45 100644 --- a/website/src/css/custom.css +++ b/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; +} \ No newline at end of file diff --git a/website/theme/darkTheme.ts b/website/theme/darkTheme.ts new file mode 100644 index 00000000..f78e58d8 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/website/theme/lightTheme.ts b/website/theme/lightTheme.ts new file mode 100644 index 00000000..e0fdcbe7 --- /dev/null +++ b/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; \ No newline at end of file