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.background#000000
  • activityBarBadge.background#0074b4
  • activityBarBadge.foreground#ffffff
  • badge.background#0074b4
  • badge.foreground#ffffff
  • button.background#0074b4
  • button.foreground#ffffff
  • debugToolBar.background#000000
  • dropdown.background#212121
  • editor.background#000000
  • editor.foreground#f8f8f2
  • editor.lineHighlightBackground#1073cf2d
  • editor.lineHighlightBorder#ffffff00
  • editor.selectionBackground#49483e
  • editor.wordHighlightBackground#45459922
  • editor.wordHighlightStrongBackground#4545992a
  • editorCursor.foreground#00f808
  • editorGroup.border#1b1b1b
  • editorGroup.dropBackground#0074b4
  • editorGroup.focusedEmptyBorder#0074b4
  • editorGroupHeader.tabsBackground#000000
  • editorHoverWidget.background#000000
  • editorIndentGuide.activeBackground#00f808
  • editorIndentGuide.background#44445a55
  • editorInlayHint.background#000000
  • editorInlayHint.foreground#636e83
  • editorLineNumber.foreground#ffffff5d
  • editorMarkerNavigation.background#000000
  • editorWhitespace.foreground#3b3a32
  • editorWidget.background#000000
  • focusBorder#0074b4
  • foreground#b6b6b6
  • input.background#000000
  • inputOption.activeBorder#0074b4
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#0074b4
  • list.focusBackground#002c44
  • list.focusForeground#ffffff
  • list.highlightForeground#0074b4
  • list.hoverBackground#ffffff1a
  • minimapSlider.background#b4b4b43a
  • minimapSlider.hoverBackground#b4b4b44d
  • panel.background#000000
  • panel.border#1b1b1b
  • panelTitle.activeBorder#44445a80
  • peekView.border#0074b4
  • peekViewEditor.background#000000
  • peekViewResult.background#000000
  • peekViewTitle.background#000000
  • pickerGroup.border#ffffff1a
  • selection.background#0074b4
  • sideBar.background#000000
  • sideBar.border#1b1b1b
  • sideBarSectionHeader.background#000000
  • statusBar.background#000000
  • statusBar.debuggingForeground#ffffff
  • statusBar.noFolderBackground#000000
  • statusBarItem.activeBackground#0074b4
  • statusBarItem.hoverBackground#ffffff1a
  • statusBarItem.remoteBackground#0074b4
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBorder#0074b4
  • tab.activeModifiedBorder#0074b4
  • tab.border#00000033
  • tab.inactiveBackground#0c0c0c
  • tab.inactiveModifiedBorder#421922
  • tab.lastPinnedBorder#000000
  • tab.unfocusedActiveModifiedBorder#58212e
  • tab.unfocusedInactiveModifiedBorder#421922
  • terminal.ansiBlack#002111
  • terminal.ansiBlue#c4e810
  • terminal.ansiCyan#00c5c7
  • terminal.ansiGreen#00c200
  • terminal.ansiMagenta#c930c7
  • terminal.ansiRed#0074b4
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#c7c400
  • terminal.foreground#38f927
  • terminal.selectionBackground#00f90033
  • terminalCursor.background#38f927
  • terminalCursor.foreground#38f927
  • titleBar.activeBackground#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
