# Themes all for CodeMirror 6. [](https://jaywcjlove.github.io/#/sponsor) [](https://www.npmjs.com/package/@uiw/codemirror-themes-all) Preview all the themes we have created [here](https://uiwjs.github.io/react-codemirror/#/theme), just need to install and import them. ## Install ```bash npm install @uiw/codemirror-themes-all --save ``` ```js import * as themes from '@uiw/codemirror-themes-all'; ``` ## Usage ```js import { EditorView } from '@codemirror/view'; import { EditorState } from '@codemirror/state'; import { javascript } from '@codemirror/lang-javascript'; import { abcdef } from '@uiw/codemirror-themes-all'; const state = EditorState.create({ doc: 'my source code', extensions: [abcdef, javascript({ jsx: true })], }); const view = new EditorView({ parent: document.querySelector('#editor'), state, }); ``` Using in React: ```jsx import CodeMirror from '@uiw/react-codemirror'; import { abcdef } from '@uiw/codemirror-themes-all'; import { javascript } from '@codemirror/lang-javascript'; function App() { return ( { console.log('value:', value); }} /> ); } export default App; ``` ## API ```ts export * from '@uiw/codemirror-theme-abcdef'; export * from '@uiw/codemirror-theme-abyss'; export * from '@uiw/codemirror-theme-androidstudio'; export * from '@uiw/codemirror-theme-andromeda'; export * from '@uiw/codemirror-theme-atomone'; export * from '@uiw/codemirror-theme-aura'; export * from '@uiw/codemirror-theme-basic'; export * from '@uiw/codemirror-theme-bbedit'; export * from '@uiw/codemirror-theme-bespin'; export * from '@uiw/codemirror-theme-copilot'; export * from '@uiw/codemirror-theme-darcula'; export * from '@uiw/codemirror-theme-dracula'; export * from '@uiw/codemirror-theme-duotone'; export * from '@uiw/codemirror-theme-eclipse'; export * from '@uiw/codemirror-theme-github'; 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'; export * from '@uiw/codemirror-theme-quietlight'; export * from '@uiw/codemirror-theme-red'; export * from '@uiw/codemirror-theme-solarized'; export * from '@uiw/codemirror-theme-sublime'; export * from '@uiw/codemirror-theme-tokyo-night'; export * from '@uiw/codemirror-theme-tokyo-night-storm'; export * from '@uiw/codemirror-theme-tokyo-night-day'; export * from '@uiw/codemirror-theme-tomorrow-night-blue'; export * from '@uiw/codemirror-theme-vscode'; export * from '@uiw/codemirror-theme-white'; export * from '@uiw/codemirror-theme-xcode'; ``` ## Themes ### abcdef ### abyss ### android studio ### andromeda ### atom one ### aura ### basic ### bbedit ### bespin ### console ### copilot ### darcula ### dracula ### duotone ### eclipse ### github ### gruvbox ### kimbie ### material ### monokai ### monokai-dimmed ### noctis-lilac ### nord ### okaidia ### quietlight ### red ### solarized ### sublime ### tokyo-night ### tokyo-night-day ### tokyo-night-storm ### tomorrow-night-blue ### vscode ### white ### xcode ## Contributors As always, thanks to our amazing contributors! Made with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors). ## License Licensed under the MIT License.