diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 78168d2..089e673 100644 --- a/docusaurus.config.ts +++ b/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 `` 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'), }, }; diff --git a/src/css/dark-custom-prism-theme.ts b/src/css/dark-custom-prism-theme.ts new file mode 100644 index 0000000..34727b4 --- /dev/null +++ b/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;