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.activeBackground#151515
  • activityBar.background#151515
  • activityBar.border#151515
  • activityBar.foreground#f5f5f5
  • activityBar.inactiveForeground#ffffff66
  • activityBarBadge.background#006ab2
  • activityBarBadge.foreground#f5f5f5
  • badge.background#4d4d4d
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#1b1b1b
  • breadcrumb.focusForeground#e0e0e0
  • breadcrumb.foreground#cccccccc
  • button.background#0e639c
  • button.foreground#ffffff
  • button.hoverBackground#1177bb
  • button.secondaryBackground#3a3d41
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#45494e
  • checkbox.background#3c3c3c
  • checkbox.border#00000000
  • checkbox.foreground#cccccc
  • debugExceptionWidget.background#333333
  • debugExceptionWidget.border#474747
  • debugToolBar.background#333333
  • debugToolBar.border#474747
  • diffEditor.border#444444
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.insertedTextBorder#1b1b1b
  • diffEditor.removedTextBackground#ff000033
  • diffEditor.removedTextBorder#1b1b1b
  • dropdown.background#3c3c3c
  • dropdown.border#00000000
  • dropdown.foreground#cccccc
  • editor.background#1b1b1b
  • editor.findMatchBackground#515c6a
  • editor.findMatchBorder#74879f
  • editor.findMatchHighlightBackground#ea5c0055
  • editor.findMatchHighlightBorder#ffffff00
  • editor.findRangeHighlightBackground#3a3d4166
  • editor.findRangeHighlightBorder#ffffff00
  • editor.foldBackground#1b1b1be7
  • editor.foreground#d4d4d4
  • editor.hoverHighlightBackground#264f7840
  • editor.inactiveSelectionBackground#3a3d412c
  • editor.lineHighlightBackground#ffffff0A
  • editor.lineHighlightBorder#282828
  • editor.rangeHighlightBackground#ffffff0b
  • editor.rangeHighlightBorder#ffffff00
  • editor.selectionBackground#264f78
  • editor.selectionHighlightBackground#add6ff26
  • editor.selectionHighlightBorder#495F77
  • editor.wordHighlightBackground#575757b8
  • editor.wordHighlightBorder#1b1b1b
  • editor.wordHighlightStrongBackground#004972b8
  • editor.wordHighlightStrongBorder#1b1b1b
  • editorBracketMatch.background#0064001a
  • editorBracketMatch.border#888888
  • editorCodeLens.foreground#999999
  • editorCursor.background#1b1b1b
  • editorCursor.foreground#9c9c9c
  • editorError.background#B73A3400
  • editorError.border#ffffff00
  • editorError.foreground#f48771
  • editorGroup.border#444444
  • editorGroup.emptyBackground#1c1c1c
  • editorGroupHeader.border#1b1b1b
  • editorGroupHeader.tabsBackground#151515
  • editorGroupHeader.tabsBorder#1b1b1b
  • editorGutter.addedBackground#587c0c
  • editorGutter.background#1b1b1b
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#151515
  • editorGutter.foldingControlForeground#c5c5c5
  • editorGutter.modifiedBackground#0c7d9d
  • editorHoverWidget.background#252526
  • editorHoverWidget.border#454545
  • editorHoverWidget.foreground#cccccc
  • editorIndentGuide.activeBackground1#707070
  • editorIndentGuide.background1#404040
  • editorInfo.background#4490BF00
  • editorInfo.border#4490BF00
  • editorInfo.foreground#75beff
  • editorLineNumber.activeForeground#ffffff
  • editorLineNumber.foreground#757575
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#f48771
  • editorMarkerNavigationInfo.background#75beff
  • editorMarkerNavigationWarning.background#cca700
  • editorOverviewRuler.background#25252500
  • editorOverviewRuler.border#7f7f7f4d
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#1b1b1b
  • editorSuggestWidget.border#2f2f2f
  • editorSuggestWidget.foreground#dedede
  • editorSuggestWidget.highlightForeground#006ab2
  • editorSuggestWidget.selectedBackground#2f2f2f
  • editorWarning.background#A9904000
  • editorWarning.border#ffffff00
  • editorWarning.foreground#cca700
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#252526
  • editorWidget.foreground#cccccc
  • editorWidget.resizeBorder#5F5F5F
  • focusBorder#1b1b1b
  • foreground#f5f5f5
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#8c8c8c
  • gitDecoration.modifiedResourceForeground#e2c08d
  • gitDecoration.stageDeletedResourceForeground#c74e39
  • gitDecoration.stageModifiedResourceForeground#e2c08d
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#73c991
  • icon.foreground#ffffff
  • input.background#383838
  • input.border#1b1b1b
  • input.foreground#cccccc
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBackground#007fd466
  • inputOption.activeBorder#007acc00
  • inputOption.activeForeground#ffffff
  • list.activeSelectionBackground#1b1b1b
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#1b1b1b
  • list.focusBackground#565656
  • list.focusForeground#f5f5f5
  • list.highlightForeground#f5f5f5
  • list.hoverBackground#1b1b1b
  • list.hoverForeground#cccccc
  • list.inactiveSelectionBackground#1b1b1b
  • list.inactiveSelectionForeground#ffffff
  • listFilterWidget.background#006ab2
  • listFilterWidget.noMatchesOutline#151515
  • listFilterWidget.outline#ececec00
  • menu.background#1b1b1b
  • menu.border#3b3b3b85
  • menu.foreground#cccccc
  • menu.selectionBackground#363636
  • menu.selectionBorder#47474700
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#888888
  • menubar.selectionBackground#7575751a
  • menubar.selectionBorder#151515
  • menubar.selectionForeground#ffffff
  • merge.commonContentBackground#282828ef
  • merge.commonHeaderBackground#383838dd
  • merge.currentContentBackground#27403bef
  • merge.currentHeaderBackground#367366ea
  • merge.incomingContentBackground#28384bf7
  • merge.incomingHeaderBackground#39608fda
  • minimap.background#1c1c1c
  • minimap.errorHighlight#f48771
  • minimap.warningHighlight#cca700
  • minimapGutter.addedBackground#587c0c
  • minimapGutter.deletedBackground#94151b
  • minimapGutter.modifiedBackground#0c7d9d
  • notificationCenter.border#474747
  • notificationCenterHeader.background#303031
  • notificationCenterHeader.foreground#cccccc
  • notifications.background#252526
  • notifications.border#303031
  • notifications.foreground#cccccc
  • notificationsErrorIcon.foreground#f48771
  • notificationsInfoIcon.foreground#75beff
  • notificationsWarningIcon.foreground#cca700
  • notificationToast.border#474747
  • panel.background#1b1b1b
  • panel.border#1b1b1b
  • panelSection.border#80808059
  • panelTitle.activeBorder#e7e7e7
  • panelTitle.activeForeground#e7e7e7
  • panelTitle.inactiveForeground#e7e7e799
  • peekView.border#007acc
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditor.matchHighlightBorder#ee931e
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#252526
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#1e1e1e
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#3f3f46
  • pickerGroup.foreground#3794ff
  • progressBar.background#f5f5f5
  • scrollbar.shadow#1b1b1b
  • scrollbarSlider.activeBackground#bfbfbf66
  • scrollbarSlider.background#ffffff10
  • scrollbarSlider.hoverBackground#646464b3
  • selection.background#414141
  • settings.focusedRowBackground#ffffff07
  • settings.headerForeground#ffffff
  • sideBar.background#151515
  • sideBar.border#151515
  • sideBar.dropBackground#383b3d
  • sideBar.foreground#f5f5f5
  • sideBarSectionHeader.background#eeeeee00
  • sideBarSectionHeader.border#151515
  • sideBarSectionHeader.foreground#ffffff
  • sideBarTitle.foreground#ffffff
  • statusBar.background#1b1b1b
  • statusBar.border#1b1b1b
  • statusBar.debuggingBackground#1b1b1b
  • statusBar.debuggingBorder#151515
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#f5f5f5
  • statusBar.noFolderBackground#1b1b1b
  • statusBar.noFolderBorder#151515
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#FFFFFF25
  • statusBarItem.hoverBackground#1b1b1b
  • statusBarItem.remoteBackground#1b1b1b
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#1b1b1b
  • tab.activeBorder#43434300
  • tab.activeBorderTop#00000000
  • tab.activeForeground#f5f5f5
  • tab.border#151515
  • tab.hoverBackground#1b1b1b
  • tab.hoverBorder#1b1b1b
  • tab.hoverForeground#ffffff
  • tab.inactiveBackground#151515
  • tab.inactiveForeground#ffffff80
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#2472c8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#3b8eea
  • terminal.ansiBrightCyan#29b8db
  • terminal.ansiBrightGreen#23d18b
  • terminal.ansiBrightMagenta#d670d6
  • terminal.ansiBrightRed#f14c4c
  • terminal.ansiBrightWhite#e5e5e5
  • terminal.ansiBrightYellow#f5f543
  • terminal.ansiCyan#11a8cd
  • terminal.ansiGreen#0dbc79
  • terminal.ansiMagenta#bc3fbc
  • terminal.ansiRed#cd3131
  • terminal.ansiWhite#e5e5e5
  • terminal.ansiYellow#e5e510
  • terminal.border#80808059
  • terminal.foreground#cccccc
  • terminal.selectionBackground#ffffff40
  • terminalCursor.background#0087FF
  • terminalCursor.foreground#ffffff
  • textLink.foreground#3794ff
  • titleBar.activeBackground#151515
  • titleBar.activeForeground#f5f5f5
  • titleBar.border#00000000
  • titleBar.inactiveBackground#151515
  • titleBar.inactiveForeground#ffffff99
  • tree.indentGuidesStroke#585858
  • walkThrough.embeddedEditorBackground#00000050
  • widget.shadow#0000005c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.constant.edge#d55fdeff
