├── .npmignore ├── .gitignore ├── .github └── workflows │ └── dispatch.yml ├── package.json ├── LICENSE ├── src ├── README.md └── one-dark.ts ├── CHANGELOG.md └── README.md /.npmignore: -------------------------------------------------------------------------------- 1 | /src 2 | /test 3 | /node_modules 4 | .tern-* 5 | rollup.config.js 6 | tsconfig.json 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | package-lock.json 3 | /dist 4 | /test/*.js 5 | /test/*.d.ts 6 | /test/*.d.ts.map 7 | .tern-* 8 | -------------------------------------------------------------------------------- /.github/workflows/dispatch.yml: -------------------------------------------------------------------------------- 1 | name: Trigger CI 2 | on: push 3 | 4 | jobs: 5 | build: 6 | name: Dispatch to main repo 7 | runs-on: ubuntu-latest 8 | steps: 9 | - name: Emit repository_dispatch 10 | uses: mvasigh/dispatch-action@main 11 | with: 12 | # You should create a personal access token and store it in your repository 13 | token: ${{ secrets.DISPATCH_AUTH }} 14 | repo: dev 15 | owner: codemirror 16 | event_type: push 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@codemirror/theme-one-dark", 3 | "version": "6.1.3", 4 | "description": "One Dark theme for the CodeMirror code editor", 5 | "scripts": { 6 | "test": "cm-runtests", 7 | "prepare": "cm-buildhelper src/one-dark.ts" 8 | }, 9 | "keywords": [ 10 | "editor", 11 | "code" 12 | ], 13 | "author": { 14 | "name": "Marijn Haverbeke", 15 | "email": "marijn@haverbeke.berlin", 16 | "url": "http://marijnhaverbeke.nl" 17 | }, 18 | "type": "module", 19 | "main": "dist/index.cjs", 20 | "exports": { 21 | "import": "./dist/index.js", 22 | "require": "./dist/index.cjs" 23 | }, 24 | "types": "dist/index.d.ts", 25 | "module": "dist/index.js", 26 | "sideEffects": false, 27 | "license": "MIT", 28 | "dependencies": { 29 | "@lezer/highlight": "^1.0.0", 30 | "@codemirror/language": "^6.0.0", 31 | "@codemirror/state": "^6.0.0", 32 | "@codemirror/view": "^6.0.0" 33 | }, 34 | "devDependencies": { 35 | "@codemirror/buildhelper": "^1.0.0" 36 | }, 37 | "repository": { 38 | "type": "git", 39 | "url": "https://github.com/codemirror/theme-one-dark.git" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (C) 2018-2021 by Marijn Haverbeke and others 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # @codemirror/theme-one-dark [![NPM version](https://img.shields.io/npm/v/@codemirror/theme-one-dark.svg)](https://www.npmjs.org/package/@codemirror/theme-one-dark) 4 | 5 | [ [**WEBSITE**](https://codemirror.net/) | [**ISSUES**](https://github.com/codemirror/dev/issues) | [**FORUM**](https://discuss.codemirror.net/c/next/) | [**CHANGELOG**](https://github.com/codemirror/theme-one-dark/blob/main/CHANGELOG.md) ] 6 | 7 | This package implements the One Dark theme for the 8 | [CodeMirror](https://codemirror.net/) code editor. 9 | 10 | The [project page](https://codemirror.net/) has more information, a 11 | number of [examples](https://codemirror.net/examples/) and the 12 | [documentation](https://codemirror.net/docs/). 13 | 14 | This code is released under an 15 | [MIT license](https://github.com/codemirror/theme-one-dark/tree/main/LICENSE). 16 | 17 | We aim to be an inclusive, welcoming community. To make that explicit, 18 | we have a [code of 19 | conduct](http://contributor-covenant.org/version/1/1/0/) that applies 20 | to communication around the project. 21 | 22 | # Usage 23 | 24 | ```javascript 25 | import {EditorView, basicSetup} from "codemirror" 26 | import {oneDark} from "@codemirror/theme-one-dark" 27 | 28 | const editor = new EditorView({ 29 | parent: document.body, 30 | doc: "One Dark Theme", 31 | extensions: [basicSetup, oneDark] 32 | }) 33 | ``` 34 | 35 | ## API Reference 36 | 37 | @oneDark 38 | 39 | @oneDarkTheme 40 | 41 | @oneDarkHighlightStyle 42 | 43 | @color 44 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## 6.1.3 (2025-06-19) 2 | 3 | ### Bug fixes 4 | 5 | Add a .d.cts file to make TypeScript happy. 6 | ## 6.1.2 (2023-04-17) 7 | 8 | ### Bug fixes 9 | 10 | Make sure the selection background styling overrides the base style rules. 11 | 12 | ## 6.1.1 (2023-02-17) 13 | 14 | ### Bug fixes 15 | 16 | Remove the outline on matching brackets, because that could cover the native cursor on Chrome. 17 | 18 | ## 6.1.0 (2022-09-12) 19 | 20 | ### New features 21 | 22 | Export a `color` object holding the colors used in the theme. 23 | 24 | ## 6.0.0 (2022-06-08) 25 | 26 | ### Breaking changes 27 | 28 | Update dependencies to 6.0.0 29 | 30 | ## 0.20.0 (2022-04-20) 31 | 32 | ### Breaking changes 33 | 34 | Update dependencies to 0.20.0 35 | 36 | ## 0.19.1 (2021-11-06) 37 | 38 | ### Bug fixes 39 | 40 | Give tooltips a somewhat lighter background so that they don't blend into the editor background. 41 | 42 | ## 0.19.0 (2021-08-11) 43 | 44 | ### Breaking changes 45 | 46 | Update dependencies to 0.19.0 47 | 48 | ## 0.18.1 (2021-05-15) 49 | 50 | ### Bug fixes 51 | 52 | Include styling for the active line gutter. 53 | 54 | ## 0.18.0 (2021-03-03) 55 | 56 | ### Breaking changes 57 | 58 | Update dependencies to 0.18. 59 | 60 | ## 0.17.5 (2021-02-10) 61 | 62 | ### Bug fixes 63 | 64 | Increase contrast on the color used for comments and links. 65 | 66 | ## 0.17.4 (2021-01-18) 67 | 68 | ### Bug fixes 69 | 70 | Fix the background color for the fold placeholder. 71 | 72 | Improve background colors, make autocompletion dropdown more readable. 73 | 74 | ## 0.17.3 (2021-01-14) 75 | 76 | ### Bug fixes 77 | 78 | Make the selection background grey, rather than dark green. 79 | 80 | ## 0.17.2 (2021-01-06) 81 | 82 | ### New features 83 | 84 | The package now also exports a CommonJS module. 85 | 86 | ## 0.17.1 (2021-01-03) 87 | 88 | ### Bug fixes 89 | 90 | Fix an issue where the active completion isn't readable on Chrome. 91 | 92 | ## 0.17.0 (2020-12-29) 93 | 94 | ### Breaking changes 95 | 96 | First numbered release. 97 | 98 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # @codemirror/theme-one-dark [![NPM version](https://img.shields.io/npm/v/@codemirror/theme-one-dark.svg)](https://www.npmjs.org/package/@codemirror/theme-one-dark) 4 | 5 | [ [**WEBSITE**](https://codemirror.net/) | [**ISSUES**](https://github.com/codemirror/dev/issues) | [**FORUM**](https://discuss.codemirror.net/c/next/) | [**CHANGELOG**](https://github.com/codemirror/theme-one-dark/blob/main/CHANGELOG.md) ] 6 | 7 | This package implements the One Dark theme for the 8 | [CodeMirror](https://codemirror.net/) code editor. 9 | 10 | The [project page](https://codemirror.net/) has more information, a 11 | number of [examples](https://codemirror.net/examples/) and the 12 | [documentation](https://codemirror.net/docs/). 13 | 14 | This code is released under an 15 | [MIT license](https://github.com/codemirror/theme-one-dark/tree/main/LICENSE). 16 | 17 | We aim to be an inclusive, welcoming community. To make that explicit, 18 | we have a [code of 19 | conduct](http://contributor-covenant.org/version/1/1/0/) that applies 20 | to communication around the project. 21 | 22 | ## API Reference 23 | 24 |
25 |
26 | oneDark: Extension
27 | 28 |

Extension to enable the One Dark theme (both the editor theme and 29 | the highlight style).

30 |
31 |
32 | oneDarkTheme: Extension
33 | 34 |

The editor theme styles for One Dark.

35 |
36 |
37 | oneDarkHighlightStyle: HighlightStyle
38 | 39 |

The highlighting style for code in the One Dark theme.

40 |
41 |
42 | color: {chalky: string, coral: string, cyan: string, invalid: string, ivory: string, stone: string, malibu: string, sage: string, whiskey: string, violet: string, darkBackground: string, highlightBackground: string, background: string, tooltipBackground: string, selection: string, cursor: string}
43 | 44 |

The colors used in the theme, as CSS color strings.

45 |
46 |
47 | -------------------------------------------------------------------------------- /src/one-dark.ts: -------------------------------------------------------------------------------- 1 | import {EditorView} from "@codemirror/view" 2 | import {Extension} from "@codemirror/state" 3 | import {HighlightStyle, syntaxHighlighting} from "@codemirror/language" 4 | import {tags as t} from "@lezer/highlight" 5 | 6 | // Using https://github.com/one-dark/vscode-one-dark-theme/ as reference for the colors 7 | 8 | const chalky = "#e5c07b", 9 | coral = "#e06c75", 10 | cyan = "#56b6c2", 11 | invalid = "#ffffff", 12 | ivory = "#abb2bf", 13 | stone = "#7d8799", // Brightened compared to original to increase contrast 14 | malibu = "#61afef", 15 | sage = "#98c379", 16 | whiskey = "#d19a66", 17 | violet = "#c678dd", 18 | darkBackground = "#21252b", 19 | highlightBackground = "#2c313a", 20 | background = "#282c34", 21 | tooltipBackground = "#353a42", 22 | selection = "#3E4451", 23 | cursor = "#528bff" 24 | 25 | /// The colors used in the theme, as CSS color strings. 26 | export const color = { 27 | chalky, 28 | coral, 29 | cyan, 30 | invalid, 31 | ivory, 32 | stone, 33 | malibu, 34 | sage, 35 | whiskey, 36 | violet, 37 | darkBackground, 38 | highlightBackground, 39 | background, 40 | tooltipBackground, 41 | selection, 42 | cursor 43 | } 44 | 45 | /// The editor theme styles for One Dark. 46 | export const oneDarkTheme = EditorView.theme({ 47 | "&": { 48 | color: ivory, 49 | backgroundColor: background 50 | }, 51 | 52 | ".cm-content": { 53 | caretColor: cursor 54 | }, 55 | 56 | ".cm-cursor, .cm-dropCursor": {borderLeftColor: cursor}, 57 | "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": {backgroundColor: selection}, 58 | 59 | ".cm-panels": {backgroundColor: darkBackground, color: ivory}, 60 | ".cm-panels.cm-panels-top": {borderBottom: "2px solid black"}, 61 | ".cm-panels.cm-panels-bottom": {borderTop: "2px solid black"}, 62 | 63 | ".cm-searchMatch": { 64 | backgroundColor: "#72a1ff59", 65 | outline: "1px solid #457dff" 66 | }, 67 | ".cm-searchMatch.cm-searchMatch-selected": { 68 | backgroundColor: "#6199ff2f" 69 | }, 70 | 71 | ".cm-activeLine": {backgroundColor: "#6699ff0b"}, 72 | ".cm-selectionMatch": {backgroundColor: "#aafe661a"}, 73 | 74 | "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": { 75 | backgroundColor: "#bad0f847" 76 | }, 77 | 78 | ".cm-gutters": { 79 | backgroundColor: background, 80 | color: stone, 81 | border: "none" 82 | }, 83 | 84 | ".cm-activeLineGutter": { 85 | backgroundColor: highlightBackground 86 | }, 87 | 88 | ".cm-foldPlaceholder": { 89 | backgroundColor: "transparent", 90 | border: "none", 91 | color: "#ddd" 92 | }, 93 | 94 | ".cm-tooltip": { 95 | border: "none", 96 | backgroundColor: tooltipBackground 97 | }, 98 | ".cm-tooltip .cm-tooltip-arrow:before": { 99 | borderTopColor: "transparent", 100 | borderBottomColor: "transparent" 101 | }, 102 | ".cm-tooltip .cm-tooltip-arrow:after": { 103 | borderTopColor: tooltipBackground, 104 | borderBottomColor: tooltipBackground 105 | }, 106 | ".cm-tooltip-autocomplete": { 107 | "& > ul > li[aria-selected]": { 108 | backgroundColor: highlightBackground, 109 | color: ivory 110 | } 111 | } 112 | }, {dark: true}) 113 | 114 | /// The highlighting style for code in the One Dark theme. 115 | export const oneDarkHighlightStyle = HighlightStyle.define([ 116 | {tag: t.keyword, 117 | color: violet}, 118 | {tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName], 119 | color: coral}, 120 | {tag: [t.function(t.variableName), t.labelName], 121 | color: malibu}, 122 | {tag: [t.color, t.constant(t.name), t.standard(t.name)], 123 | color: whiskey}, 124 | {tag: [t.definition(t.name), t.separator], 125 | color: ivory}, 126 | {tag: [t.typeName, t.className, t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], 127 | color: chalky}, 128 | {tag: [t.operator, t.operatorKeyword, t.url, t.escape, t.regexp, t.link, t.special(t.string)], 129 | color: cyan}, 130 | {tag: [t.meta, t.comment], 131 | color: stone}, 132 | {tag: t.strong, 133 | fontWeight: "bold"}, 134 | {tag: t.emphasis, 135 | fontStyle: "italic"}, 136 | {tag: t.strikethrough, 137 | textDecoration: "line-through"}, 138 | {tag: t.link, 139 | color: stone, 140 | textDecoration: "underline"}, 141 | {tag: t.heading, 142 | fontWeight: "bold", 143 | color: coral}, 144 | {tag: [t.atom, t.bool, t.special(t.variableName)], 145 | color: whiskey }, 146 | {tag: [t.processingInstruction, t.string, t.inserted], 147 | color: sage}, 148 | {tag: t.invalid, 149 | color: invalid}, 150 | ]) 151 | 152 | /// Extension to enable the One Dark theme (both the editor theme and 153 | /// the highlight style). 154 | export const oneDark: Extension = [oneDarkTheme, syntaxHighlighting(oneDarkHighlightStyle)] 155 | --------------------------------------------------------------------------------