Skip to main content
Coding Theme

Color themes

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#191a19
  • activityBar.foreground#cececa
  • activityBarBadge.background#c59f35
  • activityBarBadge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#4e4c47
  • breadcrumb.background#121213
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#cccfc2
  • breadcrumbPicker.background#2e2d2d
  • button.background#ce951c
  • button.foreground#ffffff
  • charts.blue#0059ff
  • charts.foreground#292727
  • charts.green#10ca28
  • charts.lines#e9e7e7
  • charts.orange#f06617
  • charts.purple#9520d8
  • charts.red#c91919
  • charts.yellow#e4c722
  • checkbox.foreground#ffe097
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#1d1f23da
  • dropdown.border#181A1F
  • dropdown.foreground#ffd375
  • editor.background#18181a
  • editor.findMatchBackground#42557B
  • editor.findMatchHighlightBackground#314365
  • editor.lineHighlightBackground#4c525e5e
  • editor.selectionBackground#58585867
  • editor.selectionHighlightBackground#474747
  • editorBracketMatch.background#1b1a1a
  • editorBracketMatch.border#69676c
  • editorCursor.background#222222
  • editorCursor.foreground#ffd375
  • editorError.foreground#c24038
  • editorGroup.border#181A1F
  • editorGroup.emptyBackground#2e2f30
  • editorGroupHeader.tabsBackground#181b1f
  • editorGutter.addedBackground#4780CB60
  • editorGutter.deletedBackground#60FFAA60
  • editorGutter.modifiedBackground#CFDF3760
  • editorHint.border#222222
  • editorHint.foreground#948ae3
  • editorHoverWidget.background#16181b
  • editorHoverWidget.border#181A1F
  • editorIndentGuide.background#4e4e4e
  • editorLineNumber.activeForeground#c4c7d1
  • editorLineNumber.foreground#525053
  • editorRuler.foreground#484848
  • editorSuggestWidget.background#1c1f24
  • editorSuggestWidget.border#181A1F
  • editorSuggestWidget.selectedBackground#2c313a
  • editorUnnecessaryCode.opacity#000000c0
  • editorWhitespace.foreground#484a50
  • editorWidget.background#21252B
  • foreground#E4DFCE
  • gitDecoration.addedResourceForeground#7bd88f
  • gitDecoration.conflictingResourceForeground#fd9353
  • gitDecoration.deletedResourceForeground#fc618d
  • gitDecoration.ignoredResourceForeground#525053
  • gitDecoration.modifiedResourceForeground#fce566
  • gitDecoration.stageDeletedResourceForeground#fc618d
  • gitDecoration.stageModifiedResourceForeground#fce566
  • gitDecoration.untrackedResourceForeground#fd9353
  • icon.foreground#ebb25d
  • input.background#1d1f23
  • input.border#FFF66C10
  • input.foreground#ffd87ed5
  • inputValidation.errorBackground#1d1f23e7
  • inputValidation.errorBorder#ff0000b4
  • inputValidation.errorForeground#ff0000b7
  • list.activeSelectionBackground#2c313a
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#383E4A
  • list.highlightForeground#acaaaa
  • list.hoverBackground#1e2125
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#242629
  • list.inactiveSelectionForeground#d7dae0
  • menu.background#1b1818e7
  • menu.foreground#d8d8d7
  • menu.selectionForeground#ebd65d
  • menubar.selectionForeground#ffd375
  • minimap.background#1a1919
  • minimap.errorHighlight#ff0000
  • notifications.background#21252b
  • progressBar.background#dfac40
  • scrollbarSlider.activeBackground#747D9180
  • scrollbarSlider.background#4e5666c7
  • scrollbarSlider.hoverBackground#5A637580
  • settings.textInputBorder#ffd87e
  • settings.textInputForeground#ffd375
  • sideBar.background#121213
  • sideBar.border#333232
  • sideBarSectionHeader.background#292c31
  • statusBar.background#121213
  • statusBar.debuggingBackground#7a0505b9
  • statusBar.foreground#ddb966
  • statusBar.noFolderBackground#21252B
  • statusBarItem.hoverBackground#113985
  • statusBarItem.remoteBackground#191919
  • statusBarItem.remoteForeground#7bd88f
  • tab.activeBackground#1d1f20
  • tab.activeBorder#ffd375
  • tab.border#1d1f24
  • tab.inactiveBackground#24272b
  • terminal.ansiBlack#2d3139
  • terminal.ansiBlue#5272EF
  • terminal.ansiBrightBlack#7f848e
  • terminal.ansiBrightBlue#5272EF
  • terminal.ansiBrightCyan#4EB1C2
  • terminal.ansiBrightGreen#79C367
  • terminal.ansiBrightMagenta#e5c07b
  • terminal.ansiBrightRed#E06C75
  • terminal.ansiBrightWhite#d7dae0
  • terminal.ansiBrightYellow#E5B673
  • terminal.ansiCyan#56B6C2
  • terminal.ansiGreen#93E078
  • terminal.ansiMagenta#C678DD
  • terminal.ansiRed#E06C75
  • terminal.ansiWhite#d7dae0
  • terminal.ansiYellow#e5c07b
  • terminal.foreground#E4DFCE
  • terminalCursor.foreground#e9c48c
  • textLink.foreground#fce566
  • titleBar.activeBackground#222222
  • titleBar.activeForeground#dce2e0
  • titleBar.inactiveBackground#282C34
  • titleBar.inactiveForeground#6B717D
  • widget.shadow#3F3F3F30

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, string.comment#7b787eitalic
markup.underline.link#7bd88f
meta.brace.round, meta.brace.square, meta.brace.curly, meta.delimiter.comma.js, meta.function-call.without-arguments.js, meta.function-call.method.without-arguments.js#7b787e
punctuation#7b787e
string, string.template#e5c07b
constant.numeric#c678dd
string.embedded.begin, string.embedded.end, punctuation.definition.template-expression, punctuation.section.embedded#c678dd
punctuation.section.embedded.begin.js, punctuation.section.embedded.end.js, punctuation.section.embedded.begin.erb, punctuation.section.embedded.end.erb, source.elixir.embedded, punctuation.separator, punctuation.accessor, meta.brace#ffffff
constant.language#56b6c2
constant.character, constant.other#56b6c2
variable.language#e06c75
keyword, keyword.operator.logical, keyword.operator.constructor#e06c75
keyword.operator#e06c75
storage#e06c75
storage.type#64d2e0italic
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class#64d2e0italic
variable.other.object, variable.other.constant, variable.other.global, variable.other.readwrite.class, variable.other.readwrite.instance, variable.other.readwrite.batchfile, variable.readwrite, variable.readwrite.other.block#ffffff
variable.other, variable.other.property, variable.other.block#ffffff
entity.other.inherited-class#98c379
storage.modifier.import, storage.modifier.package#e0c16citalic
entity.name.function, support.function#7bd88f
variable.parameter, entity.name.variable.parameter, parameter.variable#fd9353italic
entity.name.function-call#f8f8f8
function.support.builtin, function.support.core#7bd88f
entity.name.tag, entity.name.tag.class.js#e06c75
entity.name.tag.class, entity.name.tag.id#56b6c2
entity.other.attribute-name#7bd88f
support.constant#56b6c2
support.type, support.variable#56b6c2
support.dictionary.json#56b6c2
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass#ffffff
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.scss, entity.other.attribute-name.pseudo-class.less, entity.other.attribute-name.pseudo-class.sass, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-element.scss, entity.other.attribute-name.pseudo-element.less, entity.other.attribute-name.pseudo-element.sass#56b6c2
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass#7bd88f
variable.css, variable.scss, variable.less, variable.sass#56b6c2
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string#fff06d
unit.css, unit.scss, unit.less, unit.sass#c678dd
function.css, function.scss, function.less, function.sass#56b6c2
support.other.variable
invalid#F8F8F0
invalid.deprecated#F8F8F0
support.type.property-name.json#56b6c2
string.detected-link#7bd88f
meta.diff, meta.diff.header#75715E
markup.deleted#e06c75
markup.inserted#7bd88f
markup.changed#e5c07b
constant.numeric.line-number.find-in-files - match#56b6c2A0
entity.name.filename.find-in-files#e5c07b
markup.italic, markup.italic.markdownitalic
punctuation.definition.italic.markdown, punctuation.definition.bold.markdown, punctuation.definition.heading.markdown#676f7d
punctuation.definition.italic.markdownitalic
markup.underline.link.markdown#7bd88f
markup.bold.markdownbold
markup.heading.markdown#e06c75bold
markup.quote.markdown#7bd88f
meta.separator.markdown#c678ddbold
markup.raw.inline.markdown, markup.raw.block.markdown#56b6c2
punctuation.definition.list_item.markdown#ffffffbold
DD-Light-Dark Theme by Dipankar Das - VS Code Theme