├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── example ├── index.html └── index.ts ├── go.mod ├── go.sum ├── index.ts ├── main.go ├── package.json ├── rollup.config.js ├── screenshot.png ├── template.js ├── theme ├── aura.ts ├── dracula.ts ├── github-dark.ts ├── github-light.ts ├── material-dark.ts ├── material-light.ts ├── solarized-dark.ts ├── solarized-light.ts ├── tokyo-night-day.ts ├── tokyo-night-storm.ts └── tokyo-night.ts └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | /dist 2 | /codemirror-themes 3 | /node_modules 4 | /tmp 5 | package-lock.json 6 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /tmp 3 | /codemirror-themes 4 | /theme 5 | /main.go 6 | /rollup.config.js 7 | /template.js 8 | /tsconfig.json 9 | /go.* 10 | /~* 11 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (C) 2018-2021 by Dennis Dietrich 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Codemirror 6 Themes 2 | 3 | Not perfect themes for cm6, generated from vscode themes. 4 | 5 | ![](./screenshot.png) 6 | 7 | ## Install 8 | 9 | ```bash 10 | npm i @ddietr/codemirror-themes 11 | ``` 12 | 13 | ## Usage 14 | 15 | ```javascript 16 | import {materialLight} from '@ddietr/codemirror-themes/material-light' 17 | import {materialDark} from '@ddietr/codemirror-themes/material-dark' 18 | import {solarizedLight} from '@ddietr/codemirror-themes/solarized-light' 19 | import {solarizedDark} from '@ddietr/codemirror-themes/solarized-dark' 20 | import {dracula} from '@ddietr/codemirror-themes/dracula' 21 | import {githubLight} from '@ddietr/codemirror-themes/github-light' 22 | import {githubDark} from '@ddietr/codemirror-themes/github-dark' 23 | import {aura} from '@ddietr/codemirror-themes/aura' 24 | import {tokyoNight} from '@ddietr/codemirror-themes/tokyo-night' 25 | import {tokyoNightStorm} from '@ddietr/codemirror-themes/tokyo-night-storm' 26 | import {tokyoNightDay} from '@ddietr/codemirror-themes/tokyo-night-day' 27 | ``` 28 | 29 | ## Dev 30 | 31 | ``` 32 | # Start devserver with examples 33 | npm run dev 34 | ``` 35 | 36 | ## Build 37 | 38 | ```bash 39 | go build 40 | ./codemirror-themes 41 | npm i 42 | ``` 43 | -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 11 |
12 | 13 | 31 | -------------------------------------------------------------------------------- /example/index.ts: -------------------------------------------------------------------------------- 1 | import {EditorView, basicSetup} from 'codemirror' 2 | import {javascript} from '@codemirror/lang-javascript' 3 | import {aura} from '../theme/aura' 4 | import {dracula} from '../theme/dracula' 5 | import {githubDark} from '../theme/github-dark' 6 | import {githubLight} from '../theme/github-light' 7 | import {materialDark} from '../theme/material-dark' 8 | import {materialLight} from '../theme/material-light' 9 | import {solarizedDark} from '../theme/solarized-dark' 10 | import {solarizedLight} from '../theme/solarized-light' 11 | import {tokyoNight} from '../theme/tokyo-night' 12 | import {tokyoNightStorm} from '../theme/tokyo-night-storm' 13 | import {tokyoNightDay} from '../theme/tokyo-night-day' 14 | import {Extension} from '@codemirror/state' 15 | 16 | const parent = document.getElementById('examples')! 17 | const doc = document.getElementById('code')?.textContent?.trim() 18 | 19 | const createEditor = (theme: Extension) => { 20 | new EditorView({ 21 | doc, 22 | extensions: [ 23 | basicSetup, 24 | javascript({typescript: true}), 25 | theme, 26 | ], 27 | parent, 28 | }) 29 | } 30 | 31 | createEditor(aura) 32 | createEditor(dracula) 33 | createEditor(githubDark) 34 | createEditor(githubLight) 35 | createEditor(materialDark) 36 | createEditor(materialLight) 37 | createEditor(solarizedDark) 38 | createEditor(solarizedLight) 39 | createEditor(tokyoNight) 40 | createEditor(tokyoNightStorm) 41 | createEditor(tokyoNightDay) 42 | -------------------------------------------------------------------------------- /go.mod: -------------------------------------------------------------------------------- 1 | module github.com/dennis84/codemirror-themes 2 | 3 | go 1.18 4 | 5 | require ( 6 | github.com/hsluv/hsluv-go v2.0.0+incompatible // indirect 7 | github.com/tinode/jsonco v1.0.0 // indirect 8 | muzzammil.xyz/jsonc v0.0.0-20201229145248-615b0916ca38 // indirect 9 | ) 10 | -------------------------------------------------------------------------------- /go.sum: -------------------------------------------------------------------------------- 1 | github.com/hsluv/hsluv-go v2.0.0+incompatible h1:M/USwFTC5ZHhZ0LPbPkpDu6AWMESfYKu5PJTxk4MHuY= 2 | github.com/hsluv/hsluv-go v2.0.0+incompatible/go.mod h1:ibzdSDmJ9F0U68asF8lD6rnwkarCkAPqZ5keGEha93k= 3 | github.com/tinode/jsonco v1.0.0 h1:zVcpjzDvjuA1G+HLrckI5EiiRyq9jgV3x37OQl6e5FE= 4 | github.com/tinode/jsonco v1.0.0/go.mod h1:Bnavu3302Qfn2pILMNwASkelodgeew3IvDrbdzU84u8= 5 | muzzammil.xyz/jsonc v0.0.0-20201229145248-615b0916ca38 h1:RTgkUbDUEKgkFlwK9NsUAmI1t0zUo+kWKSm9bAbr0TQ= 6 | muzzammil.xyz/jsonc v0.0.0-20201229145248-615b0916ca38/go.mod h1:rFv8tUUKe+QLh7v02BhfxXEf4ZHhYD7unR93HL/1Uvo= 7 | -------------------------------------------------------------------------------- /index.ts: -------------------------------------------------------------------------------- 1 | // Main file is required, otherwise: 2 | // [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined in ... 3 | -------------------------------------------------------------------------------- /main.go: -------------------------------------------------------------------------------- 1 | package main 2 | 3 | import ( 4 | "archive/zip" 5 | "bytes" 6 | "encoding/json" 7 | "fmt" 8 | "github.com/hsluv/hsluv-go" 9 | "github.com/tinode/jsonco" 10 | "io" 11 | "io/ioutil" 12 | "log" 13 | "net/http" 14 | "os" 15 | "reflect" 16 | "strings" 17 | "text/template" 18 | ) 19 | 20 | // Theme ... 21 | type Theme struct { 22 | Name string 23 | URL string 24 | Target string 25 | File string 26 | Dark bool 27 | Invert bool 28 | Zip bool 29 | } 30 | 31 | func main() { 32 | themes := []Theme{ 33 | { 34 | Name: "dracula", 35 | URL: "https://marketplace.visualstudio.com/_apis/public/gallery/publishers/dracula-theme/vsextensions/theme-dracula/2.24.2/vspackage", 36 | Target: "dracula", 37 | File: "extension/theme/dracula.json", 38 | Dark: true, 39 | Invert: false, 40 | Zip: true, 41 | }, 42 | { 43 | Name: "solarized-light", 44 | URL: "https://raw.githubusercontent.com/microsoft/vscode/main/extensions/theme-solarized-light/themes/solarized-light-color-theme.json", 45 | Dark: false, 46 | Invert: false, 47 | Zip: false, 48 | }, 49 | { 50 | Name: "solarized-dark", 51 | URL: "https://raw.githubusercontent.com/microsoft/vscode/main/extensions/theme-solarized-dark/themes/solarized-dark-color-theme.json", 52 | Dark: true, 53 | Invert: false, 54 | Zip: false, 55 | }, 56 | { 57 | Name: "material-light", 58 | URL: "https://raw.githubusercontent.com/Dramaga11/vsc-material-theme/refs/heads/main/assets/vsc-community-material-theme-1.4.5.vsix", 59 | Target: "material", 60 | File: "extension/themes/Community-Material-Theme-Lighter.json", 61 | Dark: false, 62 | Invert: false, 63 | Zip: true, 64 | }, 65 | { 66 | Name: "material-dark", 67 | URL: "https://raw.githubusercontent.com/Dramaga11/vsc-material-theme/refs/heads/main/assets/vsc-community-material-theme-1.4.5.vsix", 68 | Target: "material", 69 | File: "extension/themes/Community-Material-Theme-Default.json", 70 | Dark: true, 71 | Invert: false, 72 | Zip: true, 73 | }, 74 | { 75 | Name: "github-light", 76 | URL: "https://marketplace.visualstudio.com/_apis/public/gallery/publishers/GitHub/vsextensions/github-vscode-theme/6.3.3/vspackage", 77 | Target: "github", 78 | File: "extension/themes/light.json", 79 | Dark: false, 80 | Invert: false, 81 | Zip: true, 82 | }, 83 | { 84 | Name: "github-dark", 85 | URL: "https://marketplace.visualstudio.com/_apis/public/gallery/publishers/GitHub/vsextensions/github-vscode-theme/6.3.3/vspackage", 86 | Target: "github", 87 | File: "extension/themes/dark.json", 88 | Dark: true, 89 | Invert: false, 90 | Zip: true, 91 | }, 92 | { 93 | Name: "aura", 94 | URL: "https://marketplace.visualstudio.com/_apis/public/gallery/publishers/DaltonMenezes/vsextensions/aura-theme/2.1.2/vspackage", 95 | Target: "aura", 96 | File: "extension/themes/aura-soft-dark-color-theme.json", 97 | Dark: true, 98 | Invert: false, 99 | Zip: true, 100 | }, 101 | { 102 | Name: "tokyo-night", 103 | URL: "https://marketplace.visualstudio.com/_apis/public/gallery/publishers/enkia/vsextensions/tokyo-night/0.9.7/vspackage", 104 | Target: "tokyo-night", 105 | File: "extension/themes/tokyo-night-color-theme.json", 106 | Dark: true, 107 | Invert: false, 108 | Zip: true, 109 | }, 110 | { 111 | Name: "tokyo-night-storm", 112 | URL: "https://marketplace.visualstudio.com/_apis/public/gallery/publishers/enkia/vsextensions/tokyo-night/0.9.7/vspackage", 113 | Target: "tokyo-night", 114 | File: "extension/themes/tokyo-night-storm-color-theme.json", 115 | Dark: true, 116 | Invert: false, 117 | Zip: true, 118 | }, 119 | { 120 | Name: "tokyo-night-day", 121 | URL: "https://marketplace.visualstudio.com/_apis/public/gallery/publishers/enkia/vsextensions/tokyo-night/0.9.7/vspackage", 122 | Target: "tokyo-night", 123 | File: "extension/themes/tokyo-night-color-theme.json", 124 | Dark: false, 125 | Invert: true, 126 | Zip: true, 127 | }, 128 | } 129 | 130 | for _, theme := range themes { 131 | fmt.Println("Process theme: ", theme.Name) 132 | 133 | if theme.Zip { 134 | filename := theme.Target + ".zip" 135 | if _, err := os.Stat("./tmp/" + filename); os.IsNotExist(err) { 136 | fmt.Println(" Download theme") 137 | downloadTheme(theme, filename) 138 | } 139 | 140 | fmt.Println(" Extract theme") 141 | content, err := extractTheme(theme) 142 | if err != nil { 143 | log.Fatal(err) 144 | } 145 | 146 | fmt.Println(" Generate template") 147 | generateTheme(theme, content) 148 | } else { 149 | filename := theme.Name + ".json" 150 | if _, err := os.Stat("./tmp/" + filename); os.IsNotExist(err) { 151 | fmt.Println(" Download theme") 152 | downloadTheme(theme, filename) 153 | } 154 | 155 | content, err := ioutil.ReadFile("./tmp/" + filename) 156 | if err != nil { 157 | log.Fatal(err) 158 | } 159 | 160 | fmt.Println(" Generate template") 161 | generateTheme(theme, content) 162 | } 163 | } 164 | } 165 | 166 | func addAlpha(hex string, theme Theme) *string { 167 | if len(hex) > 7 { 168 | return &hex 169 | } 170 | 171 | if len(hex) == 4 { 172 | hex = hex + hex[1:4] 173 | } 174 | 175 | h, s, l := hsluv.HsluvFromHex(hex) 176 | if theme.Dark { 177 | l = l + 20 178 | } else { 179 | l = l - 20 180 | } 181 | 182 | res := hsluv.HsluvToHex(h, s, l) + "22" 183 | return &res 184 | } 185 | 186 | func invertColor(hex string) *string { 187 | alpha := "" 188 | if len(hex) > 7 { 189 | alpha = hex[len(hex)-2:] 190 | hex = hex[0:7] 191 | } 192 | 193 | h, s, l := hsluv.HsluvFromHex(hex) 194 | dayBrightness := 0.3 195 | 196 | l = 100 - l 197 | if l < 40 { 198 | l = l + (100-l)*dayBrightness 199 | } 200 | 201 | res := hsluv.HsluvToHex(h, s, l) + alpha 202 | return &res 203 | } 204 | 205 | func invertColors(params TemplateParams) { 206 | params.Background.Color = invertColor(*params.Background.Color) 207 | params.Foreground.Color = invertColor(*params.Foreground.Color) 208 | params.Selection.Color = invertColor(*params.Selection.Color) 209 | params.Cursor.Color = invertColor(*params.Cursor.Color) 210 | params.DropdownBackground.Color = invertColor(*params.DropdownBackground.Color) 211 | params.DropdownBorder.Color = invertColor(*params.DropdownBorder.Color) 212 | params.ActiveLine.Color = invertColor(*params.ActiveLine.Color) 213 | params.LineNumber.Color = invertColor(*params.LineNumber.Color) 214 | params.LineNumberActive.Color = invertColor(*params.LineNumberActive.Color) 215 | params.MatchingBracket.Color = invertColor(*params.MatchingBracket.Color) 216 | params.Keyword.Color = invertColor(*params.Keyword.Color) 217 | params.Storage.Color = invertColor(*params.Storage.Color) 218 | params.Parameter.Color = invertColor(*params.Parameter.Color) 219 | params.Variable.Color = invertColor(*params.Variable.Color) 220 | params.Function.Color = invertColor(*params.Function.Color) 221 | params.String.Color = invertColor(*params.String.Color) 222 | params.Constant.Color = invertColor(*params.Constant.Color) 223 | params.Type.Color = invertColor(*params.Type.Color) 224 | params.Class.Color = invertColor(*params.Class.Color) 225 | params.Number.Color = invertColor(*params.Number.Color) 226 | params.Comment.Color = invertColor(*params.Comment.Color) 227 | params.Heading.Color = invertColor(*params.Heading.Color) 228 | params.Invalid.Color = invertColor(*params.Invalid.Color) 229 | params.Regexp.Color = invertColor(*params.Regexp.Color) 230 | } 231 | 232 | func generateTheme(theme Theme, content []byte) { 233 | params := makeTemplateParams(theme, content) 234 | if theme.Invert { 235 | invertColors(params) 236 | } 237 | 238 | params.ActiveLine.Color = addAlpha(*params.ActiveLine.Color, theme) 239 | 240 | t, err := template.ParseFiles("./template.js") 241 | if err != nil { 242 | log.Fatal(err) 243 | } 244 | 245 | out, err := os.Create("./theme/" + theme.Name + ".ts") 246 | if err != nil { 247 | log.Fatal(err) 248 | } 249 | 250 | err = t.Execute(out, params) 251 | if err != nil { 252 | log.Fatal(err) 253 | } 254 | 255 | out.Close() 256 | } 257 | 258 | // Style ... 259 | type Style struct { 260 | Color *string 261 | FontStyle *string 262 | Prio *int 263 | } 264 | 265 | // TokenColorSettings ... 266 | type TokenColorSettings struct { 267 | Foreground *string 268 | FontStyle *string 269 | } 270 | 271 | // TokenColor ... 272 | type TokenColor struct { 273 | Scope interface{} 274 | Settings TokenColorSettings 275 | } 276 | 277 | // VsCodeTheme ... 278 | type VsCodeTheme struct { 279 | Colors map[string]string 280 | TokenColors []TokenColor 281 | } 282 | 283 | func find(data VsCodeTheme, keys ...string) *Style { 284 | style := Style{} 285 | 286 | for _, key := range keys { 287 | if value, exist := data.Colors[key]; exist && style.Color == nil { 288 | return &Style{Color: &value} 289 | } 290 | 291 | for _, tokenColor := range data.TokenColors { 292 | scopes := []string{} 293 | rt := reflect.TypeOf(tokenColor.Scope) 294 | if tokenColor.Scope == nil { 295 | continue 296 | } 297 | 298 | switch rt.Kind() { 299 | case reflect.Slice: 300 | for _, s := range tokenColor.Scope.([]interface{}) { 301 | scopes = append(scopes, s.(string)) 302 | } 303 | case reflect.String: 304 | splitted := strings.Split(tokenColor.Scope.(string), ",") 305 | for _, s := range splitted { 306 | scopes = append(scopes, strings.TrimSpace(s)) 307 | } 308 | default: 309 | panic(fmt.Sprintf("Unecpected scope type %s", rt)) 310 | } 311 | 312 | for i, scope := range scopes { 313 | if scope == key && 314 | (style.Color == nil || *style.Prio > i) && 315 | tokenColor.Settings.Foreground != nil { 316 | prio := i 317 | style.Color = tokenColor.Settings.Foreground 318 | style.Prio = &prio 319 | } 320 | 321 | if scope == key && style.FontStyle == nil && tokenColor.Settings.FontStyle != nil { 322 | style.FontStyle = tokenColor.Settings.FontStyle 323 | } 324 | } 325 | } 326 | } 327 | 328 | if style.Color == nil { 329 | panic(fmt.Sprintf("Could not find color by: %s", keys)) 330 | } 331 | 332 | return &style 333 | } 334 | 335 | // TemplateParams ... 336 | type TemplateParams struct { 337 | ExportPrefix string 338 | Dark bool 339 | 340 | // Editor 341 | Background *Style 342 | Foreground *Style 343 | Selection *Style 344 | Cursor *Style 345 | DropdownBackground *Style 346 | DropdownBorder *Style 347 | ActiveLine *Style 348 | LineNumber *Style 349 | LineNumberActive *Style 350 | MatchingBracket *Style 351 | 352 | // Syntax 353 | Keyword *Style // if else, etc 354 | Storage *Style // const, let, etc - Not supported in CM 355 | Parameter *Style // fn(parmater) - Not supported in CM 356 | Variable *Style 357 | Function *Style 358 | String *Style 359 | Constant *Style // ??? 360 | Type *Style // x: MyType 361 | Class *Style // class MyClass 362 | Number *Style 363 | Comment *Style 364 | Heading *Style 365 | Invalid *Style 366 | Regexp *Style 367 | } 368 | 369 | func makeTemplateParams(theme Theme, content []byte) TemplateParams { 370 | var data VsCodeTheme 371 | jr := jsonco.New(bytes.NewBuffer(content)) 372 | json.NewDecoder(jr).Decode(&data) 373 | 374 | params := TemplateParams{ 375 | ExportPrefix: kebabToCamelCase(theme.Name), 376 | Dark: theme.Dark, 377 | // Layout 378 | Background: find(data, "editor.background"), 379 | Foreground: find(data, "foreground", "input.foreground"), 380 | Selection: find(data, "editor.selectionBackground"), 381 | Cursor: find(data, "editorCursor.foreground", "foreground"), 382 | DropdownBackground: find(data, "editor.background"), 383 | DropdownBorder: find(data, "dropdown.border", "foreground"), 384 | ActiveLine: find(data, "editor.background"), 385 | LineNumber: find(data, "editorLineNumber.foreground", "input.foreground", "foreground"), 386 | LineNumberActive: find(data, "editorLineNumber.activeForeground", "input.foreground", "foreground"), 387 | MatchingBracket: find(data, "editorBracketMatch.background", "editor.lineHighlightBackground", "editor.selectionBackground"), 388 | // Syntax 389 | Keyword: find(data, "keyword"), 390 | Storage: find(data, "storage", "keyword"), 391 | Variable: find(data, "variable", "variable.parameter", "variable.other", "variable.language", "foreground"), 392 | Parameter: find(data, "variable.parameter", "variable.other", "variable"), 393 | Function: find(data, "entity.name.function", "support.function", "entity.name", "support"), 394 | String: find(data, "string"), 395 | Constant: find(data, "constant", "constant.character", "constant.keyword"), 396 | Type: find(data, "entity.name.type", "entity.name.class", "support.type", "support"), 397 | Class: find(data, "entity.name.class", "entity.name"), 398 | Number: find(data, "constant.numeric", "constant"), 399 | Comment: find(data, "comment"), 400 | Heading: find(data, "markup.heading", "markup.heading.setext", "heading.1.markdown entity.name"), 401 | Invalid: find(data, "invalid", "editorError.foreground", "errorForeground", "foreground", "input.foreground"), 402 | Regexp: find(data, "string.regexp", "string"), 403 | } 404 | 405 | return params 406 | } 407 | 408 | func extractTheme(theme Theme) ([]byte, error) { 409 | r, err := zip.OpenReader("tmp/" + theme.Target + ".zip") 410 | 411 | if err != nil { 412 | log.Fatal(err) 413 | } 414 | 415 | defer r.Close() 416 | 417 | for _, f := range r.File { 418 | if f.Name != theme.File { 419 | continue 420 | } 421 | 422 | rc, err := f.Open() 423 | if err != nil { 424 | log.Fatal(err) 425 | } 426 | 427 | content, err := ioutil.ReadAll(rc) 428 | if err != nil { 429 | log.Fatal(err) 430 | } 431 | 432 | rc.Close() 433 | 434 | return content, nil 435 | } 436 | 437 | return nil, fmt.Errorf("Cound not find file %s in extension", theme.File) 438 | } 439 | 440 | func downloadTheme(theme Theme, filename string) { 441 | resp, err := http.Get(theme.URL) 442 | if err != nil { 443 | log.Fatal(err) 444 | } 445 | 446 | defer resp.Body.Close() 447 | if resp.StatusCode != 200 { 448 | log.Fatal("Could not download theme: ", theme, "StatusCode: ", resp.StatusCode) 449 | } 450 | 451 | _ = os.Mkdir("./tmp", 0700) 452 | 453 | // Create the file 454 | out, err := os.Create("tmp/" + filename) 455 | if err != nil { 456 | log.Fatal(err) 457 | } 458 | 459 | defer out.Close() 460 | 461 | _, err = io.Copy(out, resp.Body) 462 | 463 | if err != nil { 464 | log.Fatal(err) 465 | } 466 | } 467 | 468 | func kebabToCamelCase(kebab string) (camelCase string) { 469 | isToUpper := false 470 | for _, runeValue := range kebab { 471 | if isToUpper { 472 | camelCase += strings.ToUpper(string(runeValue)) 473 | isToUpper = false 474 | } else { 475 | if runeValue == '-' { 476 | isToUpper = true 477 | } else { 478 | camelCase += string(runeValue) 479 | } 480 | } 481 | } 482 | return 483 | } 484 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@ddietr/codemirror-themes", 3 | "version": "1.5.1", 4 | "license": "MIT", 5 | "description": "", 6 | "repository": "https://github.com/dennis84/codemirror-themes", 7 | "keywords": [], 8 | "author": { 9 | "name": "Dennis Dietrich", 10 | "email": "ddietr@protonmail.com" 11 | }, 12 | "type": "module", 13 | "exports": { 14 | ".": { 15 | "import": "./dist/index.js", 16 | "require": "./dist/index.cjs" 17 | }, 18 | "./theme/*": { 19 | "import": "./dist/theme/*.js", 20 | "require": "./dist/theme/*.cjs" 21 | }, 22 | "./*": { 23 | "import": "./dist/theme/*.js", 24 | "require": "./dist/theme/*.cjs" 25 | } 26 | }, 27 | "typesVersions": { 28 | "*": { 29 | "*": [ 30 | "./dist/theme/*", 31 | "./dist/*" 32 | ] 33 | } 34 | }, 35 | "sideEffects": false, 36 | "scripts": { 37 | "prepare": "rm -rf ./dist && rollup -c", 38 | "dev": "vite ./example" 39 | }, 40 | "devDependencies": { 41 | "@codemirror/lang-javascript": "^6.1.4", 42 | "@rollup/plugin-typescript": "^11.0.0", 43 | "codemirror": "^6.0.1", 44 | "rollup": "^3.17.3", 45 | "tslib": "^2.5.0", 46 | "typescript": "^4.9.5", 47 | "vite": "^4.1.4" 48 | }, 49 | "dependencies": { 50 | "@codemirror/language": "^6.0.0", 51 | "@codemirror/state": "^6.0.0", 52 | "@codemirror/view": "^6.0.0", 53 | "@lezer/highlight": "^1.0.0" 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import typescript from '@rollup/plugin-typescript' 2 | import {readdirSync} from 'fs' 3 | import {join} from 'path' 4 | 5 | const themes = './theme' 6 | 7 | const builds = readdirSync(themes).map((f) => ({ 8 | input: join(themes, f), 9 | output: [ 10 | { 11 | format: 'esm', 12 | dir: './dist/theme', 13 | externalLiveBindings: false, 14 | }, 15 | { 16 | format: 'cjs', 17 | dir: './dist/theme', 18 | externalLiveBindings: false, 19 | entryFileNames: '[name].cjs', 20 | }, 21 | ], 22 | plugins: [typescript()], 23 | external: (id) => id != 'tslib' && !/^(\.?\/|\w:)/.test(id), 24 | })) 25 | 26 | export default [ 27 | ...builds, 28 | { 29 | input: './index.ts', 30 | output: [ 31 | { 32 | format: 'esm', 33 | dir: './dist', 34 | externalLiveBindings: false, 35 | }, 36 | { 37 | format: 'cjs', 38 | dir: './dist', 39 | externalLiveBindings: false, 40 | entryFileNames: '[name].cjs', 41 | }, 42 | ], 43 | plugins: [typescript()], 44 | external: (id) => id != 'tslib' && !/^(\.?\/|\w:)/.test(id), 45 | }, 46 | ] 47 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dennis84/codemirror-themes/d349f2e6679816bf71f0d58d3126a40c3e63ca23/screenshot.png -------------------------------------------------------------------------------- /template.js: -------------------------------------------------------------------------------- 1 | import {EditorView, lineNumbers} 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 | export const config = { 7 | name: '{{.ExportPrefix}}', 8 | dark: {{.Dark}}, 9 | background: '{{.Background.Color}}', 10 | foreground: '{{.Foreground.Color}}', 11 | selection: '{{.Selection.Color}}', 12 | cursor: '{{.Cursor.Color}}', 13 | dropdownBackground: '{{.DropdownBackground.Color}}', 14 | dropdownBorder: '{{.DropdownBorder.Color}}', 15 | activeLine: '{{.ActiveLine.Color}}', 16 | lineNumber: '{{.LineNumber.Color}}', 17 | lineNumberActive: '{{.LineNumberActive.Color}}', 18 | matchingBracket: '{{.MatchingBracket.Color}}', 19 | keyword: '{{.Keyword.Color}}', 20 | storage: '{{.Storage.Color}}', 21 | variable: '{{.Variable.Color}}', 22 | parameter: '{{.Parameter.Color}}', 23 | function: '{{.Function.Color}}', 24 | string: '{{.String.Color}}', 25 | constant: '{{.Constant.Color}}', 26 | type: '{{.Type.Color}}', 27 | class: '{{.Class.Color}}', 28 | number: '{{.Number.Color}}', 29 | comment: '{{.Comment.Color}}', 30 | heading: '{{.Heading.Color}}', 31 | invalid: '{{.Invalid.Color}}', 32 | regexp: '{{.Regexp.Color}}', 33 | } 34 | 35 | export const {{.ExportPrefix}}Theme = EditorView.theme({ 36 | '&': { 37 | color: config.foreground, 38 | backgroundColor: config.background, 39 | }, 40 | 41 | '.cm-content': {caretColor: config.cursor}, 42 | 43 | '.cm-cursor, .cm-dropCursor': {borderLeftColor: config.cursor}, 44 | '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {backgroundColor: config.selection}, 45 | 46 | '.cm-panels': {backgroundColor: config.dropdownBackground, color: config.foreground}, 47 | '.cm-panels.cm-panels-top': {borderBottom: '2px solid black'}, 48 | '.cm-panels.cm-panels-bottom': {borderTop: '2px solid black'}, 49 | 50 | '.cm-searchMatch': { 51 | backgroundColor: config.dropdownBackground, 52 | outline: `1px solid ${config.dropdownBorder}` 53 | }, 54 | '.cm-searchMatch.cm-searchMatch-selected': { 55 | backgroundColor: config.selection 56 | }, 57 | 58 | '.cm-activeLine': {backgroundColor: config.activeLine}, 59 | '.cm-selectionMatch': {backgroundColor: config.selection}, 60 | 61 | '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': { 62 | backgroundColor: config.matchingBracket, 63 | outline: 'none' 64 | }, 65 | 66 | '.cm-gutters': { 67 | backgroundColor: config.background, 68 | color: config.foreground, 69 | border: 'none' 70 | }, 71 | '.cm-activeLineGutter': {backgroundColor: config.background}, 72 | 73 | '.cm-lineNumbers .cm-gutterElement': {color: config.lineNumber}, 74 | '.cm-lineNumbers .cm-activeLineGutter': {color: config.lineNumberActive}, 75 | 76 | '.cm-foldPlaceholder': { 77 | backgroundColor: 'transparent', 78 | border: 'none', 79 | color: config.foreground 80 | }, 81 | '.cm-tooltip': { 82 | border: `1px solid ${config.dropdownBorder}`, 83 | backgroundColor: config.dropdownBackground, 84 | color: config.foreground, 85 | }, 86 | '.cm-tooltip .cm-tooltip-arrow:before': { 87 | borderTopColor: 'transparent', 88 | borderBottomColor: 'transparent' 89 | }, 90 | '.cm-tooltip .cm-tooltip-arrow:after': { 91 | borderTopColor: config.foreground, 92 | borderBottomColor: config.foreground, 93 | }, 94 | '.cm-tooltip-autocomplete': { 95 | '& > ul > li[aria-selected]': { 96 | background: config.selection, 97 | color: config.foreground, 98 | } 99 | } 100 | }, {dark: config.dark}) 101 | 102 | export const {{.ExportPrefix}}HighlightStyle = HighlightStyle.define([ 103 | {tag: t.keyword, color: config.keyword},{{/* const, let, function, if */}} 104 | {tag: [t.name, t.deleted, t.character, t.macroName], color: config.variable},{{/* btn, document */}} 105 | {tag: [t.propertyName], color: config.function},{{/* getElementById */}} 106 | {tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: config.string},{{/* "string" */}} 107 | {tag: [t.function(t.variableName), t.labelName], color: config.function},{{/* render */}} 108 | {tag: [t.color, t.constant(t.name), t.standard(t.name)], color: config.constant},{{/* ??? */}} 109 | {tag: [t.definition(t.name), t.separator], color: config.variable},{{/* btn, count, fn render() */}} 110 | {tag: [t.className], color: config.class}, 111 | {tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: config.number}, 112 | {tag: [t.typeName], color: config.type, fontStyle: config.type}, 113 | {tag: [t.operator, t.operatorKeyword], color: config.keyword}, 114 | {tag: [t.url, t.escape, t.regexp, t.link], color: config.regexp}, 115 | {tag: [t.meta, t.comment], color: config.comment}, 116 | {tag: t.strong, fontWeight: 'bold'}, 117 | {tag: t.emphasis, fontStyle: 'italic'}, 118 | {tag: t.link, textDecoration: 'underline'}, 119 | {tag: t.heading, fontWeight: 'bold', color: config.heading}, 120 | {tag: [t.atom, t.bool, t.special(t.variableName)], color: config.variable}, 121 | {tag: t.invalid, color: config.invalid}, 122 | {tag: t.strikethrough, textDecoration: 'line-through'}, 123 | ]) 124 | 125 | export const {{.ExportPrefix}}: Extension = [ 126 | {{.ExportPrefix}}Theme, 127 | syntaxHighlighting({{.ExportPrefix}}HighlightStyle), 128 | ] 129 | -------------------------------------------------------------------------------- /theme/aura.ts: -------------------------------------------------------------------------------- 1 | import {EditorView, lineNumbers} 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 | export const config = { 7 | name: 'aura', 8 | dark: true, 9 | background: '#21202e', 10 | foreground: '#edecee', 11 | selection: '#3d375e7f', 12 | cursor: '#a277ff', 13 | dropdownBackground: '#21202e', 14 | dropdownBorder: '#3b334b', 15 | activeLine: '#4d4b6622', 16 | lineNumber: '#a394f033', 17 | lineNumberActive: '#cdccce', 18 | matchingBracket: '#a394f033', 19 | keyword: '#a277ff', 20 | storage: '#a277ff', 21 | variable: '#edecee', 22 | parameter: '#edecee', 23 | function: '#ffca85', 24 | string: '#61ffca', 25 | constant: '#61ffca', 26 | type: '#82e2ff', 27 | class: '#82e2ff', 28 | number: '#61ffca', 29 | comment: '#6d6d6d', 30 | heading: '#a277ff', 31 | invalid: '#ff6767', 32 | regexp: '#61ffca', 33 | } 34 | 35 | export const auraTheme = EditorView.theme({ 36 | '&': { 37 | color: config.foreground, 38 | backgroundColor: config.background, 39 | }, 40 | 41 | '.cm-content': {caretColor: config.cursor}, 42 | 43 | '.cm-cursor, .cm-dropCursor': {borderLeftColor: config.cursor}, 44 | '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {backgroundColor: config.selection}, 45 | 46 | '.cm-panels': {backgroundColor: config.dropdownBackground, color: config.foreground}, 47 | '.cm-panels.cm-panels-top': {borderBottom: '2px solid black'}, 48 | '.cm-panels.cm-panels-bottom': {borderTop: '2px solid black'}, 49 | 50 | '.cm-searchMatch': { 51 | backgroundColor: config.dropdownBackground, 52 | outline: `1px solid ${config.dropdownBorder}` 53 | }, 54 | '.cm-searchMatch.cm-searchMatch-selected': { 55 | backgroundColor: config.selection 56 | }, 57 | 58 | '.cm-activeLine': {backgroundColor: config.activeLine}, 59 | '.cm-selectionMatch': {backgroundColor: config.selection}, 60 | 61 | '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': { 62 | backgroundColor: config.matchingBracket, 63 | outline: 'none' 64 | }, 65 | 66 | '.cm-gutters': { 67 | backgroundColor: config.background, 68 | color: config.foreground, 69 | border: 'none' 70 | }, 71 | '.cm-activeLineGutter': {backgroundColor: config.background}, 72 | 73 | '.cm-lineNumbers .cm-gutterElement': {color: config.lineNumber}, 74 | '.cm-lineNumbers .cm-activeLineGutter': {color: config.lineNumberActive}, 75 | 76 | '.cm-foldPlaceholder': { 77 | backgroundColor: 'transparent', 78 | border: 'none', 79 | color: config.foreground 80 | }, 81 | '.cm-tooltip': { 82 | border: `1px solid ${config.dropdownBorder}`, 83 | backgroundColor: config.dropdownBackground, 84 | color: config.foreground, 85 | }, 86 | '.cm-tooltip .cm-tooltip-arrow:before': { 87 | borderTopColor: 'transparent', 88 | borderBottomColor: 'transparent' 89 | }, 90 | '.cm-tooltip .cm-tooltip-arrow:after': { 91 | borderTopColor: config.foreground, 92 | borderBottomColor: config.foreground, 93 | }, 94 | '.cm-tooltip-autocomplete': { 95 | '& > ul > li[aria-selected]': { 96 | background: config.selection, 97 | color: config.foreground, 98 | } 99 | } 100 | }, {dark: config.dark}) 101 | 102 | export const auraHighlightStyle = HighlightStyle.define([ 103 | {tag: t.keyword, color: config.keyword}, 104 | {tag: [t.name, t.deleted, t.character, t.macroName], color: config.variable}, 105 | {tag: [t.propertyName], color: config.function}, 106 | {tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: config.string}, 107 | {tag: [t.function(t.variableName), t.labelName], color: config.function}, 108 | {tag: [t.color, t.constant(t.name), t.standard(t.name)], color: config.constant}, 109 | {tag: [t.definition(t.name), t.separator], color: config.variable}, 110 | {tag: [t.className], color: config.class}, 111 | {tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: config.number}, 112 | {tag: [t.typeName], color: config.type, fontStyle: config.type}, 113 | {tag: [t.operator, t.operatorKeyword], color: config.keyword}, 114 | {tag: [t.url, t.escape, t.regexp, t.link], color: config.regexp}, 115 | {tag: [t.meta, t.comment], color: config.comment}, 116 | {tag: t.strong, fontWeight: 'bold'}, 117 | {tag: t.emphasis, fontStyle: 'italic'}, 118 | {tag: t.link, textDecoration: 'underline'}, 119 | {tag: t.heading, fontWeight: 'bold', color: config.heading}, 120 | {tag: [t.atom, t.bool, t.special(t.variableName)], color: config.variable}, 121 | {tag: t.invalid, color: config.invalid}, 122 | {tag: t.strikethrough, textDecoration: 'line-through'}, 123 | ]) 124 | 125 | export const aura: Extension = [ 126 | auraTheme, 127 | syntaxHighlighting(auraHighlightStyle), 128 | ] 129 | -------------------------------------------------------------------------------- /theme/dracula.ts: -------------------------------------------------------------------------------- 1 | import {EditorView, lineNumbers} 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 | export const config = { 7 | name: 'dracula', 8 | dark: true, 9 | background: '#282A36', 10 | foreground: '#F8F8F2', 11 | selection: '#44475A', 12 | cursor: '#F8F8F2', 13 | dropdownBackground: '#282A36', 14 | dropdownBorder: '#191A21', 15 | activeLine: '#53576c22', 16 | lineNumber: '#6272A4', 17 | lineNumberActive: '#F8F8F2', 18 | matchingBracket: '#44475A', 19 | keyword: '#FF79C6', 20 | storage: '#FF79C6', 21 | variable: '#F8F8F2', 22 | parameter: '#F8F8F2', 23 | function: '#50FA7B', 24 | string: '#F1FA8C', 25 | constant: '#BD93F9', 26 | type: '#8BE9FD', 27 | class: '#8BE9FD', 28 | number: '#BD93F9', 29 | comment: '#6272A4', 30 | heading: '#BD93F9', 31 | invalid: '#FF5555', 32 | regexp: '#F1FA8C', 33 | } 34 | 35 | export const draculaTheme = EditorView.theme({ 36 | '&': { 37 | color: config.foreground, 38 | backgroundColor: config.background, 39 | }, 40 | 41 | '.cm-content': {caretColor: config.cursor}, 42 | 43 | '.cm-cursor, .cm-dropCursor': {borderLeftColor: config.cursor}, 44 | '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {backgroundColor: config.selection}, 45 | 46 | '.cm-panels': {backgroundColor: config.dropdownBackground, color: config.foreground}, 47 | '.cm-panels.cm-panels-top': {borderBottom: '2px solid black'}, 48 | '.cm-panels.cm-panels-bottom': {borderTop: '2px solid black'}, 49 | 50 | '.cm-searchMatch': { 51 | backgroundColor: config.dropdownBackground, 52 | outline: `1px solid ${config.dropdownBorder}` 53 | }, 54 | '.cm-searchMatch.cm-searchMatch-selected': { 55 | backgroundColor: config.selection 56 | }, 57 | 58 | '.cm-activeLine': {backgroundColor: config.activeLine}, 59 | '.cm-selectionMatch': {backgroundColor: config.selection}, 60 | 61 | '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': { 62 | backgroundColor: config.matchingBracket, 63 | outline: 'none' 64 | }, 65 | 66 | '.cm-gutters': { 67 | backgroundColor: config.background, 68 | color: config.foreground, 69 | border: 'none' 70 | }, 71 | '.cm-activeLineGutter': {backgroundColor: config.background}, 72 | 73 | '.cm-lineNumbers .cm-gutterElement': {color: config.lineNumber}, 74 | '.cm-lineNumbers .cm-activeLineGutter': {color: config.lineNumberActive}, 75 | 76 | '.cm-foldPlaceholder': { 77 | backgroundColor: 'transparent', 78 | border: 'none', 79 | color: config.foreground 80 | }, 81 | '.cm-tooltip': { 82 | border: `1px solid ${config.dropdownBorder}`, 83 | backgroundColor: config.dropdownBackground, 84 | color: config.foreground, 85 | }, 86 | '.cm-tooltip .cm-tooltip-arrow:before': { 87 | borderTopColor: 'transparent', 88 | borderBottomColor: 'transparent' 89 | }, 90 | '.cm-tooltip .cm-tooltip-arrow:after': { 91 | borderTopColor: config.foreground, 92 | borderBottomColor: config.foreground, 93 | }, 94 | '.cm-tooltip-autocomplete': { 95 | '& > ul > li[aria-selected]': { 96 | background: config.selection, 97 | color: config.foreground, 98 | } 99 | } 100 | }, {dark: config.dark}) 101 | 102 | export const draculaHighlightStyle = HighlightStyle.define([ 103 | {tag: t.keyword, color: config.keyword}, 104 | {tag: [t.name, t.deleted, t.character, t.macroName], color: config.variable}, 105 | {tag: [t.propertyName], color: config.function}, 106 | {tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: config.string}, 107 | {tag: [t.function(t.variableName), t.labelName], color: config.function}, 108 | {tag: [t.color, t.constant(t.name), t.standard(t.name)], color: config.constant}, 109 | {tag: [t.definition(t.name), t.separator], color: config.variable}, 110 | {tag: [t.className], color: config.class}, 111 | {tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: config.number}, 112 | {tag: [t.typeName], color: config.type, fontStyle: config.type}, 113 | {tag: [t.operator, t.operatorKeyword], color: config.keyword}, 114 | {tag: [t.url, t.escape, t.regexp, t.link], color: config.regexp}, 115 | {tag: [t.meta, t.comment], color: config.comment}, 116 | {tag: t.strong, fontWeight: 'bold'}, 117 | {tag: t.emphasis, fontStyle: 'italic'}, 118 | {tag: t.link, textDecoration: 'underline'}, 119 | {tag: t.heading, fontWeight: 'bold', color: config.heading}, 120 | {tag: [t.atom, t.bool, t.special(t.variableName)], color: config.variable}, 121 | {tag: t.invalid, color: config.invalid}, 122 | {tag: t.strikethrough, textDecoration: 'line-through'}, 123 | ]) 124 | 125 | export const dracula: Extension = [ 126 | draculaTheme, 127 | syntaxHighlighting(draculaHighlightStyle), 128 | ] 129 | -------------------------------------------------------------------------------- /theme/github-dark.ts: -------------------------------------------------------------------------------- 1 | import {EditorView, lineNumbers} 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 | export const config = { 7 | name: 'githubDark', 8 | dark: true, 9 | background: '#24292e', 10 | foreground: '#d1d5da', 11 | selection: '#3392FF44', 12 | cursor: '#c8e1ff', 13 | dropdownBackground: '#24292e', 14 | dropdownBorder: '#1b1f23', 15 | activeLine: '#4d566022', 16 | lineNumber: '#444d56', 17 | lineNumberActive: '#e1e4e8', 18 | matchingBracket: '#17E5E650', 19 | keyword: '#f97583', 20 | storage: '#f97583', 21 | variable: '#ffab70', 22 | parameter: '#e1e4e8', 23 | function: '#79b8ff', 24 | string: '#9ecbff', 25 | constant: '#79b8ff', 26 | type: '#79b8ff', 27 | class: '#b392f0', 28 | number: '#79b8ff', 29 | comment: '#6a737d', 30 | heading: '#79b8ff', 31 | invalid: '#f97583', 32 | regexp: '#9ecbff', 33 | } 34 | 35 | export const githubDarkTheme = EditorView.theme({ 36 | '&': { 37 | color: config.foreground, 38 | backgroundColor: config.background, 39 | }, 40 | 41 | '.cm-content': {caretColor: config.cursor}, 42 | 43 | '.cm-cursor, .cm-dropCursor': {borderLeftColor: config.cursor}, 44 | '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {backgroundColor: config.selection}, 45 | 46 | '.cm-panels': {backgroundColor: config.dropdownBackground, color: config.foreground}, 47 | '.cm-panels.cm-panels-top': {borderBottom: '2px solid black'}, 48 | '.cm-panels.cm-panels-bottom': {borderTop: '2px solid black'}, 49 | 50 | '.cm-searchMatch': { 51 | backgroundColor: config.dropdownBackground, 52 | outline: `1px solid ${config.dropdownBorder}` 53 | }, 54 | '.cm-searchMatch.cm-searchMatch-selected': { 55 | backgroundColor: config.selection 56 | }, 57 | 58 | '.cm-activeLine': {backgroundColor: config.activeLine}, 59 | '.cm-selectionMatch': {backgroundColor: config.selection}, 60 | 61 | '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': { 62 | backgroundColor: config.matchingBracket, 63 | outline: 'none' 64 | }, 65 | 66 | '.cm-gutters': { 67 | backgroundColor: config.background, 68 | color: config.foreground, 69 | border: 'none' 70 | }, 71 | '.cm-activeLineGutter': {backgroundColor: config.background}, 72 | 73 | '.cm-lineNumbers .cm-gutterElement': {color: config.lineNumber}, 74 | '.cm-lineNumbers .cm-activeLineGutter': {color: config.lineNumberActive}, 75 | 76 | '.cm-foldPlaceholder': { 77 | backgroundColor: 'transparent', 78 | border: 'none', 79 | color: config.foreground 80 | }, 81 | '.cm-tooltip': { 82 | border: `1px solid ${config.dropdownBorder}`, 83 | backgroundColor: config.dropdownBackground, 84 | color: config.foreground, 85 | }, 86 | '.cm-tooltip .cm-tooltip-arrow:before': { 87 | borderTopColor: 'transparent', 88 | borderBottomColor: 'transparent' 89 | }, 90 | '.cm-tooltip .cm-tooltip-arrow:after': { 91 | borderTopColor: config.foreground, 92 | borderBottomColor: config.foreground, 93 | }, 94 | '.cm-tooltip-autocomplete': { 95 | '& > ul > li[aria-selected]': { 96 | background: config.selection, 97 | color: config.foreground, 98 | } 99 | } 100 | }, {dark: config.dark}) 101 | 102 | export const githubDarkHighlightStyle = HighlightStyle.define([ 103 | {tag: t.keyword, color: config.keyword}, 104 | {tag: [t.name, t.deleted, t.character, t.macroName], color: config.variable}, 105 | {tag: [t.propertyName], color: config.function}, 106 | {tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: config.string}, 107 | {tag: [t.function(t.variableName), t.labelName], color: config.function}, 108 | {tag: [t.color, t.constant(t.name), t.standard(t.name)], color: config.constant}, 109 | {tag: [t.definition(t.name), t.separator], color: config.variable}, 110 | {tag: [t.className], color: config.class}, 111 | {tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: config.number}, 112 | {tag: [t.typeName], color: config.type, fontStyle: config.type}, 113 | {tag: [t.operator, t.operatorKeyword], color: config.keyword}, 114 | {tag: [t.url, t.escape, t.regexp, t.link], color: config.regexp}, 115 | {tag: [t.meta, t.comment], color: config.comment}, 116 | {tag: t.strong, fontWeight: 'bold'}, 117 | {tag: t.emphasis, fontStyle: 'italic'}, 118 | {tag: t.link, textDecoration: 'underline'}, 119 | {tag: t.heading, fontWeight: 'bold', color: config.heading}, 120 | {tag: [t.atom, t.bool, t.special(t.variableName)], color: config.variable}, 121 | {tag: t.invalid, color: config.invalid}, 122 | {tag: t.strikethrough, textDecoration: 'line-through'}, 123 | ]) 124 | 125 | export const githubDark: Extension = [ 126 | githubDarkTheme, 127 | syntaxHighlighting(githubDarkHighlightStyle), 128 | ] 129 | -------------------------------------------------------------------------------- /theme/github-light.ts: -------------------------------------------------------------------------------- 1 | import {EditorView, lineNumbers} 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 | export const config = { 7 | name: 'githubLight', 8 | dark: false, 9 | background: '#fff', 10 | foreground: '#444d56', 11 | selection: '#0366d625', 12 | cursor: '#044289', 13 | dropdownBackground: '#fff', 14 | dropdownBorder: '#e1e4e8', 15 | activeLine: '#c6c6c622', 16 | lineNumber: '#1b1f234d', 17 | lineNumberActive: '#24292e', 18 | matchingBracket: '#34d05840', 19 | keyword: '#d73a49', 20 | storage: '#d73a49', 21 | variable: '#e36209', 22 | parameter: '#24292e', 23 | function: '#005cc5', 24 | string: '#032f62', 25 | constant: '#005cc5', 26 | type: '#005cc5', 27 | class: '#6f42c1', 28 | number: '#005cc5', 29 | comment: '#6a737d', 30 | heading: '#005cc5', 31 | invalid: '#cb2431', 32 | regexp: '#032f62', 33 | } 34 | 35 | export const githubLightTheme = EditorView.theme({ 36 | '&': { 37 | color: config.foreground, 38 | backgroundColor: config.background, 39 | }, 40 | 41 | '.cm-content': {caretColor: config.cursor}, 42 | 43 | '.cm-cursor, .cm-dropCursor': {borderLeftColor: config.cursor}, 44 | '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {backgroundColor: config.selection}, 45 | 46 | '.cm-panels': {backgroundColor: config.dropdownBackground, color: config.foreground}, 47 | '.cm-panels.cm-panels-top': {borderBottom: '2px solid black'}, 48 | '.cm-panels.cm-panels-bottom': {borderTop: '2px solid black'}, 49 | 50 | '.cm-searchMatch': { 51 | backgroundColor: config.dropdownBackground, 52 | outline: `1px solid ${config.dropdownBorder}` 53 | }, 54 | '.cm-searchMatch.cm-searchMatch-selected': { 55 | backgroundColor: config.selection 56 | }, 57 | 58 | '.cm-activeLine': {backgroundColor: config.activeLine}, 59 | '.cm-selectionMatch': {backgroundColor: config.selection}, 60 | 61 | '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': { 62 | backgroundColor: config.matchingBracket, 63 | outline: 'none' 64 | }, 65 | 66 | '.cm-gutters': { 67 | backgroundColor: config.background, 68 | color: config.foreground, 69 | border: 'none' 70 | }, 71 | '.cm-activeLineGutter': {backgroundColor: config.background}, 72 | 73 | '.cm-lineNumbers .cm-gutterElement': {color: config.lineNumber}, 74 | '.cm-lineNumbers .cm-activeLineGutter': {color: config.lineNumberActive}, 75 | 76 | '.cm-foldPlaceholder': { 77 | backgroundColor: 'transparent', 78 | border: 'none', 79 | color: config.foreground 80 | }, 81 | '.cm-tooltip': { 82 | border: `1px solid ${config.dropdownBorder}`, 83 | backgroundColor: config.dropdownBackground, 84 | color: config.foreground, 85 | }, 86 | '.cm-tooltip .cm-tooltip-arrow:before': { 87 | borderTopColor: 'transparent', 88 | borderBottomColor: 'transparent' 89 | }, 90 | '.cm-tooltip .cm-tooltip-arrow:after': { 91 | borderTopColor: config.foreground, 92 | borderBottomColor: config.foreground, 93 | }, 94 | '.cm-tooltip-autocomplete': { 95 | '& > ul > li[aria-selected]': { 96 | background: config.selection, 97 | color: config.foreground, 98 | } 99 | } 100 | }, {dark: config.dark}) 101 | 102 | export const githubLightHighlightStyle = HighlightStyle.define([ 103 | {tag: t.keyword, color: config.keyword}, 104 | {tag: [t.name, t.deleted, t.character, t.macroName], color: config.variable}, 105 | {tag: [t.propertyName], color: config.function}, 106 | {tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: config.string}, 107 | {tag: [t.function(t.variableName), t.labelName], color: config.function}, 108 | {tag: [t.color, t.constant(t.name), t.standard(t.name)], color: config.constant}, 109 | {tag: [t.definition(t.name), t.separator], color: config.variable}, 110 | {tag: [t.className], color: config.class}, 111 | {tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: config.number}, 112 | {tag: [t.typeName], color: config.type, fontStyle: config.type}, 113 | {tag: [t.operator, t.operatorKeyword], color: config.keyword}, 114 | {tag: [t.url, t.escape, t.regexp, t.link], color: config.regexp}, 115 | {tag: [t.meta, t.comment], color: config.comment}, 116 | {tag: t.strong, fontWeight: 'bold'}, 117 | {tag: t.emphasis, fontStyle: 'italic'}, 118 | {tag: t.link, textDecoration: 'underline'}, 119 | {tag: t.heading, fontWeight: 'bold', color: config.heading}, 120 | {tag: [t.atom, t.bool, t.special(t.variableName)], color: config.variable}, 121 | {tag: t.invalid, color: config.invalid}, 122 | {tag: t.strikethrough, textDecoration: 'line-through'}, 123 | ]) 124 | 125 | export const githubLight: Extension = [ 126 | githubLightTheme, 127 | syntaxHighlighting(githubLightHighlightStyle), 128 | ] 129 | -------------------------------------------------------------------------------- /theme/material-dark.ts: -------------------------------------------------------------------------------- 1 | import {EditorView, lineNumbers} 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 | export const config = { 7 | name: 'materialDark', 8 | dark: true, 9 | background: '#263238', 10 | foreground: '#EEFFFF', 11 | selection: '#80CBC420', 12 | cursor: '#FFCC00', 13 | dropdownBackground: '#263238', 14 | dropdownBorder: '#FFFFFF10', 15 | activeLine: '#4c616c22', 16 | lineNumber: '#37474F', 17 | lineNumberActive: '#607a86', 18 | matchingBracket: '#263238', 19 | keyword: '#C792EA', 20 | storage: '#C792EA', 21 | variable: '#EEFFFF', 22 | parameter: '#EEFFFF', 23 | function: '#82AAFF', 24 | string: '#C3E88D', 25 | constant: '#F78C6C', 26 | type: '#B2CCD6', 27 | class: '#FFCB6B', 28 | number: '#F78C6C', 29 | comment: '#546E7A', 30 | heading: '#C3E88D', 31 | invalid: '#FF5370', 32 | regexp: '#89DDFF', 33 | } 34 | 35 | export const materialDarkTheme = EditorView.theme({ 36 | '&': { 37 | color: config.foreground, 38 | backgroundColor: config.background, 39 | }, 40 | 41 | '.cm-content': {caretColor: config.cursor}, 42 | 43 | '.cm-cursor, .cm-dropCursor': {borderLeftColor: config.cursor}, 44 | '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {backgroundColor: config.selection}, 45 | 46 | '.cm-panels': {backgroundColor: config.dropdownBackground, color: config.foreground}, 47 | '.cm-panels.cm-panels-top': {borderBottom: '2px solid black'}, 48 | '.cm-panels.cm-panels-bottom': {borderTop: '2px solid black'}, 49 | 50 | '.cm-searchMatch': { 51 | backgroundColor: config.dropdownBackground, 52 | outline: `1px solid ${config.dropdownBorder}` 53 | }, 54 | '.cm-searchMatch.cm-searchMatch-selected': { 55 | backgroundColor: config.selection 56 | }, 57 | 58 | '.cm-activeLine': {backgroundColor: config.activeLine}, 59 | '.cm-selectionMatch': {backgroundColor: config.selection}, 60 | 61 | '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': { 62 | backgroundColor: config.matchingBracket, 63 | outline: 'none' 64 | }, 65 | 66 | '.cm-gutters': { 67 | backgroundColor: config.background, 68 | color: config.foreground, 69 | border: 'none' 70 | }, 71 | '.cm-activeLineGutter': {backgroundColor: config.background}, 72 | 73 | '.cm-lineNumbers .cm-gutterElement': {color: config.lineNumber}, 74 | '.cm-lineNumbers .cm-activeLineGutter': {color: config.lineNumberActive}, 75 | 76 | '.cm-foldPlaceholder': { 77 | backgroundColor: 'transparent', 78 | border: 'none', 79 | color: config.foreground 80 | }, 81 | '.cm-tooltip': { 82 | border: `1px solid ${config.dropdownBorder}`, 83 | backgroundColor: config.dropdownBackground, 84 | color: config.foreground, 85 | }, 86 | '.cm-tooltip .cm-tooltip-arrow:before': { 87 | borderTopColor: 'transparent', 88 | borderBottomColor: 'transparent' 89 | }, 90 | '.cm-tooltip .cm-tooltip-arrow:after': { 91 | borderTopColor: config.foreground, 92 | borderBottomColor: config.foreground, 93 | }, 94 | '.cm-tooltip-autocomplete': { 95 | '& > ul > li[aria-selected]': { 96 | background: config.selection, 97 | color: config.foreground, 98 | } 99 | } 100 | }, {dark: config.dark}) 101 | 102 | export const materialDarkHighlightStyle = HighlightStyle.define([ 103 | {tag: t.keyword, color: config.keyword}, 104 | {tag: [t.name, t.deleted, t.character, t.macroName], color: config.variable}, 105 | {tag: [t.propertyName], color: config.function}, 106 | {tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: config.string}, 107 | {tag: [t.function(t.variableName), t.labelName], color: config.function}, 108 | {tag: [t.color, t.constant(t.name), t.standard(t.name)], color: config.constant}, 109 | {tag: [t.definition(t.name), t.separator], color: config.variable}, 110 | {tag: [t.className], color: config.class}, 111 | {tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: config.number}, 112 | {tag: [t.typeName], color: config.type, fontStyle: config.type}, 113 | {tag: [t.operator, t.operatorKeyword], color: config.keyword}, 114 | {tag: [t.url, t.escape, t.regexp, t.link], color: config.regexp}, 115 | {tag: [t.meta, t.comment], color: config.comment}, 116 | {tag: t.strong, fontWeight: 'bold'}, 117 | {tag: t.emphasis, fontStyle: 'italic'}, 118 | {tag: t.link, textDecoration: 'underline'}, 119 | {tag: t.heading, fontWeight: 'bold', color: config.heading}, 120 | {tag: [t.atom, t.bool, t.special(t.variableName)], color: config.variable}, 121 | {tag: t.invalid, color: config.invalid}, 122 | {tag: t.strikethrough, textDecoration: 'line-through'}, 123 | ]) 124 | 125 | export const materialDark: Extension = [ 126 | materialDarkTheme, 127 | syntaxHighlighting(materialDarkHighlightStyle), 128 | ] 129 | -------------------------------------------------------------------------------- /theme/material-light.ts: -------------------------------------------------------------------------------- 1 | import {EditorView, lineNumbers} 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 | export const config = { 7 | name: 'materialLight', 8 | dark: false, 9 | background: '#FAFAFA', 10 | foreground: '#90A4AE', 11 | selection: '#80CBC440', 12 | cursor: '#272727', 13 | dropdownBackground: '#FAFAFA', 14 | dropdownBorder: '#00000010', 15 | activeLine: '#c2c2c222', 16 | lineNumber: '#CFD8DC', 17 | lineNumberActive: '#7E939E', 18 | matchingBracket: '#FAFAFA', 19 | keyword: '#7C4DFF', 20 | storage: '#7C4DFF', 21 | variable: '#90A4AE', 22 | parameter: '#90A4AE', 23 | function: '#6182B8', 24 | string: '#91B859', 25 | constant: '#F76D47', 26 | type: '#8796B0', 27 | class: '#FFB62C', 28 | number: '#F76D47', 29 | comment: '#90A4AE', 30 | heading: '#91B859', 31 | invalid: '#E53935', 32 | regexp: '#39ADB5', 33 | } 34 | 35 | export const materialLightTheme = EditorView.theme({ 36 | '&': { 37 | color: config.foreground, 38 | backgroundColor: config.background, 39 | }, 40 | 41 | '.cm-content': {caretColor: config.cursor}, 42 | 43 | '.cm-cursor, .cm-dropCursor': {borderLeftColor: config.cursor}, 44 | '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {backgroundColor: config.selection}, 45 | 46 | '.cm-panels': {backgroundColor: config.dropdownBackground, color: config.foreground}, 47 | '.cm-panels.cm-panels-top': {borderBottom: '2px solid black'}, 48 | '.cm-panels.cm-panels-bottom': {borderTop: '2px solid black'}, 49 | 50 | '.cm-searchMatch': { 51 | backgroundColor: config.dropdownBackground, 52 | outline: `1px solid ${config.dropdownBorder}` 53 | }, 54 | '.cm-searchMatch.cm-searchMatch-selected': { 55 | backgroundColor: config.selection 56 | }, 57 | 58 | '.cm-activeLine': {backgroundColor: config.activeLine}, 59 | '.cm-selectionMatch': {backgroundColor: config.selection}, 60 | 61 | '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': { 62 | backgroundColor: config.matchingBracket, 63 | outline: 'none' 64 | }, 65 | 66 | '.cm-gutters': { 67 | backgroundColor: config.background, 68 | color: config.foreground, 69 | border: 'none' 70 | }, 71 | '.cm-activeLineGutter': {backgroundColor: config.background}, 72 | 73 | '.cm-lineNumbers .cm-gutterElement': {color: config.lineNumber}, 74 | '.cm-lineNumbers .cm-activeLineGutter': {color: config.lineNumberActive}, 75 | 76 | '.cm-foldPlaceholder': { 77 | backgroundColor: 'transparent', 78 | border: 'none', 79 | color: config.foreground 80 | }, 81 | '.cm-tooltip': { 82 | border: `1px solid ${config.dropdownBorder}`, 83 | backgroundColor: config.dropdownBackground, 84 | color: config.foreground, 85 | }, 86 | '.cm-tooltip .cm-tooltip-arrow:before': { 87 | borderTopColor: 'transparent', 88 | borderBottomColor: 'transparent' 89 | }, 90 | '.cm-tooltip .cm-tooltip-arrow:after': { 91 | borderTopColor: config.foreground, 92 | borderBottomColor: config.foreground, 93 | }, 94 | '.cm-tooltip-autocomplete': { 95 | '& > ul > li[aria-selected]': { 96 | background: config.selection, 97 | color: config.foreground, 98 | } 99 | } 100 | }, {dark: config.dark}) 101 | 102 | export const materialLightHighlightStyle = HighlightStyle.define([ 103 | {tag: t.keyword, color: config.keyword}, 104 | {tag: [t.name, t.deleted, t.character, t.macroName], color: config.variable}, 105 | {tag: [t.propertyName], color: config.function}, 106 | {tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: config.string}, 107 | {tag: [t.function(t.variableName), t.labelName], color: config.function}, 108 | {tag: [t.color, t.constant(t.name), t.standard(t.name)], color: config.constant}, 109 | {tag: [t.definition(t.name), t.separator], color: config.variable}, 110 | {tag: [t.className], color: config.class}, 111 | {tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: config.number}, 112 | {tag: [t.typeName], color: config.type, fontStyle: config.type}, 113 | {tag: [t.operator, t.operatorKeyword], color: config.keyword}, 114 | {tag: [t.url, t.escape, t.regexp, t.link], color: config.regexp}, 115 | {tag: [t.meta, t.comment], color: config.comment}, 116 | {tag: t.strong, fontWeight: 'bold'}, 117 | {tag: t.emphasis, fontStyle: 'italic'}, 118 | {tag: t.link, textDecoration: 'underline'}, 119 | {tag: t.heading, fontWeight: 'bold', color: config.heading}, 120 | {tag: [t.atom, t.bool, t.special(t.variableName)], color: config.variable}, 121 | {tag: t.invalid, color: config.invalid}, 122 | {tag: t.strikethrough, textDecoration: 'line-through'}, 123 | ]) 124 | 125 | export const materialLight: Extension = [ 126 | materialLightTheme, 127 | syntaxHighlighting(materialLightHighlightStyle), 128 | ] 129 | -------------------------------------------------------------------------------- /theme/solarized-dark.ts: -------------------------------------------------------------------------------- 1 | import {EditorView, lineNumbers} 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 | export const config = { 7 | name: 'solarizedDark', 8 | dark: true, 9 | background: '#002B36', 10 | foreground: '#93A1A1', 11 | selection: '#274642', 12 | cursor: '#D30102', 13 | dropdownBackground: '#002B36', 14 | dropdownBorder: '#2AA19899', 15 | activeLine: '#005b7022', 16 | lineNumber: '#93A1A1', 17 | lineNumberActive: '#949494', 18 | matchingBracket: '#073642', 19 | keyword: '#859900', 20 | storage: '#93A1A1', 21 | variable: '#268BD2', 22 | parameter: '#268BD2', 23 | function: '#268BD2', 24 | string: '#2AA198', 25 | constant: '#CB4B16', 26 | type: '#CB4B16', 27 | class: '#CB4B16', 28 | number: '#D33682', 29 | comment: '#586E75', 30 | heading: '#268BD2', 31 | invalid: '#DC322F', 32 | regexp: '#DC322F', 33 | } 34 | 35 | export const solarizedDarkTheme = EditorView.theme({ 36 | '&': { 37 | color: config.foreground, 38 | backgroundColor: config.background, 39 | }, 40 | 41 | '.cm-content': {caretColor: config.cursor}, 42 | 43 | '.cm-cursor, .cm-dropCursor': {borderLeftColor: config.cursor}, 44 | '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {backgroundColor: config.selection}, 45 | 46 | '.cm-panels': {backgroundColor: config.dropdownBackground, color: config.foreground}, 47 | '.cm-panels.cm-panels-top': {borderBottom: '2px solid black'}, 48 | '.cm-panels.cm-panels-bottom': {borderTop: '2px solid black'}, 49 | 50 | '.cm-searchMatch': { 51 | backgroundColor: config.dropdownBackground, 52 | outline: `1px solid ${config.dropdownBorder}` 53 | }, 54 | '.cm-searchMatch.cm-searchMatch-selected': { 55 | backgroundColor: config.selection 56 | }, 57 | 58 | '.cm-activeLine': {backgroundColor: config.activeLine}, 59 | '.cm-selectionMatch': {backgroundColor: config.selection}, 60 | 61 | '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': { 62 | backgroundColor: config.matchingBracket, 63 | outline: 'none' 64 | }, 65 | 66 | '.cm-gutters': { 67 | backgroundColor: config.background, 68 | color: config.foreground, 69 | border: 'none' 70 | }, 71 | '.cm-activeLineGutter': {backgroundColor: config.background}, 72 | 73 | '.cm-lineNumbers .cm-gutterElement': {color: config.lineNumber}, 74 | '.cm-lineNumbers .cm-activeLineGutter': {color: config.lineNumberActive}, 75 | 76 | '.cm-foldPlaceholder': { 77 | backgroundColor: 'transparent', 78 | border: 'none', 79 | color: config.foreground 80 | }, 81 | '.cm-tooltip': { 82 | border: `1px solid ${config.dropdownBorder}`, 83 | backgroundColor: config.dropdownBackground, 84 | color: config.foreground, 85 | }, 86 | '.cm-tooltip .cm-tooltip-arrow:before': { 87 | borderTopColor: 'transparent', 88 | borderBottomColor: 'transparent' 89 | }, 90 | '.cm-tooltip .cm-tooltip-arrow:after': { 91 | borderTopColor: config.foreground, 92 | borderBottomColor: config.foreground, 93 | }, 94 | '.cm-tooltip-autocomplete': { 95 | '& > ul > li[aria-selected]': { 96 | background: config.selection, 97 | color: config.foreground, 98 | } 99 | } 100 | }, {dark: config.dark}) 101 | 102 | export const solarizedDarkHighlightStyle = HighlightStyle.define([ 103 | {tag: t.keyword, color: config.keyword}, 104 | {tag: [t.name, t.deleted, t.character, t.macroName], color: config.variable}, 105 | {tag: [t.propertyName], color: config.function}, 106 | {tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: config.string}, 107 | {tag: [t.function(t.variableName), t.labelName], color: config.function}, 108 | {tag: [t.color, t.constant(t.name), t.standard(t.name)], color: config.constant}, 109 | {tag: [t.definition(t.name), t.separator], color: config.variable}, 110 | {tag: [t.className], color: config.class}, 111 | {tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: config.number}, 112 | {tag: [t.typeName], color: config.type, fontStyle: config.type}, 113 | {tag: [t.operator, t.operatorKeyword], color: config.keyword}, 114 | {tag: [t.url, t.escape, t.regexp, t.link], color: config.regexp}, 115 | {tag: [t.meta, t.comment], color: config.comment}, 116 | {tag: t.strong, fontWeight: 'bold'}, 117 | {tag: t.emphasis, fontStyle: 'italic'}, 118 | {tag: t.link, textDecoration: 'underline'}, 119 | {tag: t.heading, fontWeight: 'bold', color: config.heading}, 120 | {tag: [t.atom, t.bool, t.special(t.variableName)], color: config.variable}, 121 | {tag: t.invalid, color: config.invalid}, 122 | {tag: t.strikethrough, textDecoration: 'line-through'}, 123 | ]) 124 | 125 | export const solarizedDark: Extension = [ 126 | solarizedDarkTheme, 127 | syntaxHighlighting(solarizedDarkHighlightStyle), 128 | ] 129 | -------------------------------------------------------------------------------- /theme/solarized-light.ts: -------------------------------------------------------------------------------- 1 | import {EditorView, lineNumbers} 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 | export const config = { 7 | name: 'solarizedLight', 8 | dark: false, 9 | background: '#FDF6E3', 10 | foreground: '#586E75', 11 | selection: '#EEE8D5', 12 | cursor: '#657B83', 13 | dropdownBackground: '#FDF6E3', 14 | dropdownBorder: '#D3AF86', 15 | activeLine: '#d5bd5c22', 16 | lineNumber: '#586E75', 17 | lineNumberActive: '#567983', 18 | matchingBracket: '#EEE8D5', 19 | keyword: '#859900', 20 | storage: '#586E75', 21 | variable: '#268BD2', 22 | parameter: '#268BD2', 23 | function: '#268BD2', 24 | string: '#2AA198', 25 | constant: '#CB4B16', 26 | type: '#CB4B16', 27 | class: '#CB4B16', 28 | number: '#D33682', 29 | comment: '#93A1A1', 30 | heading: '#268BD2', 31 | invalid: '#DC322F', 32 | regexp: '#DC322F', 33 | } 34 | 35 | export const solarizedLightTheme = EditorView.theme({ 36 | '&': { 37 | color: config.foreground, 38 | backgroundColor: config.background, 39 | }, 40 | 41 | '.cm-content': {caretColor: config.cursor}, 42 | 43 | '.cm-cursor, .cm-dropCursor': {borderLeftColor: config.cursor}, 44 | '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {backgroundColor: config.selection}, 45 | 46 | '.cm-panels': {backgroundColor: config.dropdownBackground, color: config.foreground}, 47 | '.cm-panels.cm-panels-top': {borderBottom: '2px solid black'}, 48 | '.cm-panels.cm-panels-bottom': {borderTop: '2px solid black'}, 49 | 50 | '.cm-searchMatch': { 51 | backgroundColor: config.dropdownBackground, 52 | outline: `1px solid ${config.dropdownBorder}` 53 | }, 54 | '.cm-searchMatch.cm-searchMatch-selected': { 55 | backgroundColor: config.selection 56 | }, 57 | 58 | '.cm-activeLine': {backgroundColor: config.activeLine}, 59 | '.cm-selectionMatch': {backgroundColor: config.selection}, 60 | 61 | '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': { 62 | backgroundColor: config.matchingBracket, 63 | outline: 'none' 64 | }, 65 | 66 | '.cm-gutters': { 67 | backgroundColor: config.background, 68 | color: config.foreground, 69 | border: 'none' 70 | }, 71 | '.cm-activeLineGutter': {backgroundColor: config.background}, 72 | 73 | '.cm-lineNumbers .cm-gutterElement': {color: config.lineNumber}, 74 | '.cm-lineNumbers .cm-activeLineGutter': {color: config.lineNumberActive}, 75 | 76 | '.cm-foldPlaceholder': { 77 | backgroundColor: 'transparent', 78 | border: 'none', 79 | color: config.foreground 80 | }, 81 | '.cm-tooltip': { 82 | border: `1px solid ${config.dropdownBorder}`, 83 | backgroundColor: config.dropdownBackground, 84 | color: config.foreground, 85 | }, 86 | '.cm-tooltip .cm-tooltip-arrow:before': { 87 | borderTopColor: 'transparent', 88 | borderBottomColor: 'transparent' 89 | }, 90 | '.cm-tooltip .cm-tooltip-arrow:after': { 91 | borderTopColor: config.foreground, 92 | borderBottomColor: config.foreground, 93 | }, 94 | '.cm-tooltip-autocomplete': { 95 | '& > ul > li[aria-selected]': { 96 | background: config.selection, 97 | color: config.foreground, 98 | } 99 | } 100 | }, {dark: config.dark}) 101 | 102 | export const solarizedLightHighlightStyle = HighlightStyle.define([ 103 | {tag: t.keyword, color: config.keyword}, 104 | {tag: [t.name, t.deleted, t.character, t.macroName], color: config.variable}, 105 | {tag: [t.propertyName], color: config.function}, 106 | {tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: config.string}, 107 | {tag: [t.function(t.variableName), t.labelName], color: config.function}, 108 | {tag: [t.color, t.constant(t.name), t.standard(t.name)], color: config.constant}, 109 | {tag: [t.definition(t.name), t.separator], color: config.variable}, 110 | {tag: [t.className], color: config.class}, 111 | {tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: config.number}, 112 | {tag: [t.typeName], color: config.type, fontStyle: config.type}, 113 | {tag: [t.operator, t.operatorKeyword], color: config.keyword}, 114 | {tag: [t.url, t.escape, t.regexp, t.link], color: config.regexp}, 115 | {tag: [t.meta, t.comment], color: config.comment}, 116 | {tag: t.strong, fontWeight: 'bold'}, 117 | {tag: t.emphasis, fontStyle: 'italic'}, 118 | {tag: t.link, textDecoration: 'underline'}, 119 | {tag: t.heading, fontWeight: 'bold', color: config.heading}, 120 | {tag: [t.atom, t.bool, t.special(t.variableName)], color: config.variable}, 121 | {tag: t.invalid, color: config.invalid}, 122 | {tag: t.strikethrough, textDecoration: 'line-through'}, 123 | ]) 124 | 125 | export const solarizedLight: Extension = [ 126 | solarizedLightTheme, 127 | syntaxHighlighting(solarizedLightHighlightStyle), 128 | ] 129 | -------------------------------------------------------------------------------- /theme/tokyo-night-day.ts: -------------------------------------------------------------------------------- 1 | import {EditorView, lineNumbers} 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 | export const config = { 7 | name: 'tokyoNightDay', 8 | dark: false, 9 | background: '#e1e2e7', 10 | foreground: '#6a6f8e', 11 | selection: '#8591b840', 12 | cursor: '#3760bf', 13 | dropdownBackground: '#e1e2e7', 14 | dropdownBorder: '#6a6f8e', 15 | activeLine: '#a7aaba22', 16 | lineNumber: '#b3b6cd', 17 | lineNumberActive: '#68709a', 18 | matchingBracket: '#e9e9ec', 19 | keyword: '#9854f1', 20 | storage: '#9854f1', 21 | variable: '#3760bf', 22 | parameter: '#3760bf', 23 | function: '#2e7de9', 24 | string: '#587539', 25 | constant: '#9854f1', 26 | type: '#07879d', 27 | class: '#3760bf', 28 | number: '#b15c00', 29 | comment: '#9da3c2', 30 | heading: '#006a83', 31 | invalid: '#ff3e64', 32 | regexp: '#2e5857', 33 | } 34 | 35 | export const tokyoNightDayTheme = EditorView.theme({ 36 | '&': { 37 | color: config.foreground, 38 | backgroundColor: config.background, 39 | }, 40 | 41 | '.cm-content': {caretColor: config.cursor}, 42 | 43 | '.cm-cursor, .cm-dropCursor': {borderLeftColor: config.cursor}, 44 | '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {backgroundColor: config.selection}, 45 | 46 | '.cm-panels': {backgroundColor: config.dropdownBackground, color: config.foreground}, 47 | '.cm-panels.cm-panels-top': {borderBottom: '2px solid black'}, 48 | '.cm-panels.cm-panels-bottom': {borderTop: '2px solid black'}, 49 | 50 | '.cm-searchMatch': { 51 | backgroundColor: config.dropdownBackground, 52 | outline: `1px solid ${config.dropdownBorder}` 53 | }, 54 | '.cm-searchMatch.cm-searchMatch-selected': { 55 | backgroundColor: config.selection 56 | }, 57 | 58 | '.cm-activeLine': {backgroundColor: config.activeLine}, 59 | '.cm-selectionMatch': {backgroundColor: config.selection}, 60 | 61 | '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': { 62 | backgroundColor: config.matchingBracket, 63 | outline: 'none' 64 | }, 65 | 66 | '.cm-gutters': { 67 | backgroundColor: config.background, 68 | color: config.foreground, 69 | border: 'none' 70 | }, 71 | '.cm-activeLineGutter': {backgroundColor: config.background}, 72 | 73 | '.cm-lineNumbers .cm-gutterElement': {color: config.lineNumber}, 74 | '.cm-lineNumbers .cm-activeLineGutter': {color: config.lineNumberActive}, 75 | 76 | '.cm-foldPlaceholder': { 77 | backgroundColor: 'transparent', 78 | border: 'none', 79 | color: config.foreground 80 | }, 81 | '.cm-tooltip': { 82 | border: `1px solid ${config.dropdownBorder}`, 83 | backgroundColor: config.dropdownBackground, 84 | color: config.foreground, 85 | }, 86 | '.cm-tooltip .cm-tooltip-arrow:before': { 87 | borderTopColor: 'transparent', 88 | borderBottomColor: 'transparent' 89 | }, 90 | '.cm-tooltip .cm-tooltip-arrow:after': { 91 | borderTopColor: config.foreground, 92 | borderBottomColor: config.foreground, 93 | }, 94 | '.cm-tooltip-autocomplete': { 95 | '& > ul > li[aria-selected]': { 96 | background: config.selection, 97 | color: config.foreground, 98 | } 99 | } 100 | }, {dark: config.dark}) 101 | 102 | export const tokyoNightDayHighlightStyle = HighlightStyle.define([ 103 | {tag: t.keyword, color: config.keyword}, 104 | {tag: [t.name, t.deleted, t.character, t.macroName], color: config.variable}, 105 | {tag: [t.propertyName], color: config.function}, 106 | {tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: config.string}, 107 | {tag: [t.function(t.variableName), t.labelName], color: config.function}, 108 | {tag: [t.color, t.constant(t.name), t.standard(t.name)], color: config.constant}, 109 | {tag: [t.definition(t.name), t.separator], color: config.variable}, 110 | {tag: [t.className], color: config.class}, 111 | {tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: config.number}, 112 | {tag: [t.typeName], color: config.type, fontStyle: config.type}, 113 | {tag: [t.operator, t.operatorKeyword], color: config.keyword}, 114 | {tag: [t.url, t.escape, t.regexp, t.link], color: config.regexp}, 115 | {tag: [t.meta, t.comment], color: config.comment}, 116 | {tag: t.strong, fontWeight: 'bold'}, 117 | {tag: t.emphasis, fontStyle: 'italic'}, 118 | {tag: t.link, textDecoration: 'underline'}, 119 | {tag: t.heading, fontWeight: 'bold', color: config.heading}, 120 | {tag: [t.atom, t.bool, t.special(t.variableName)], color: config.variable}, 121 | {tag: t.invalid, color: config.invalid}, 122 | {tag: t.strikethrough, textDecoration: 'line-through'}, 123 | ]) 124 | 125 | export const tokyoNightDay: Extension = [ 126 | tokyoNightDayTheme, 127 | syntaxHighlighting(tokyoNightDayHighlightStyle), 128 | ] 129 | -------------------------------------------------------------------------------- /theme/tokyo-night-storm.ts: -------------------------------------------------------------------------------- 1 | import {EditorView, lineNumbers} 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 | export const config = { 7 | name: 'tokyoNightStorm', 8 | dark: true, 9 | background: '#24283b', 10 | foreground: '#7982a9', 11 | selection: '#6f7bb630', 12 | cursor: '#c0caf5', 13 | dropdownBackground: '#24283b', 14 | dropdownBorder: '#7982a9', 15 | activeLine: '#4d547722', 16 | lineNumber: '#3b4261', 17 | lineNumberActive: '#737aa2', 18 | matchingBracket: '#1f2335', 19 | keyword: '#bb9af7', 20 | storage: '#bb9af7', 21 | variable: '#c0caf5', 22 | parameter: '#c0caf5', 23 | function: '#7aa2f7', 24 | string: '#9ece6a', 25 | constant: '#bb9af7', 26 | type: '#2ac3de', 27 | class: '#c0caf5', 28 | number: '#ff9e64', 29 | comment: '#565f89', 30 | heading: '#89ddff', 31 | invalid: '#ff5370', 32 | regexp: '#b4f9f8', 33 | } 34 | 35 | export const tokyoNightStormTheme = EditorView.theme({ 36 | '&': { 37 | color: config.foreground, 38 | backgroundColor: config.background, 39 | }, 40 | 41 | '.cm-content': {caretColor: config.cursor}, 42 | 43 | '.cm-cursor, .cm-dropCursor': {borderLeftColor: config.cursor}, 44 | '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {backgroundColor: config.selection}, 45 | 46 | '.cm-panels': {backgroundColor: config.dropdownBackground, color: config.foreground}, 47 | '.cm-panels.cm-panels-top': {borderBottom: '2px solid black'}, 48 | '.cm-panels.cm-panels-bottom': {borderTop: '2px solid black'}, 49 | 50 | '.cm-searchMatch': { 51 | backgroundColor: config.dropdownBackground, 52 | outline: `1px solid ${config.dropdownBorder}` 53 | }, 54 | '.cm-searchMatch.cm-searchMatch-selected': { 55 | backgroundColor: config.selection 56 | }, 57 | 58 | '.cm-activeLine': {backgroundColor: config.activeLine}, 59 | '.cm-selectionMatch': {backgroundColor: config.selection}, 60 | 61 | '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': { 62 | backgroundColor: config.matchingBracket, 63 | outline: 'none' 64 | }, 65 | 66 | '.cm-gutters': { 67 | backgroundColor: config.background, 68 | color: config.foreground, 69 | border: 'none' 70 | }, 71 | '.cm-activeLineGutter': {backgroundColor: config.background}, 72 | 73 | '.cm-lineNumbers .cm-gutterElement': {color: config.lineNumber}, 74 | '.cm-lineNumbers .cm-activeLineGutter': {color: config.lineNumberActive}, 75 | 76 | '.cm-foldPlaceholder': { 77 | backgroundColor: 'transparent', 78 | border: 'none', 79 | color: config.foreground 80 | }, 81 | '.cm-tooltip': { 82 | border: `1px solid ${config.dropdownBorder}`, 83 | backgroundColor: config.dropdownBackground, 84 | color: config.foreground, 85 | }, 86 | '.cm-tooltip .cm-tooltip-arrow:before': { 87 | borderTopColor: 'transparent', 88 | borderBottomColor: 'transparent' 89 | }, 90 | '.cm-tooltip .cm-tooltip-arrow:after': { 91 | borderTopColor: config.foreground, 92 | borderBottomColor: config.foreground, 93 | }, 94 | '.cm-tooltip-autocomplete': { 95 | '& > ul > li[aria-selected]': { 96 | background: config.selection, 97 | color: config.foreground, 98 | } 99 | } 100 | }, {dark: config.dark}) 101 | 102 | export const tokyoNightStormHighlightStyle = HighlightStyle.define([ 103 | {tag: t.keyword, color: config.keyword}, 104 | {tag: [t.name, t.deleted, t.character, t.macroName], color: config.variable}, 105 | {tag: [t.propertyName], color: config.function}, 106 | {tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: config.string}, 107 | {tag: [t.function(t.variableName), t.labelName], color: config.function}, 108 | {tag: [t.color, t.constant(t.name), t.standard(t.name)], color: config.constant}, 109 | {tag: [t.definition(t.name), t.separator], color: config.variable}, 110 | {tag: [t.className], color: config.class}, 111 | {tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: config.number}, 112 | {tag: [t.typeName], color: config.type, fontStyle: config.type}, 113 | {tag: [t.operator, t.operatorKeyword], color: config.keyword}, 114 | {tag: [t.url, t.escape, t.regexp, t.link], color: config.regexp}, 115 | {tag: [t.meta, t.comment], color: config.comment}, 116 | {tag: t.strong, fontWeight: 'bold'}, 117 | {tag: t.emphasis, fontStyle: 'italic'}, 118 | {tag: t.link, textDecoration: 'underline'}, 119 | {tag: t.heading, fontWeight: 'bold', color: config.heading}, 120 | {tag: [t.atom, t.bool, t.special(t.variableName)], color: config.variable}, 121 | {tag: t.invalid, color: config.invalid}, 122 | {tag: t.strikethrough, textDecoration: 'line-through'}, 123 | ]) 124 | 125 | export const tokyoNightStorm: Extension = [ 126 | tokyoNightStormTheme, 127 | syntaxHighlighting(tokyoNightStormHighlightStyle), 128 | ] 129 | -------------------------------------------------------------------------------- /theme/tokyo-night.ts: -------------------------------------------------------------------------------- 1 | import {EditorView, lineNumbers} 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 | export const config = { 7 | name: 'tokyoNight', 8 | dark: true, 9 | background: '#1a1b26', 10 | foreground: '#787c99', 11 | selection: '#515c7e40', 12 | cursor: '#c0caf5', 13 | dropdownBackground: '#1a1b26', 14 | dropdownBorder: '#787c99', 15 | activeLine: '#43455c22', 16 | lineNumber: '#363b54', 17 | lineNumberActive: '#737aa2', 18 | matchingBracket: '#16161e', 19 | keyword: '#bb9af7', 20 | storage: '#bb9af7', 21 | variable: '#c0caf5', 22 | parameter: '#c0caf5', 23 | function: '#7aa2f7', 24 | string: '#9ece6a', 25 | constant: '#bb9af7', 26 | type: '#0db9d7', 27 | class: '#c0caf5', 28 | number: '#ff9e64', 29 | comment: '#444b6a', 30 | heading: '#89ddff', 31 | invalid: '#ff5370', 32 | regexp: '#b4f9f8', 33 | } 34 | 35 | export const tokyoNightTheme = EditorView.theme({ 36 | '&': { 37 | color: config.foreground, 38 | backgroundColor: config.background, 39 | }, 40 | 41 | '.cm-content': {caretColor: config.cursor}, 42 | 43 | '.cm-cursor, .cm-dropCursor': {borderLeftColor: config.cursor}, 44 | '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {backgroundColor: config.selection}, 45 | 46 | '.cm-panels': {backgroundColor: config.dropdownBackground, color: config.foreground}, 47 | '.cm-panels.cm-panels-top': {borderBottom: '2px solid black'}, 48 | '.cm-panels.cm-panels-bottom': {borderTop: '2px solid black'}, 49 | 50 | '.cm-searchMatch': { 51 | backgroundColor: config.dropdownBackground, 52 | outline: `1px solid ${config.dropdownBorder}` 53 | }, 54 | '.cm-searchMatch.cm-searchMatch-selected': { 55 | backgroundColor: config.selection 56 | }, 57 | 58 | '.cm-activeLine': {backgroundColor: config.activeLine}, 59 | '.cm-selectionMatch': {backgroundColor: config.selection}, 60 | 61 | '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': { 62 | backgroundColor: config.matchingBracket, 63 | outline: 'none' 64 | }, 65 | 66 | '.cm-gutters': { 67 | backgroundColor: config.background, 68 | color: config.foreground, 69 | border: 'none' 70 | }, 71 | '.cm-activeLineGutter': {backgroundColor: config.background}, 72 | 73 | '.cm-lineNumbers .cm-gutterElement': {color: config.lineNumber}, 74 | '.cm-lineNumbers .cm-activeLineGutter': {color: config.lineNumberActive}, 75 | 76 | '.cm-foldPlaceholder': { 77 | backgroundColor: 'transparent', 78 | border: 'none', 79 | color: config.foreground 80 | }, 81 | '.cm-tooltip': { 82 | border: `1px solid ${config.dropdownBorder}`, 83 | backgroundColor: config.dropdownBackground, 84 | color: config.foreground, 85 | }, 86 | '.cm-tooltip .cm-tooltip-arrow:before': { 87 | borderTopColor: 'transparent', 88 | borderBottomColor: 'transparent' 89 | }, 90 | '.cm-tooltip .cm-tooltip-arrow:after': { 91 | borderTopColor: config.foreground, 92 | borderBottomColor: config.foreground, 93 | }, 94 | '.cm-tooltip-autocomplete': { 95 | '& > ul > li[aria-selected]': { 96 | background: config.selection, 97 | color: config.foreground, 98 | } 99 | } 100 | }, {dark: config.dark}) 101 | 102 | export const tokyoNightHighlightStyle = HighlightStyle.define([ 103 | {tag: t.keyword, color: config.keyword}, 104 | {tag: [t.name, t.deleted, t.character, t.macroName], color: config.variable}, 105 | {tag: [t.propertyName], color: config.function}, 106 | {tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: config.string}, 107 | {tag: [t.function(t.variableName), t.labelName], color: config.function}, 108 | {tag: [t.color, t.constant(t.name), t.standard(t.name)], color: config.constant}, 109 | {tag: [t.definition(t.name), t.separator], color: config.variable}, 110 | {tag: [t.className], color: config.class}, 111 | {tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: config.number}, 112 | {tag: [t.typeName], color: config.type, fontStyle: config.type}, 113 | {tag: [t.operator, t.operatorKeyword], color: config.keyword}, 114 | {tag: [t.url, t.escape, t.regexp, t.link], color: config.regexp}, 115 | {tag: [t.meta, t.comment], color: config.comment}, 116 | {tag: t.strong, fontWeight: 'bold'}, 117 | {tag: t.emphasis, fontStyle: 'italic'}, 118 | {tag: t.link, textDecoration: 'underline'}, 119 | {tag: t.heading, fontWeight: 'bold', color: config.heading}, 120 | {tag: [t.atom, t.bool, t.special(t.variableName)], color: config.variable}, 121 | {tag: t.invalid, color: config.invalid}, 122 | {tag: t.strikethrough, textDecoration: 'line-through'}, 123 | ]) 124 | 125 | export const tokyoNight: Extension = [ 126 | tokyoNightTheme, 127 | syntaxHighlighting(tokyoNightHighlightStyle), 128 | ] 129 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es2020", 5 | "strict": true, 6 | "declaration": true, 7 | "declarationMap": true, 8 | "outDir": "./dist/theme", 9 | "moduleResolution": "node", 10 | "rootDir": "./theme" 11 | }, 12 | "include": ["./theme"] 13 | } 14 | --------------------------------------------------------------------------------