feat(theme): add monokai-dimmed theme.

Author: jaywcjlove

.github/workflows/ci.yml

@@ -253,6 +253,13 @@ jobs:
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
+      - name: 📦 @uiw/codemirror-theme-monokai-dimmed publish to NPM
+        run: npm publish --access public
+        working-directory: ./themes/monokai-dimmed/
+        continue-on-error: true
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
       - name: 📦 @uiw/codemirror-theme-noctis-lilac publish to NPM
         run: npm publish --access public
         working-directory: ./themes/noctis-lilac/

themes/_scripts/data/monokai-dimmed.json

@@ -123,6 +123,10 @@ const getString = (obj) => `export const config = ${JSON.stringify(obj, null, 2)
   await FS.writeFile(themePath, getString(monokai));
   console.log(`🎉 File \x1b[32;1m${themePath}\x1b[0m created.`);
 
+  const monokaiDimmed = format(require('./data/monokai-dimmed.json'));
+  themePath = '../monokai-dimmed/src/color.ts';
+  await FS.writeFile(themePath, getString(monokaiDimmed));
+  console.log(`🎉 File \x1b[32;1m${themePath}\x1b[0m created.`);
   // const themeSolarizedDark = format(require('./data/solarized.dark.json'), true)
   // console.log('~~~::', themeSolarizedDark);
   // const themeSolarizedLight = format(require('./data/solarized.light.json'))

themes/_scripts/main.mjs

@@ -89,37 +89,37 @@ export * from '@uiw/codemirror-theme-xcode';
 
 ## Themes
 
-**abcdef**
+### abcdef
 
 <a href="https://uiwjs.github.io/react-codemirror/#/theme/data/abcdef">
   <img width="436" alt="codemirror-theme-abcdef" src="https://user-images.githubusercontent.com/1680273/176573508-705562ad-16ec-4b16-994e-f235a9331a3f.png">
 </a>
 
-**abyss**
+### abyss
 
 <a href="https://uiwjs.github.io/react-codemirror/#/theme/data/abyss">
   <img width="436" alt="codemirror-theme-abyss" src="https://github.com/uiwjs/react-codemirror/assets/1680273/b1b59053-d370-485e-9dcc-2987b39197a1">
 </a>
 
-**android studio**
+### android studio
 
 <a href="https://uiwjs.github.io/react-codemirror/#/theme/data/xcode/light">
   <img width="436" alt="codemirror-theme-androidstudio" src="https://user-images.githubusercontent.com/1680273/177484354-0a4fa43e-de96-409f-83e2-61808f2347e6.png">
 </a>
 
-**atom one**
+### atom one
 
 <a href="https://uiwjs.github.io/react-codemirror/#/theme/data/xcode/light">
   <img width="436" alt="codemirror-theme-androidstudio" src="https://user-images.githubusercontent.com/1680273/181795374-7a25cb90-5d77-4f86-9cbc-b1e12dc939d3.png">
 </a>
 
-**aura**
+### aura
 
 <a href="https://uiwjs.github.io/react-codemirror/#/theme/data/aura">
   <img width="436" alt="codemirror-theme-aura" src="https://user-images.githubusercontent.com/1680273/206092773-8140fc6b-119f-4271-a821-7dc6bcbc1c63.png">
 </a>
 
-**basic**
+### basic
 
 <a href="https://uiwjs.github.io/react-codemirror/#/theme/data/basic/dark">
   <img width="436" alt="codemirror-theme-basic dark" src="https://github.com/uiwjs/react-codemirror/assets/1680273/977c1271-eca1-4f61-ad90-3a89f4ea4871">
@@ -129,31 +129,31 @@ export * from '@uiw/codemirror-theme-xcode';
   <img width="436" alt="codemirror-theme-basic light" src="https://github.com/uiwjs/react-codemirror/assets/1680273/e5b43612-5190-4d5b-ab7a-0f5d369ad7e4">
 </a>
 
-**bbedit**
+### bbedit
 
 <a href="https://uiwjs.github.io/react-codemirror/#/theme/data/bbedit">
   <img width="436" alt="codemirror-theme-bbedit" src="https://user-images.githubusercontent.com/1680273/183550552-df398e5b-fab2-4ce5-bdd0-5e3612e3e5d9.png">
 </a>
 
-**bespin**
+### bespin
 
 <a href="https://uiwjs.github.io/react-codemirror/#/theme/data/bespin">
   <img width="436" alt="codemirror-theme-bespin" src="https://user-images.githubusercontent.com/1680273/176573408-0fd54981-471a-4ef8-91d4-8ad4b159c1e0.png">
 </a>
 
-**darcula**
+### darcula
 
 <a href="https://uiwjs.github.io/react-codemirror/#/theme/data/darcula">
   <img width="436" alt="codemirror-theme-darcula" src="https://user-images.githubusercontent.com/1680273/176573321-3015b1b4-3455-497f-ad16-dd2090d7848d.png">
 </a>
 
-**dracula**
+### dracula
 
 <a href="https://uiwjs.github.io/react-codemirror/#/theme/data/dracula">
   <img width="436" alt="codemirror-theme-dracula" src="https://user-images.githubusercontent.com/1680273/176573236-43928ba2-0eb1-4b59-9495-d39b6e3df81c.png">
 </a>
 
-**duotone**
+### duotone
 
 <a href="https://uiwjs.github.io/react-codemirror/#/theme/data/duotone/dark">
   <img width="436" alt="codemirror-theme-duotone dark" src="https://user-images.githubusercontent.com/1680273/176572959-adfc1284-4c70-48df-8aeb-9a47ff76b2f2.png">
@@ -163,13 +163,13 @@ export * from '@uiw/codemirror-theme-xcode';
   <img width="436" alt="codemirror-theme-duotone light" src="https://user-images.githubusercontent.com/1680273/176573139-5c22ed62-6000-40da-b080-59c83e6181e2.png">
 </a>
 
-**eclipse**
+### eclipse
 
 <a href="https://uiwjs.github.io/react-codemirror/#/theme/data/eclipse">
   <img width="436" alt="codemirror-theme-eclipse" src="https://user-images.githubusercontent.com/1680273/176572785-4f56f11a-018b-4f86-9088-e6f71f745cfb.png">
 </a>
 
-**github**
+### github
 
 <a href="https://uiwjs.github.io/react-codemirror/#/theme/data/github/dark">
   <img width="436" alt="codemirror-theme-github dark" src="https://user-images.githubusercontent.com/1680273/177048035-644af599-aaf1-41d8-86ea-9ea8c3a1a0c5.png">
@@ -179,7 +179,7 @@ export * from '@uiw/codemirror-theme-xcode';
   <img width="436" alt="codemirror-theme-github light" src="https://user-images.githubusercontent.com/1680273/177048005-32794f23-8bff-4059-babf-21316d886e65.png">
 </a>
 
-**gruvbox**
+### gruvbox
 
 <a href="https://uiwjs.github.io/react-codemirror/#/theme/data/gruvbox/dark">
   <img width="436" alt="codemirror-theme-gruvbox-dark" src="https://user-images.githubusercontent.com/1680273/206087857-d0a85219-34ad-4e79-9cdf-183f67e1085d.png">
@@ -189,13 +189,13 @@ export * from '@uiw/codemirror-theme-xcode';
   <img width="436" alt="codemirror-theme-eclipse" src="https://user-images.githubusercontent.com/1680273/206087911-49db6624-ab8c-434e-9b8a-84132fe206f9.png">
 </a>
 
-**kimbie**
+### kimbie
 
 <a href="https://uiwjs.github.io/react-codemirror/#/theme/data/kimbie">
   <img width="436" alt="codemirror-theme-kimbie" src="https://github.com/uiwjs/react-codemirror/assets/1680273/859e75f6-cc7c-4182-ac92-dbf3168784b0">
 </a>
 
-**material**
+### material
 
 <a href="https://uiwjs.github.io/react-codemirror/#/theme/data/material/dark">
   <img width="436" alt="codemirror-theme-material" src="https://user-images.githubusercontent.com/1680273/205537793-79f9c99c-831a-4ce3-8189-78b42896656f.png">
@@ -205,43 +205,49 @@ export * from '@uiw/codemirror-theme-xcode';
   <img width="436" alt="codemirror-theme-material" src="https://user-images.githubusercontent.com/1680273/206124615-b3896e2c-d299-4609-b1d9-523ea1cf9f5b.png">
 </a>
 
-**monokai**
+### monokai
 
 <a href="https://uiwjs.github.io/react-codemirror/#/theme/data/monokai">
   <img width="436" alt="codemirror-theme-monokai" src="https://github.com/uiwjs/react-codemirror/assets/1680273/07df9125-6d96-413b-b863-1eef945b99e3">
 </a>
 
-**noctis-lilac**
+### monokai-dimmed
+
+<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/monokai-dimmed">
+  <img width="436" alt="codemirror-theme-monokai-dimmed" src="https://github.com/uiwjs/react-codemirror/assets/1680273/1b61ce79-b0b6-4fad-9707-b31804c625a2">
+</a>
+
+### noctis-lilac
 
 <a href="https://uiwjs.github.io/react-codemirror/#/theme/data/noctis-lilac">
   <img width="436" alt="codemirror-theme-noctis-lilac" src="https://user-images.githubusercontent.com/1680273/206088068-55e9a25b-eb77-4e1a-91bb-f39cbba84981.png">
 </a>
 
-**nord**
+### nord
 
 <a href="https://uiwjs.github.io/react-codemirror/#/theme/data/nord">
   <img width="436" alt="codemirror-theme-nord" src="https://user-images.githubusercontent.com/1680273/205498304-956bc719-1472-40f0-9c3f-21ac5b9f97a6.png">
 </a>
 
-**okaidia**
+### okaidia
 
 <a href="https://uiwjs.github.io/react-codemirror/#/theme/data/okaidia">
   <img width="436" alt="codemirror-theme-okaidia" src="https://user-images.githubusercontent.com/1680273/176572694-b9aface9-9646-4e0e-a211-a8aa92dabc31.png">
 </a>
 
-**quietlight**
+### quietlight
 
 <a href="https://uiwjs.github.io/react-codemirror/#/theme/data/quietlight">
   <img width="436" alt="codemirror-theme-okaidia" src="https://github.com/uiwjs/react-codemirror/assets/1680273/3137facb-8db7-4805-bd5c-9818d5ff49ae">
 </a>
 
-**red**
+### red
 
 <a href="https://uiwjs.github.io/react-codemirror/#/theme/data/red">
   <img width="436" alt="codemirror-theme-red" src="https://github.com/uiwjs/react-codemirror/assets/1680273/aef0a618-8c74-4466-9a04-35e368f582a7">
 </a>
 
-**solarized**
+### solarized
 
 <a href="https://uiwjs.github.io/react-codemirror/#/theme/data/solarized/light">
   <img width="436" alt="codemirror-theme-solarized" src="https://user-images.githubusercontent.com/1680273/205544435-a080d1d4-6da9-4f1d-aa10-5f2207d31176.png">
@@ -251,37 +257,37 @@ export * from '@uiw/codemirror-theme-xcode';
   <img width="436" alt="codemirror-theme-solarized" src="https://user-images.githubusercontent.com/1680273/205547403-96db62c3-d061-4dee-88d0-c86ed17e7489.png">
 </a>
 
-**sublime**
+### sublime
 
 <a href="https://uiwjs.github.io/react-codemirror/#/theme/data/sublime">
   <img width="436" alt="codemirror-theme-sublime" src="https://user-images.githubusercontent.com/1680273/176572314-cc296f81-0763-485c-8fa2-7d61b24ad09b.png">
 </a>
 
-**tokyo-night**
+### tokyo-night
 
 <a href="https://uiwjs.github.io/react-codemirror/#/theme/data/tokyo-night">
   <img width="436" alt="codemirror-theme-tokyo-night" src="https://user-images.githubusercontent.com/1680273/206094521-c3a51de1-8cb7-4f01-a9bd-6cfd04a3aa0d.png">
 </a>
 
-**tokyo-night-day**
+### tokyo-night-day
 
 <a href="https://uiwjs.github.io/react-codemirror/#/theme/data/tokyo-night-day">
   <img width="436" alt="codemirror-theme-tokyo-night-day" src="https://user-images.githubusercontent.com/1680273/206104544-ca4db2e0-caac-4804-9321-c269fe660245.png">
 </a>
 
-**tokyo-night-storm**
+### tokyo-night-storm
 
 <a href="https://uiwjs.github.io/react-codemirror/#/theme/data/tokyo-night-storm">
   <img width="436" alt="codemirror-theme-tokyo-night-storm" src="https://user-images.githubusercontent.com/1680273/206097179-8a490b97-87da-4285-a9bc-b0c9f510e7ed.png">
 </a>
 
-**vscode**
+### vscode
 
 <a href="https://uiwjs.github.io/react-codemirror/#/theme/data/vscode/dark">
   <img width="436" alt="codemirror-theme-vscode dark" src="https://user-images.githubusercontent.com/1680273/202690670-385808e2-6346-4e36-a3d6-6d9fc1f216dc.png">
 </a>
 
-**xcode**
+### xcode
 
 <a href="https://uiwjs.github.io/react-codemirror/#/theme/data/xcode/dark">
   <img width="436" alt="codemirror-theme-xcode dark" src="https://user-images.githubusercontent.com/1680273/206087681-537b9c1f-0dce-42a4-854d-036147935e82.png">

themes/all/README.md

@@ -38,6 +38,7 @@
     "@uiw/codemirror-theme-kimbie": "4.21.10",
     "@uiw/codemirror-theme-material": "4.21.10",
     "@uiw/codemirror-theme-monokai": "4.21.10",
+    "@uiw/codemirror-theme-monokai-dimmed": "4.21.10",
     "@uiw/codemirror-theme-noctis-lilac": "4.21.10",
     "@uiw/codemirror-theme-nord": "4.21.10",
     "@uiw/codemirror-theme-okaidia": "4.21.10",

themes/all/package.json

@@ -14,6 +14,7 @@ export * from '@uiw/codemirror-theme-gruvbox-dark';
 export * from '@uiw/codemirror-theme-kimbie';
 export * from '@uiw/codemirror-theme-material';
 export * from '@uiw/codemirror-theme-monokai';
+export * from '@uiw/codemirror-theme-monokai-dimmed';
 export * from '@uiw/codemirror-theme-noctis-lilac';
 export * from '@uiw/codemirror-theme-nord';
 export * from '@uiw/codemirror-theme-okaidia';

themes/all/src/index.ts

@@ -0,0 +1,98 @@
+<!--rehype:ignore:start-->
+
+# MonokaiDimmed Theme
+
+<!--rehype:ignore:end-->
+
+[![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-monokai-dimmed.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-monokai-dimmed)
+
+MonokaiDimmed theme for cm6, generated from [vscode themes](https://github.com/microsoft/vscode/blob/main/extensions/theme-monokai-dimmed/themes/dimmed-monokai-color-theme.json).
+
+<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/monokai-dimmed">
+  <img width="436" alt="codemirror-theme-monokai-dimmed" src="https://github.com/uiwjs/react-codemirror/assets/1680273/1b61ce79-b0b6-4fad-9707-b31804c625a2">
+</a>
+
+## Install
+
+```bash
+npm install @uiw/codemirror-theme-monokai-dimmed --save
+```
+
+```jsx
+import { monokaiDimmed, monokaiDimmedInit } from '@uiw/codemirror-theme-monokai-dimmed';
+
+<CodeMirror theme={monokaiDimmed} />
+<CodeMirror
+  theme={monokaiDimmedInit({
+    settings: {
+      caret: '#c6c6c6',
+      fontFamily: 'monospace',
+    }
+  })}
+/>
+```
+
+## API
+
+```tsx
+import { CreateThemeOptions } from '@uiw/codemirror-themes';
+export declare const defaultSettingsQuietlight: CreateThemeOptions['settings'];
+export declare const monokaiDimmedInit: (
+  options?: Partial<CreateThemeOptions>,
+) => import('@codemirror/state').Extension;
+export declare const monokaiDimmed: import('@codemirror/state').Extension;
+```
+
+## Usage
+
+```jsx
+import CodeMirror from '@uiw/react-codemirror';
+import { monokaiDimmed } from '@uiw/codemirror-theme-monokai-dimmed';
+import { javascript } from '@codemirror/lang-javascript';
+
+function App() {
+  return (
+    <CodeMirror
+      value="console.log('hello world!');"
+      height="200px"
+      theme={monokaiDimmed}
+      extensions={[javascript({ jsx: true })]}
+      onChange={(value, viewUpdate) => {
+        console.log('value:', value);
+      }}
+    />
+  );
+}
+export default App;
+```
+
+```js
+import { EditorView } from '@codemirror/view';
+import { EditorState } from '@codemirror/state';
+import { javascript } from '@codemirror/lang-javascript';
+import { monokaiDimmed } from '@uiw/codemirror-theme-monokai-dimmed';
+
+const state = EditorState.create({
+  doc: 'my source code',
+  extensions: [monokaiDimmed, javascript({ jsx: true })],
+});
+
+const view = new EditorView({
+  parent: document.querySelector('#editor'),
+  state,
+});
+```
+
+## Contributors
+
+As always, thanks to our amazing contributors!
+
+<a href="https://github.com/uiwjs/react-codemirror/graphs/contributors">
+  <img src="https://uiwjs.github.io/react-codemirror/CONTRIBUTORS.svg" />
+</a>
+
+Made with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors).
+
+## License
+
+Licensed under the MIT License.

themes/monokai-dimmed/README.md

@@ -0,0 +1,37 @@
+{
+  "name": "@uiw/codemirror-theme-monokai-dimmed",
+  "version": "4.21.10",
+  "description": "Theme monokai-dimmed for CodeMirror.",
+  "homepage": "https://uiwjs.github.io/react-codemirror/#/theme/data/monokai-dimmed",
+  "author": "kenny wong <wowohoo@qq.com>",
+  "license": "MIT",
+  "main": "./cjs/index.js",
+  "module": "./esm/index.js",
+  "scripts": {
+    "watch": "tsbb watch src/*.ts --use-babel",
+    "build": "tsbb build src/*.ts --use-babel"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/uiwjs/react-codemirror.git"
+  },
+  "files": [
+    "src",
+    "esm",
+    "cjs"
+  ],
+  "dependencies": {
+    "@uiw/codemirror-themes": "4.21.10"
+  },
+  "keywords": [
+    "codemirror",
+    "codemirror-theme",
+    "codemirror6",
+    "theme",
+    "monokai",
+    "monokai-dimmed",
+    "syntax",
+    "ide",
+    "code"
+  ]
+}

themes/monokai-dimmed/package.json

@@ -0,0 +1,24 @@
+export const config = {
+  background: '#1e1e1e',
+  foreground: '#c5c8c6',
+  selection: '#676b7180',
+  cursor: '#c07020',
+  dropdownBackground: '#525252',
+  activeLine: '#303030',
+  matchingBracket: '#303030',
+  keyword: '#676867',
+  storage: '#676867',
+  variable: '#c7444a',
+  parameter: '#6089B4',
+  function: '#9872A2',
+  string: '#D0B344',
+  constant: null,
+  type: '#C7444A',
+  class: '#CE6700',
+  number: '#6089B4',
+  comment: '#9A9B99',
+  heading: '#D0B344',
+  invalid: '#FF0B00',
+  regexp: '#D0B344',
+  tag: '#6089B4',
+};

themes/monokai-dimmed/src/color.ts

@@ -0,0 +1,51 @@
+import { tags as t } from '@lezer/highlight';
+import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
+import { config } from './color';
+
+export const defaultSettingsMonokaiDimmed: CreateThemeOptions['settings'] = {
+  background: config.background,
+  foreground: config.foreground,
+  caret: config.cursor,
+  selection: config.selection,
+  selectionMatch: config.selection,
+  gutterBackground: config.background,
+  gutterForeground: config.foreground,
+  lineHighlight: config.activeLine,
+};
+
+export const monokaiDimmedInit = (options?: Partial<CreateThemeOptions>) => {
+  const { theme = 'dark', settings = {}, styles = [] } = options || {};
+  return createTheme({
+    theme: theme,
+    settings: {
+      ...defaultSettingsMonokaiDimmed,
+      ...settings,
+    },
+    styles: [
+      { tag: t.keyword, color: config.keyword },
+      { tag: [t.name, t.deleted, t.character, t.macroName], color: config.variable },
+      { tag: [t.propertyName], color: config.function },
+      { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: config.string },
+      { tag: [t.function(t.variableName), t.labelName], color: config.function },
+      { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: config.constant },
+      { tag: [t.definition(t.name), t.separator], color: config.variable },
+      { tag: [t.className], color: config.class },
+      { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: config.number },
+      { tag: [t.typeName], color: config.type, fontStyle: config.type },
+      { tag: [t.operator, t.operatorKeyword], color: config.keyword },
+      { tag: [t.url, t.escape, t.regexp, t.link], color: config.regexp },
+      { tag: [t.meta, t.comment], color: config.comment },
+      { tag: t.tagName, color: config.tag },
+      { tag: t.strong, fontWeight: 'bold' },
+      { tag: t.emphasis, fontStyle: 'italic' },
+      { tag: t.link, textDecoration: 'underline' },
+      { tag: t.heading, fontWeight: 'bold', color: config.heading },
+      { tag: [t.atom, t.bool, t.special(t.variableName)], color: config.variable },
+      { tag: t.invalid, color: config.invalid },
+      { tag: t.strikethrough, textDecoration: 'line-through' },
+      ...styles,
+    ],
+  });
+};
+
+export const monokaiDimmed = monokaiDimmedInit();

themes/monokai-dimmed/src/index.ts

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig",
+  "include": ["src"],
+  "compilerOptions": {
+    "outDir": "./cjs",
+    "baseUrl": ".",
+    "noEmit": false
+  }
+}

themes/monokai-dimmed/tsconfig.json

@@ -16,8 +16,8 @@
     "@kkt/raw-modules": "^7.2.0",
     "@kkt/scope-plugin-options": "^7.2.0",
     "@types/katex": "^0.16.0",
-    "@types/react": "~18.0.9",
-    "@types/react-dom": "~18.0.3",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
     "@types/styled-components": "^5.1.25",
     "kkt": "^7.2.0",
     "source-map-explorer": "~2.5.2"
@@ -61,6 +61,7 @@
     "@uiw/codemirror-theme-kimbie": "4.21.10",
     "@uiw/codemirror-theme-material": "4.21.10",
     "@uiw/codemirror-theme-monokai": "4.21.10",
+    "@uiw/codemirror-theme-monokai-dimmed": "4.21.10",
     "@uiw/codemirror-theme-noctis-lilac": "4.21.10",
     "@uiw/codemirror-theme-nord": "4.21.10",
     "@uiw/codemirror-theme-okaidia": "4.21.10",

www/package.json

@@ -11,6 +11,7 @@ import { eclipse } from '@uiw/codemirror-theme-eclipse';
 import { bespin } from '@uiw/codemirror-theme-bespin';
 import { materialLight, materialDark } from '@uiw/codemirror-theme-material';
 import { monokai } from '@uiw/codemirror-theme-monokai';
+import { monokaiDimmed } from '@uiw/codemirror-theme-monokai-dimmed';
 import { noctisLilac } from '@uiw/codemirror-theme-noctis-lilac';
 import { vscodeDark } from '@uiw/codemirror-theme-vscode';
 import { duotoneLight, duotoneDark } from '@uiw/codemirror-theme-duotone';
@@ -51,6 +52,7 @@ export const themeData = {
   materialLight,
   materialDark,
   monokai,
+  monokaiDimmed,
   noctisLilac,
   nord,
   okaidia,

www/src/pages/theme/themes/Datas.ts

@@ -419,6 +419,16 @@ export const routes: MenuRouteObject[] = [
               />
             ),
           },
+          {
+            path: 'data/monokai-dimmed',
+            label: 'Monokai Dimmed',
+            element: (
+              <Preview
+                themePkg="@uiw/codemirror-theme-monokai-dimmed"
+                path={() => import('@uiw/codemirror-theme-monokai-dimmed/README.md')}
+              />
+            ),
+          },
           {
             path: 'data/kimbie',
             element: <Navigate to="dark" replace />,