bracket.square#FF8800
bracket.round#00FF00
bracket.quote
comment#616671
comment.block.documentation#616671italic
string#A6E32D
constant.numeric#F129FF
constant.language#FF29A2bold
constant.character, constant.other#AE81FF
variable#9CFFFF
keyword#2499DAbold
storage#F92672
storage.type#21C8E8italic
entity.name.class#A6E22Eunderline
entity.other.inherited-class#A6E22Eitalic underline
entity.name.function#3EFF9E
variable.parameter#FD971Fitalic
entity.name.tag#2499DA
entity.other.attribute-name#A6E22E
support.function#2EFD7C
support.constant#66D9EF
support.type, support.class, support.object#21C8E8italic
support.other.variable
meta.function-call#2AA198
invalid#F8F8F0
invalid.deprecated#F8F8F0
meta.diff, meta.diff.header#75715E
markup.deleted#F92672
markup.inserted#A6E22E
markup.changed#E6DB74
constant.numeric.line-number.find-in-files - match#AE81FFA0
entity.name.filename.find-in-files#E6DB74
keyword.operator#DE0059bold
string.interpolated, source.coffee.embedded.source#00DDC0
meta.tag, declaration.tag#2499DA
string.quoted.docinfo.doctype.DTDitalic
entity.other.attribute-name#63AEE0italic
punctuation.section.embedded -(source string source punctuation.section.embedded), meta.brace.erb.html#FC003B
markup.list#B90690
punctuation.separator.inheritance.php#F92672
sublimelinter.notes#FFFFFF
sublimelinter.outline.illegal#FFFFFF
sublimelinter.underline.illegal
sublimelinter.outline.warning#FFFFFF
sublimelinter.underline.warning
sublimelinter.outline.violation#FFFFFF
sublimelinter.underline.violation
keyword.control.declaration#21C8E8italic
meta.initialization, variable.other.readwrite.js#21C8E8
variable.other.object.js#7DDFF1
meta.property-name.js variable.other.object.js#7DA5F1
support.variable.property.js#3399FF
variable.other.dot-access#66FFDD
variable.other.property.js#37C1BE
punctuation.section.scope.square.js#FF2404
punctuation.section.scope.round.js, meta.brace.round#937AFD
punctuation.definition.arrow.js#AA00FFbold
entity.arrow.function.js#AA00FFbold
variable.language#B03BFFitalic
variable.language.prototype#FF6600
meta.function.prototype support.constant, meta.prototype.function support.constant#45FFFFitalic
support.type.js, support.class.js#21C8E8italic
support.class.error.js#FF5522
support.class.builtin.js#8E9BDCitalic
support.class.node.js#5E6AFEitalic
entity.name.function.node.js#D84014
support.keyword.node.js#99EF25bold
support.module.node.js#34EF25bold
variable.import.destructuring.js#00BBFF
other.object.key.js#1C98C1
meta.accessor.js punctuation.definition.parameters#005588
storage.type.accessor.js#0066AAbold italic
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#BB33FFitalic
storage.type.module.js, storage.type.export.js, storage.type.import.js, storage.type.from.js#CCCC44
storage.type.class.js, storage.type.extends.js#0044AA
meta.function.call.class.static.js #880011
variable.other.class.static.js#AA0066
entity.name.accessor.js#00FFCCbold italic
entity.name.method.js#AA00FFitalic bold
meta.method.js#660099bold
storage.type.function.js#0CCBE0bold
string.quoted.single#A6E32D
string.unquoted.label#00A5FF
variable.other.quasi.js#FF0099
string.quasi.js#00FF00
punctuation.quasi.element#008800
entity.quasi.tag.name.js#FFFF00
meta.group.braces.square string.quoted.single, punctuation.destructuring#47E9AC
string.quoted.double#4BE32D
punctuation.section.scope.curly.js#F9044E
meta.delimiter.object.comma.js#00FFFF
punctuation.terminator.statement.js#00FFFF
meta.group.braces.curly string.quoted.single#16B853
support.function#2EFD7C
punctuation.definition.string.begin.js#C3EC71
punctuation.definition.string.end.js#8AC31A
meta.class.inheritance, meta.instance.constructor#E81E41italic underline
entity.name.class.js#00FFFFitalic
entity.name.extends.js#00FF99italic
meta.function-call entity.name.function#2EFD7C
meta.function-call.function.with-arguments.js#33FF00
meta.brace.curly.js#FF0099
meta.brace.round.js#937AFD
constant.character.escape#10CF62
meta.structure.dictionary.json string.quoted.double#00A5FF
meta.structure meta.structure.dictionary.json string.quoted.double #0095E6
meta.structure meta.structure meta.structure meta.structure.dictionary.json string.quoted.double #0084CD
meta.structure meta.structure meta.structure meta.structure meta.structure meta.structure.dictionary.json string.quoted.double #0074B4
meta.structure meta.structure meta.structure meta.structure meta.structure meta.structure meta.structure meta.structure.dictionary.json string.quoted.double #00649B
meta.structure.dictionary.value.json string.quoted.double#00DDBB
meta.structure meta.structure meta.structure.dictionary.value.json string.quoted.double #00C4A5
meta.structure meta.structure meta.structure meta.structure meta.structure.dictionary.value.json string.quoted.double #00AB90
meta.structure meta.structure meta.structure meta.structure meta.structure meta.structure meta.structure.dictionary.value.json string.quoted.double #00927B
meta.structure meta.structure meta.structure meta.structure meta.structure meta.structure meta.structure meta.structure meta.structure.dictionary.value.json string.quoted.double #007966
meta.structure.dictionary.value.json string punctuation.definition.string.double #8409FF
meta.structure.array.json string.quoted.double#BB33FF
meta.structure meta.structure meta.structure.array.json string.quoted.double #B31AFF
meta.structure meta.structure meta.structure meta.structure meta.structure.array.json string.quoted.double #AB00FF
meta.structure meta.structure meta.structure meta.structure meta.structure.array.json string.quoted.double #9A00E6
meta.structure meta.structure meta.structure meta.structure meta.structure meta.structure meta.structure.array.json string.quoted.double #8900CD
meta.structure.dictionary.json string punctuation.definition.string #66BBDD
meta.structure.array.json string punctuation.definition.string #416BE9
meta.structure.array.json punctuation.definition.array#FC01B6
meta.structure.dictionary.json punctuation.definition.dictionary #01FC47
meta.tag.any, entity.name.tag#24B9DA
meta.tag.attribute.class#2499DA
meta.tag.attribute.id#DA24CB
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
enlightened-ifission by ifission - VS Code Theme