Skip to main content
CodingTheme

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#202020
  • activityBar.border#202020
  • activityBar.foreground#bcbcbccc
  • activityBarBadge.background#ffcc66
  • activityBarBadge.foreground#202020
  • badge.background#ffcc66
  • badge.foreground#202020
  • button.background#ffcc66
  • button.foreground#202020
  • button.hoverBackground#fac761
  • debugExceptionWidget.background#232834
  • debugExceptionWidget.border#303030
  • debugToolBar.background#232834
  • diffEditor.insertedTextBackground#bae67e26
  • diffEditor.removedTextBackground#f29e7426
  • dropdown.background#232834
  • dropdown.border#373e4c
  • dropdown.foreground#bcbcbc
  • editor.background#202020
  • editor.findMatchBackground#ffcc660d
  • editor.findMatchBorder#ffcc66
  • editor.findMatchHighlightBackground#ffcc660d
  • editor.findMatchHighlightBorder#ffcc6659
  • editor.findRangeHighlightBackground#262f3e
  • editor.findRangeHighlightBorder#20202000
  • editor.foreground#cbccc6
  • editor.inactiveSelectionBackground#262f3e
  • editor.lineHighlightBackground#303030
  • editor.rangeHighlightBackground#303030
  • editor.selectionBackground#2a3546
  • editor.selectionHighlightBackground#262f3e
  • editor.selectionHighlightBorder#313e52
  • editor.wordHighlightBackground#262f3e
  • editor.wordHighlightStrongBackground#ffcc6633
  • editorBracketMatch.background#bcbcbc4d
  • editorBracketMatch.border#bcbcbc99
  • editorCodeLens.foreground#5c6773
  • editorCursor.foreground#ffcc66
  • editorError.foreground#ff3333
  • editorGroup.background#232834
  • editorGroup.border#303030
  • editorGroupHeader.noTabsBackground#202020
  • editorGroupHeader.tabsBackground#202020
  • editorGroupHeader.tabsBorder#202020
  • editorGutter.addedBackground#a6cc7099
  • editorGutter.deletedBackground#f2798399
  • editorGutter.modifiedBackground#77a8d999
  • editorHoverWidget.background#232834
  • editorHoverWidget.border#101521
  • editorIndentGuide.activeBackground#bcbcbcb3
  • editorIndentGuide.background#bcbcbc4d
  • editorLineNumber.activeForeground#bcbcbccc
  • editorLineNumber.foreground#bcbcbc66
  • editorLink.activeForeground#ffcc66
  • editorMarkerNavigation.background#232834
  • editorOverviewRuler.addedForeground#a6cc7099
  • editorOverviewRuler.border#303030
  • editorOverviewRuler.deletedForeground#f2798399
  • editorOverviewRuler.errorForeground#ff3333
  • editorOverviewRuler.modifiedForeground#77a8d999
  • editorOverviewRuler.warningForeground#ffcc66
  • editorRuler.foreground#bcbcbc4d
  • editorSuggestWidget.background#232834
  • editorSuggestWidget.border#101521
  • editorSuggestWidget.highlightForeground#ffcc66
  • editorSuggestWidget.selectedBackground#303030
  • editorWarning.foreground#ffcc66
  • editorWhitespace.foreground#bcbcbc66
  • editorWidget.background#232834
  • extensionButton.prominentBackground#ffcc66
  • extensionButton.prominentForeground#202020
  • extensionButton.prominentHoverBackground#fac761
  • focusBorder#505867
  • foreground#bcbcbc
  • gitDecoration.conflictingResourceForeground
  • gitDecoration.deletedResourceForeground#f27983b3
  • gitDecoration.ignoredResourceForeground#484f5e
  • gitDecoration.modifiedResourceForeground#77a8d9b3
  • gitDecoration.submoduleResourceForeground#d4bfffb3
  • gitDecoration.untrackedResourceForeground#a6cc70b3
  • input.background#232834
  • input.border#373e4c
  • input.foreground#cbccc6
  • input.placeholderForeground#586070
  • inputOption.activeBorder#ffcc66
  • inputValidation.errorBackground#202020
  • inputValidation.errorBorder#ff3333
  • inputValidation.infoBackground#202020
  • inputValidation.infoBorder#5ccfe6
  • inputValidation.warningBackground#202020
  • inputValidation.warningBorder#ffd580
  • list.activeSelectionBackground#303030
  • list.activeSelectionForeground#bcbcbc
  • list.focusBackground#303030
  • list.focusForeground#bcbcbc
  • list.highlightForeground#ffcc66
  • list.hoverBackground#303030
  • list.hoverForeground#bcbcbc
  • list.inactiveSelectionBackground#303030
  • list.inactiveSelectionForeground#bcbcbc
  • list.invalidItemForeground#586070
  • panel.background#202020
  • panel.border#303030
  • panelTitle.activeBorder#ffcc66
  • panelTitle.activeForeground#cbccc6
  • panelTitle.inactiveForeground#bcbcbc
  • peekView.border#303030
  • peekViewEditor.background#232834
  • peekViewEditor.matchHighlightBackground#ffcc6633
  • peekViewResult.background#232834
  • peekViewResult.fileForeground#bcbcbc
  • peekViewResult.matchHighlightBackground#ffcc6633
  • peekViewTitle.background#232834
  • peekViewTitleDescription.foreground#bcbcbc
  • peekViewTitleLabel.foreground#bcbcbc
  • pickerGroup.border#303030
  • pickerGroup.foreground#484f5e
  • progressBar.background#ffcc66
  • scrollbar.shadow#303030
  • scrollbarSlider.activeBackground#f000
  • scrollbarSlider.background#0ff0
  • scrollbarSlider.hoverBackground#ff00
  • selection.background#2a3546fd
  • settings.headerForeground#cbccc6
  • settings.modifiedItemIndicator#77a8d9
  • sideBar.background#202020
  • sideBar.border#202020
  • sideBarSectionHeader.background#202020
  • sideBarSectionHeader.foreground#bcbcbc
  • sideBarTitle.foreground#bcbcbc
  • statusBar.background#202020
  • statusBar.border#202020
  • statusBar.debuggingBackground#f29e74
  • statusBar.debuggingForeground#202020
  • statusBar.foreground#bcbcbc
  • statusBar.noFolderBackground#232834
  • statusBarItem.activeBackground#00000050
  • statusBarItem.hoverBackground#00000030
  • statusBarItem.prominentBackground#303030
  • statusBarItem.prominentHoverBackground#00000030
  • tab.activeBackground#202020
  • tab.activeBorder#ffcc66
  • tab.activeForeground#cbccc6
  • tab.border#202020
  • tab.inactiveBackground#202020
  • tab.inactiveForeground#bcbcbc
  • tab.unfocusedActiveBorder#bcbcbc
  • tab.unfocusedActiveForeground#bcbcbc
  • tab.unfocusedInactiveForeground#bcbcbc
  • terminal.ansiBlack#303030
  • terminal.ansiBlue#6dcbfa
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#73d0ff
  • terminal.ansiBrightCyan#95e6cb
  • terminal.ansiBrightGreen#bae67e
  • terminal.ansiBrightMagenta#d4bfff
  • terminal.ansiBrightRed#f28779
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffd580
  • terminal.ansiCyan#90e1c6
  • terminal.ansiGreen#a6cc70
  • terminal.ansiMagenta#cfbafa
  • terminal.ansiRed#ed8274
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#fad07b
  • terminal.background#202020
  • terminal.foreground#cbccc6
  • textBlockQuote.background#232834
  • textLink.activeForeground#ffcc66
  • textLink.foreground#ffcc66
  • textPreformat.foreground#cbccc6
  • titleBar.activeBackground#202020
  • titleBar.activeForeground#cbccc6
  • titleBar.border#202020
  • titleBar.inactiveBackground#202020
  • titleBar.inactiveForeground#bcbcbc
  • walkThrough.embeddedEditorBackground#232834
  • widget.shadow#141925

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.class#ccc
entity.name.tag#ef596fff
punctuation.section.embedded#FFC66D
entity.other.attribute-name#808080
text.html entity.name.tag, text.html punctuation.definition.tag#FFC66D
constant.numeric#6897BB
storage#cc7832ffbold
keyword#cc7832ffbold
keyword.control.import, keyword.control.export#cc7832ffbold
support.type.object.module#cc7832ffbold
keyword.operator.new, keyword.operator.expression#cc7832ffbold
storage.type.function.arrow, punctuation.definition.parameters#cc7832ffbold
variable.language.this, variable.language.super#cc7832ffbold
support.class.console, variable.language.arguments, keyword.other.debugger, support.variable.dom, keyword.operator.expression.delete#ef596fff
meta.embedded.expression meta.objectliteral, meta.embedded.expression storage, meta.embedded.expression storage.type.function.arrow, meta.embedded.expression punctuation.definition.parameters#ef596fffbold
support.function, meta.function-call entity.name.function#FFC66D
punctuation.definition.binding-pattern#cc7832ffbold
constant.language, support.constant, support.class.builtin#808080italic
variable, keyword.operator, entity.other.inherited-class, support.variable.property.process, support.function.console, meta.definition#ccc
entity.name.type, meta.object.type, meta.type.function punctuation.definition.parameters, meta.type.function storage.type.function.arrow, meta.type.annotation meta.brace.square#fff
support.type.builtin, support.type.primitive#fffitalic
punctuation.separator, punctuation.accessor, punctuation.terminator#444
meta.brace.round, meta.block, meta.class#444
punctuation.definition.tag#808080
variable.other.property, support.variable.property#ccc
entity.name.type.class#ccc
string, string keyword#6A8759
punctuation.definition.string#98c378
punctuation.definition.template-expression, keyword.control.anchor.regexp#6A8759
meta.object-literal.key#9876AA
meta.interface punctuation.definition.block, meta.objectliteral#9876AAbold
meta.array.literal#9876AA
punctuation.separator.key-value#444
meta.method.declaration, meta.definition.method#ccc
variable.other.object.property, variable.other.object#808080
punctuation.definition.comment, comment.block.documentation storage.type.class.jsdoc, comment.block.documentation entity.name.type.instance.jsdoc, comment.block.documentation variable.other.jsdoc, comment#606060
source.json punctuation, source.json punctuation.definition.string, source.json punctuation.support.type.property-name#444
source.json punctuation.definition#ccc
source.json string#ccc
source.json constant.language, source.json constant.numeric#6897BB
source.json support.type.property-name#808080
support.class#ccc
entity.name.tag#ef596fff
punctuation.section.embedded#FFC66D
entity.other.attribute-name#808080
text.html entity.name.tag, text.html punctuation.definition.tag#FFC66D
constant.numeric#6897BB
storage#cc7832ffbold
keyword#cc7832ffbold
keyword.control.import, keyword.control.export#cc7832ffbold
support.type.object.module#cc7832ffbold
keyword.operator.new, keyword.operator.expression#cc7832ffbold
storage.type.function.arrow, punctuation.definition.parameters#cc7832ffbold
variable.language.this, variable.language.super#cc7832ffbold
support.class.console, variable.language.arguments, keyword.other.debugger, support.variable.dom, keyword.operator.expression.delete#ef596fff
meta.embedded.expression meta.objectliteral, meta.embedded.expression storage, meta.embedded.expression storage.type.function.arrow, meta.embedded.expression punctuation.definition.parameters#ef596fffbold
support.function, meta.function-call entity.name.function#FFC66D
punctuation.definition.binding-pattern#cc7832ffbold
constant.language, support.constant, support.class.builtin#808080italic
variable, keyword.operator, entity.other.inherited-class, support.variable.property.process, support.function.console, meta.definition#ccc
entity.name.type, meta.object.type, meta.type.function punctuation.definition.parameters, meta.type.function storage.type.function.arrow, meta.type.annotation meta.brace.square#fff
support.type.builtin, support.type.primitive#fffitalic
punctuation.separator, punctuation.accessor, punctuation.terminator#444
meta.brace.round, meta.block, meta.class#444
punctuation.definition.tag#808080
variable.other.property, support.variable.property#ccc
entity.name.type.class#ccc
string, string keyword#6A8759
punctuation.definition.string#98c378
punctuation.definition.template-expression, keyword.control.anchor.regexp#6A8759
meta.object-literal.key#9876AA
meta.interface punctuation.definition.block, meta.objectliteral#9876AAbold
meta.array.literal#9876AA
punctuation.separator.key-value#444
meta.method.declaration, meta.definition.method#ccc
variable.other.object.property, variable.other.object#808080
punctuation.definition.comment, comment.block.documentation storage.type.class.jsdoc, comment.block.documentation entity.name.type.instance.jsdoc, comment.block.documentation variable.other.jsdoc, comment#606060
source.json punctuation, source.json punctuation.definition.string, source.json punctuation.support.type.property-name#444
source.json punctuation.definition#ccc
source.json string#ccc
source.json constant.language, source.json constant.numeric#6897BB
source.json support.type.property-name#808080
#c7d0d9ff
support.constant.edge#d55fdeff
variable.parameter.function#A6B2C0
comment, punctuation.definition.comment#5C6370italic
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
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
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
keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.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
variable#EF596F
token.variable.parameter.java#AAB1C0
import.storage.java#e5c07b
entity.name.type.namespace#e5c07b
support.class, entity.name.type.class#bbb
entity.name.class.identifier.namespace.type#e5c07b
token.storage.type.java#e5c07b
constant.other.symbol#2BBAC5
constant.numeric#D8985F
entity.other.attribute-name.class.css#D8985Fnormal
meta.selector#D55FDE
none#D2945D
markup.heading#EF596Fbold
markup.heading punctuation.definition.heading, entity.name.section#52ADF2
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
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
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
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.section.embedded#d55fde
meta.template.expression#aab1c0
emphasisitalic
strongbold
header#000080
comment#808080
constant.numeric#6897BB
entity.name.tag#FFC66D
entity.name.tag.css#FFC66D
entity.other.attribute-name.class.html, entity.other.attribute-name.class.jade#9876AA
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss#FFC66D
invalid#f44747
markup.underlineunderline
markup.bold#bbbbold
markup.heading#bbb
markup.italicitalic
markup.inserted#6A8759
markup.deleted#CC7832
markup.changed#bbb
beginning.punctuation.definition.quote.markdown#608b4e
beginning.punctuation.definition.list.markdown#6796e6
markup.inline.raw#CC7832
meta.selector#FFC66D
punctuation.definition.tag#FFC66D
meta.preprocessor#CC7832
meta.preprocessor.string#CC7832
meta.preprocessor.numeric#6A8759
meta.structure.dictionary.key.python#9876AA
meta.diff.header#CC7832
variable.css, variable.scss, variable.other.less, entity.other.inherited-class.php, entity.name.type.class.php, entity.name.type.namespace.php, keyword.operator.key.php, storage.type.php, support.class.builtin.php#bbb
support.class.dom, meta.function-call, entity.name.type.module#bbb
keyword#CC7832
punctuation.section.embedded.begin.metatag.php, punctuation.section.embedded.end.metatag.php#CC7832
support.function.git-rebase#9876AA
constant.sha.git-rebase#6A8759
storage.modifier.import.java, storage.modifier.package.java#d4d4d4
variable.language#CC7832
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#CC7832
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6

Shiki preview

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

Loading...

JustCode Theme by psxcode - VS Code Theme