Skip to main content
Coding Theme

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

  • activityBar.activeBorder#58a6ff
  • activityBar.background#0d1117
  • activityBar.border#21262d
  • activityBar.foreground#c9d1d9
  • activityBarBadge.background#58a6ff
  • activityBarBadge.foreground#0d1117
  • badge.background#1f6feb
  • badge.foreground#f0f6fc
  • button.background#238636
  • button.foreground#f0f6fc
  • button.hoverBackground#2ea043
  • button.secondaryBackground#21262d
  • button.secondaryForeground#c9d1d9
  • dropdown.background#161b22
  • dropdown.border#30363d
  • dropdown.foreground#c9d1d9
  • editor.background#0f1419
  • editor.findMatchBackground#ffd33d44
  • editor.findMatchHighlightBackground#ffd33d22
  • editor.findRangeHighlightBackground#ffd33d22
  • editor.foreground#bfdbfe
  • editor.lineHighlightBackground#1e293b
  • editor.selectionBackground#264f78
  • editor.selectionHighlightBackground#264f7850
  • editor.wordHighlightBackground#264f7850
  • editor.wordHighlightStrongBackground#264f7850
  • editorBracketMatch.background#264f7844
  • editorBracketMatch.border#58a6ff
  • editorCursor.foreground#60a5fa
  • editorError.foreground#ff5370
  • editorGutter.addedBackground#56d364
  • editorGutter.background#0d1117
  • editorGutter.deletedBackground#ff5370
  • editorGutter.modifiedBackground#e3b341
  • editorHint.foreground#56d364
  • editorInfo.foreground#58a6ff
  • editorLineNumber.activeForeground#c9d1d9
  • editorLineNumber.foreground#6e7681
  • editorWarning.foreground#ffcb6b
  • input.background#0d1117
  • input.border#30363d
  • input.foreground#c9d1d9
  • input.placeholderForeground#6e7681
  • inputOption.activeBorder#58a6ff
  • list.activeSelectionBackground#264f78
  • list.activeSelectionForeground#c9d1d9
  • list.focusBackground#264f78
  • list.hoverBackground#161b22
  • list.inactiveSelectionBackground#21262d
  • panel.background#0d1117
  • panel.border#21262d
  • panelTitle.activeBorder#58a6ff
  • panelTitle.activeForeground#c9d1d9
  • panelTitle.inactiveForeground#6e7681
  • progressBar.background#58a6ff
  • scrollbarSlider.activeBackground#6e7681aa
  • scrollbarSlider.background#6e768166
  • scrollbarSlider.hoverBackground#6e768188
  • sideBar.background#0d1117
  • sideBar.border#21262d
  • sideBar.foreground#c9d1d9
  • sideBarSectionHeader.background#161b22
  • sideBarSectionHeader.foreground#c9d1d9
  • sideBarTitle.foreground#c9d1d9
  • statusBar.background#0d1117
  • statusBar.border#21262d
  • statusBar.debuggingBackground#ff7b72
  • statusBar.debuggingForeground#0d1117
  • statusBar.foreground#c9d1d9
  • statusBar.noFolderBackground#0d1117
  • tab.activeBackground#161b22
  • tab.activeBorder#58a6ff
  • tab.activeForeground#c9d1d9
  • tab.border#21262d
  • tab.hoverBackground#161b22
  • tab.inactiveBackground#0d1117
  • tab.inactiveForeground#6e7681
  • tab.unfocusedActiveForeground#8b949e
  • terminal.ansiBlack#484f58
  • terminal.ansiBlue#58a6ff
  • terminal.ansiBrightBlack#6e7681
  • terminal.ansiBrightBlue#79c0ff
  • terminal.ansiBrightCyan#4fd6be
  • terminal.ansiBrightGreen#56d364
  • terminal.ansiBrightMagenta#d2a8ff
  • terminal.ansiBrightRed#ffa198
  • terminal.ansiBrightWhite#f0f6fc
  • terminal.ansiBrightYellow#ffd33d
  • terminal.ansiCyan#4fd6be
  • terminal.ansiGreen#56d364
  • terminal.ansiMagenta#d2a8ff
  • terminal.ansiRed#ff7b72
  • terminal.ansiWhite#c9d1d9
  • terminal.ansiYellow#e3b341
  • terminal.background#0d1117
  • terminal.foreground#c9d1d9
  • titleBar.activeBackground#0d1117
  • titleBar.activeForeground#c9d1d9
  • titleBar.border#21262d
  • titleBar.inactiveBackground#0d1117
  • titleBar.inactiveForeground#6e7681
  • tree.indentGuidesStroke#21262d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, keyword.control, keyword.control.orion#ff7b72bold
keyword.other, keyword.declaration, keyword.declaration.orion#d2a8ffbold
storage.modifier, storage.modifier.orion#79c0ff
storage.type, storage.type.orion#ffa657
constant.language.boolean, constant.language.boolean.orion#56d364italic
constant.language.null, constant.language.null.orion#ff7b72italic
string, string.quoted, string.quoted.double, string.quoted.single, string.quoted.double.orion, string.quoted.single.orion#a5d6ff
string.template, string.template.orion#96d0ff
variable.other.readwrite, variable.interpolation, variable.interpolation.orion#ffb86citalic
comment, comment.line, comment.block, comment.line.double-dash.orion, comment.block.orion, comment.documentation.orion#8b949eitalic
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.orion, constant.numeric.integer.orion, constant.numeric.float.orion#f78c6c
entity.name.function, entity.name.function.orion#d2a8ff
entity.name.class, entity.name.type.class, entity.name.class.orion#ffa657bold
entity.name.interface, entity.name.interface.orion#79c0ffitalic
entity.name.enum, entity.name.enum.orion#56d364bold
support.function, support.function.builtin, support.function.builtin.orion#4fd6be
keyword.operator, keyword.operator.orion#ffb86c
keyword.operator.assignment, keyword.operator.assignment.orion#ff7b72
keyword.operator.comparison, keyword.operator.comparison.orion#58a6ff
keyword.operator.logical, keyword.operator.logical.orion#d2a8ff
entity.name.tag, entity.name.tag.orion#7ee787
entity.other.attribute-name, entity.other.attribute-name.orion#79c0ff
variable, variable.other, variable.other.orion#c9d1d9
variable.parameter, variable.parameter.orion#ffa657italic
variable.other.constant, variable.other.constant.orion#79c0ffbold
keyword.control.import, keyword.import, keyword.import.orion#ff7b72bold
entity.name.namespace, entity.name.module, entity.name.module.orion#4fd6beitalic
punctuation.definition.string, punctuation.definition.string.orion#a5d6ff
punctuation.separator, punctuation.separator.orion#8b949e
punctuation.terminator, punctuation.terminator.orion#8b949e
meta.brace, punctuation.section.brackets, punctuation.section.braces, punctuation.section.parens, meta.brace.round.orion, meta.brace.square.orion, meta.brace.curly.orion#c9d1d9
support.type, support.type.orion#79c0ff
support.class, support.class.orion#ffa657
support.type.property-name.json#79c0ff
meta.structure.dictionary.value.json#a5d6ff
variable.other.readwrite.js, variable.other.readwrite.ts#c9d1d9
support.type.primitive#79c0ff
Orion Language by Angel Zapata - VS Code Theme