constant.other.character-class.regexp#e06c75ff
keyword.operator.quantifier.regexp#d19a66ff
punctuation.definition.string.begin,punctuation.definition.string.end#98c378
variable.parameter.function#A6B2C0
comment, punctuation.definition.comment#747474italic
comment markup.link#5C6370
markup.changed.diff#e0c285
meta.diff.header.from-file,punctuation.definition.from-file.diff#569cd6
markup.inserted.diff#89CA78
markup.deleted.diff#EF596F
meta.function.c#EF596F
keyword.control.cpp#e5c07b
punctuation.section.block.begin.bracket.curly.cpp,punctuation.section.block.end.bracket.curly.cpp,punctuation.terminator.statement.c,punctuation.section.block.begin.bracket.curly.c,punctuation.section.block.end.bracket.curly.c,punctuation.section.parens.begin.bracket.round.c,punctuation.section.parens.end.bracket.round.c,punctuation.section.parameters.begin.bracket.round.c,punctuation.section.parameters.end.bracket.round.c#AAB1C0
punctuation.separator.key-value#bbbbbb
entity.other.attribute-name.js,entity.other.attribute-name.ts,entity.other.attribute-name.jsx,entity.other.attribute-name.tsx,variable.parameter,variable.language.superitalic
keyword.operator.expression.import#52ADF2
support.constant.math#e5c07b
support.constant.property.math#d19a66
variable.other.constant#e5c07b
storage.type.annotation.java#e5c07bff
source.java#EF596F
punctuation.section.block.begin.java,punctuation.section.block.end.java,punctuation.definition.method-parameters.begin.java,punctuation.definition.method-parameters.end.java,meta.method.identifier.java,punctuation.section.method.begin.java,punctuation.section.method.end.java,punctuation.terminator.java,punctuation.section.class.begin.java,punctuation.section.class.end.java,punctuation.section.inner-class.begin.java,punctuation.section.inner-class.end.java,meta.method-call.java,storage.type.generic.java,punctuation.section.class.begin.bracket.curly.java,punctuation.section.class.end.bracket.curly.java,punctuation.section.method.begin.bracket.curly.java,punctuation.section.method.end.bracket.curly.java,punctuation.separator.period.java,meta.method.body.java#AAB1C0
meta.method.java#52ADF2
storage.modifier.import.java,storage.type.java#e5c07b
meta.definition.variable.name.java#EF596F
keyword.operator.logical#2BBAC5
keyword.operator.bitwise#2BBAC5
support.constant.property-value.scss,support.constant.property-value.css#D8985F
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#D8985F
punctuation.separator.list.comma.css#b9c0ca
support.constant.color.w3c-standard-color-name.css#D8985F
support.type.vendored.property-name.css#2BBAC5
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end#EF596F
support.module.node,support.type.object.module#e5c07b
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#EF596F
comment.line.double-slash,comment.block.documentationitalic
support.constant.json#D8985F
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional#D55FDE
support.type.object.console#EF596F
support.variable.property.process#D8985F
entity.name.function,support.function.console#52ADF2
keyword.operator#2BBAC5
support.type.object.dom#2BBAC5
support.variable.dom,support.variable.property.dom#EF596F
keyword.operator.arithmetic,keyword.operator.comparison#2BBAC5
keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c,keyword.operator.bitwise.shift.c#D55FDEff
punctuation.separator.delimiter.c#bbbbbb
support.type.posix-reserved.c#57adb8
keyword.operator.sizeof.c#C178DD
variable.parameter.function.language.python#D8985F
support.type.python#2BBAC5
keyword.operator.logical.python#D55FDE
meta.function-call.arguments.python#E06C60
meta.function-call.python#E06C60
variable.parameter.function.python#D18C4E
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python,meta.function-call.arguments.python#AAB1C0
meta.function-call.generic.python#52ADF2
constant.character.format.placeholder.other.python#98c379
none#A6B2C0
keyword.operator#AAB1C0
keyword#D55FDE
variable#EF596F
token.variable.parameter.java#AAB1C0
import.storage.java#e5c07b
token.package.keyword#D55FDE
token.package#AAB1C0
entity.name.function, meta.require, support.function.any-method#52ADF2
entity.name.type.namespace#e5c07b
support.class, entity.name.type.class#e5c07b
entity.name.class.identifier.namespace.type#e5c07b
entity.name.class, variable.other.class#e5c07b
variable.other.class.php#ef596fff
entity.name.type#e5c07b
keyword.control#D55FDE
control.elements, keyword.operator.less#D8985F
keyword.other.special-method#52ADF2
storage#D55FDE
token.storage#D55FDE
keyword.operator.expression.delete,keyword.operator.expression.in,keyword.operator.expression.of,keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.expression.typeof,keyword.operator.expression.void#D55FDE
token.storage.type.java#e5c07b
support.function#2BBAC5
support.type.property-name#AAB1C0
support.constant.property-value#AAB1C0
support.constant.font-name#D8985F
meta.tag#AAB1C0
string, entity.other.inherited-class#89CA78
constant.other.symbol#2BBAC5
constant.numeric#D8985F
none#D8985F
none#D8985F
constant#D8985F
punctuation.definition.constant#D8985F
entity.name.tag#EF596F
entity.other.attribute-name#D8985F
entity.other.attribute-name.id#52ADF2normal
entity.other.attribute-name.class.css#D8985Fnormal
meta.selector#D55FDE
none#D2945D
markup.heading#EF596Fbold
markup.heading punctuation.definition.heading, entity.name.section#52ADF2
keyword.other.unit#d8985fff
markup.bold,todo.bold#D8985Fbold
punctuation.definition.bold#e5c07b
markup.italic,punctuation.definition.italic,todo.emphasis#D55FDE
emphasis md#D55FDE
entity.name.section.markdown#EF596F
punctuation.definition.heading.markdown#EF596F
markup.heading.setext#AAB1C0
punctuation.definition.bold.markdown#D8985F
markup.inline.raw.markdown#89CA78
markup.inline.raw.string.markdown#98c379
beginning.punctuation.definition.list.markdown#EF596F
markup.quote.markdown#5C6370italic
punctuation.definition.string.begin.markdown,punctuation.definition.string.end.markdown,punctuation.definition.metadata.markdown#AAB1C0
punctuation.definition.metadata.markdown#D55FDE
markup.underline.link.markdown,markup.underline.link.image.markdown#D55FDE
string.other.link.title.markdown,string.other.link.description.markdown#52ADF2
markup.italic.markdownitalic
markup.bold.markdownbold
string.regexp#57B6C2
constant.character.escape#57B6C2
punctuation.section.embedded, variable.interpolation#BE4F44
invalid.illegal#FFFFFF
invalid.broken#FFFFFF
invalid.deprecated#FFFFFF
invalid.unimplemented#FFFFFF
source.json meta.structure.dictionary.json > string.quoted.json#EF596F
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#EF596F
source.json meta.structure.dictionary.json > value.json > string.quoted.json,source.json meta.structure.array.json > value.json > string.quoted.json,source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation,source.json meta.structure.array.json > value.json > string.quoted.json > punctuation#89CA78
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#2BBAC5
support.type.property-name.json#EF596F
support.type.property-name.json punctuation#EF596F
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade#C679DD
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#C679DD
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php#e5c07b
keyword.operator.error-control.php#D55FDE
keyword.operator.type.php#D55FDE
punctuation.section.array.begin.php#AAB1C0
punctuation.section.array.end.php#AAB1C0
invalid.illegal.non-null-typehinted.php#ff0000
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php#e5c07b
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#52ADF2
punctuation.definition.parameters.begin.bracket.round.php,punctuation.definition.parameters.end.bracket.round.php,punctuation.separator.delimiter.php,punctuation.section.scope.begin.php,punctuation.section.scope.end.php,punctuation.terminator.expression.php,punctuation.definition.arguments.begin.bracket.round.php,punctuation.definition.arguments.end.bracket.round.php,punctuation.definition.storage-type.begin.bracket.round.php,punctuation.definition.storage-type.end.bracket.round.php,punctuation.definition.array.begin.bracket.round.php,punctuation.definition.array.end.bracket.round.php,punctuation.definition.begin.bracket.round.php,punctuation.definition.end.bracket.round.php,punctuation.definition.begin.bracket.curly.php,punctuation.definition.end.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php,punctuation.definition.section.switch-block.start.bracket.curly.php,punctuation.definition.section.switch-block.begin.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php#bbbbbb
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#D8985F
entity.name.goto-label.php,support.other.php#52ADF2
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#2BBAC5
keyword.operator.regexp.php#D55FDE
keyword.operator.comparison.php#2BBAC5
punctuation.definition.variable.php#EF596F
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#D55FDE
meta.function.decorator.python#52ADF2
support.token.decorator.python,meta.function.decorator.identifier.python#2BBAC5
function.parameter#D8985F
function.parameter#AAB1C0
function.brace#AAB1C0
function.parameter.ruby, function.parameter.cs#AAB1C0
rgb-value#2BBAC5
inline-color-decoration rgb-value#D8985F
less rgb-value#D8985F
selector.sass#EF596F
var.this,variable.language.this.js,variable.language.this.ts,variable.language.this.jsx,variable.language.this.tsx#e5c07bitalic
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#e5c07b
block.scope.end,block.scope.begin#AAB1C0
storage.type.cs#e5c07bff
entity.name.variable.local.cs#EF596F
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#D55FDE
meta.template.expression#aab1c0
keyword.operator.assignment.go, keyword.operator.address.go#e5c07bff
support.type.prelude.elm#2bbac5ff
support.constant.elm#d8985fff
punctuation.quasi.element#D55FDE
constant.character.entity#EF596F
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#56B6C2

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

One Dark Minimal - Coding Theme