Skip to main content
CodingTheme

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#161820
  • activityBar.border#161820
  • activityBar.dropBackground#1d202b
  • activityBar.foreground#c6c8d0
  • activityBarBadge.background#c6c8d0
  • activityBarBadge.foreground#161820
  • badge.background#c6c8d0
  • badge.foreground#161820
  • breadcrumb.activeSelectionForeground#c6c8d0
  • breadcrumb.focusForeground#c6c8d0
  • breadcrumb.foreground#A2AFBC
  • button.background#c6c8d03d
  • button.foreground#c6c8d0
  • button.hoverBackground#c6c8d060
  • debugToolBar.background#161820
  • diffEditor.insertedTextBackground#00e67630
  • diffEditor.insertedTextBorder#00e67600
  • diffEditor.removedTextBackground#f4433630
  • diffEditor.removedTextBorder#f4433600
  • dropdown.background#20222c
  • dropdown.border#20222c
  • dropdown.foreground#c6c8d0
  • editor.background#161820
  • editor.findMatchBackground#431e73d5
  • editor.findMatchHighlightBackground#36355377
  • editor.findRangeHighlightBackground#62409c7c
  • editor.foreground#CED3DB
  • editor.hoverHighlightBackground#3a405c5e
  • editor.lineHighlightBackground#1e2131
  • editor.lineHighlightBorder#1e2131
  • editor.selectionBackground#263645
  • editor.selectionHighlightBackground#3e1092a1
  • editor.wordHighlightBackground#e706d41f
  • editorBracketMatch.background#5C016E
  • editorBracketMatch.border#16182000
  • editorCodeLens.foreground#613f8390
  • editorCursor.foreground#c6c8d0
  • editorError.foreground#f44336
  • editorGroup.border#161820
  • editorGroup.dropBackground#1d202b
  • editorGroupHeader.noTabsBackground#2b2f3f
  • editorGroupHeader.tabsBackground#161820
  • editorGroupHeader.tabsBorder#161820
  • editorGutter.addedBackground#e0e252
  • editorGutter.background#16182000
  • editorGutter.deletedBackground#f700ff
  • editorGutter.modifiedBackground#00e676
  • editorHoverWidget.background#262b3d
  • editorHoverWidget.border#262b3d
  • editorIndentGuide.activeBackground#3e476e
  • editorIndentGuide.background#24293e
  • editorInfo.foreground#2196f3
  • editorLineNumber.foreground#485466
  • editorLink.activeForeground#c6c8d0
  • editorOverviewRuler.addedForeground#00e676
  • editorOverviewRuler.border#16182000
  • editorOverviewRuler.commonContentForeground#c6c8d0
  • editorOverviewRuler.currentContentForeground#2196f3
  • editorOverviewRuler.deletedForeground#f700ff
  • editorOverviewRuler.errorForeground#ff4531
  • editorOverviewRuler.findMatchForeground#bdae93
  • editorOverviewRuler.incomingContentForeground#00e676
  • editorOverviewRuler.infoForeground#86c7d3
  • editorOverviewRuler.modifiedForeground#00e676
  • editorOverviewRuler.rangeHighlightForeground#bdae93
  • editorOverviewRuler.selectionHighlightForeground#665c54
  • editorOverviewRuler.warningForeground#ffde03
  • editorOverviewRuler.wordHighlightForeground#665c54
  • editorOverviewRuler.wordHighlightStrongForeground#665c54
  • editorRuler.foreground#24293e
  • editorSuggestWidget.background#272c3f
  • editorSuggestWidget.border#161820
  • editorSuggestWidget.foreground#c6c8d0
  • editorSuggestWidget.highlightForeground#00e676
  • editorSuggestWidget.selectedBackground#2b3350
  • editorWarning.foreground#ffe32e
  • editorWhitespace.foreground#24293e
  • editorWidget.background#232738
  • editorWidget.border#161820
  • errorForeground#fb4934
  • extensionButton.prominentBackground#451A6D
  • extensionButton.prominentHoverBackground#501e7e
  • focusBorder#161820
  • foreground#c6c8d0
  • gitDecoration.conflictingResourceForeground#ff02c8
  • gitDecoration.deletedResourceForeground#f44336
  • gitDecoration.ignoredResourceForeground#89a0c3
  • gitDecoration.modifiedResourceForeground#00e676
  • gitDecoration.untrackedResourceForeground#ffde03
  • input.background#1c1f2b
  • input.border#161820
  • input.foreground#c6c8d0
  • input.placeholderForeground#7981a0
  • inputValidation.errorBackground#8f3f39
  • inputValidation.errorBorder#fb4934
  • inputValidation.infoBackground#336994
  • inputValidation.infoBorder#00e676
  • inputValidation.warningBackground#ff6f00
  • inputValidation.warningBorder#fabd2f
  • list.activeSelectionBackground#2b2f3f
  • list.activeSelectionForeground#c6c8d0
  • list.dropBackground#1d202b
  • list.focusBackground#252c44
  • list.focusForeground#c6c8d0
  • list.highlightForeground#A2AFBC
  • list.hoverBackground#27314d
  • list.hoverForeground#c6c8d0
  • list.inactiveSelectionBackground#212431
  • list.inactiveSelectionForeground#c6c8d0
  • list.warningForeground#00e676
  • merge.border#16182000
  • merge.currentContentBackground#2196f320
  • merge.currentHeaderBackground#2196f340
  • merge.incomingContentBackground#00e67620
  • merge.incomingHeaderBackground#00e67640
  • panel.border#161820
  • panel.dropBackground#1d202b
  • panelTitle.activeForeground#c6c8d0
  • panelTitle.inactiveForeground#89a0c3
  • peekView.border#1e212c
  • peekViewEditor.background#1e212c
  • peekViewEditorGutter.background#1e212c
  • peekViewResult.background#1e212c
  • peekViewResult.fileForeground#c6c8d0
  • peekViewResult.matchHighlightBackground#8ec07c30
  • peekViewResult.selectionBackground#8ec07c30
  • peekViewResult.selectionForeground#8ec07c30
  • peekViewTitle.background#1e212c
  • peekViewTitleDescription.foreground#c6c8d0
  • peekViewTitleLabel.foreground#c6c8d0
  • progressBar.background#00e676
  • scrollbar.shadow#161820
  • scrollbarSlider.activeBackground#c6c8d07c
  • scrollbarSlider.background#c6c8d023
  • scrollbarSlider.hoverBackground#c6c8d04d
  • selection.background#283155
  • sideBar.background#161820
  • sideBar.border#161820
  • sideBar.foreground#c6c8d0
  • sideBarSectionHeader.background#1f2333
  • sideBarSectionHeader.foreground#c6c8d0
  • sideBarTitle.foreground#c6c8d0
  • statusBar.background#161820
  • statusBar.border#161820
  • statusBar.debuggingBackground#00353E
  • statusBar.debuggingBorder#16182000
  • statusBar.debuggingForeground#161820
  • statusBar.foreground#A2AFBC
  • statusBar.noFolderBackground#161820
  • statusBar.noFolderBorder#16182000
  • tab.activeBackground#161820
  • tab.activeBorder#161820
  • tab.activeForeground#c6c8d0
  • tab.border#161820
  • tab.inactiveBackground#161820
  • tab.inactiveForeground#89a0c3
  • tab.unfocusedActiveBorder#161820
  • tab.unfocusedActiveForeground#89a0c3
  • tab.unfocusedInactiveForeground#5a6a81
  • terminal.ansiBlack#161820
  • terminal.ansiBlue#206dac
  • terminal.ansiBrightBlack#232635
  • terminal.ansiBrightBlue#00e676
  • terminal.ansiBrightCyan#8ec07c
  • terminal.ansiBrightGreen#cacc53
  • terminal.ansiBrightMagenta#df6495
  • terminal.ansiBrightRed#fb4934
  • terminal.ansiBrightWhite#c6c8d0
  • terminal.ansiBrightYellow#fabd2f
  • terminal.ansiCyan#00e676
  • terminal.ansiGreen#00e676
  • terminal.ansiMagenta#ff0266
  • terminal.ansiRed#f44336
  • terminal.ansiWhite#613f83
  • terminal.ansiYellow#ffde03
  • terminal.background#161820
  • terminal.foreground#c6c8d0
  • textLink.activeForeground#c6c8d0
  • textLink.foreground#c6c8d0dd
  • titleBar.activeBackground#161820
  • titleBar.activeForeground#c6c8d0
  • titleBar.inactiveBackground#161820
  • widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#c6c8d0
emphasisitalic
strongbold
header#c6c8d0
comment, punctuation.definition.comment#6b7087
punctuation.definition.string.template#c6c8d0
punctuation.definition.string.begin, punctuation.definition.string.end, constant.language#89a0c3
constant, support.constant, variable.arguments#c6c8d0
constant.language.boolean#89a0c3
constant.character.entity#89a0c3
constant.rgb-value#c6c8d0
entity.name.selector#c6c8d0
entity.other.attribute-name#c6c8d0
entity.other.inherited-class#c6c8d0
entity.name.tag, punctuation.tag, invalid.illegal.bad-ampersand#89a0c3
invalid, invalid.illegal#f44336
invalid.deprecated#ff0266
meta.selector, meta.object.member#c6c8d0
meta.preprocessor#c6c8d0
meta.preprocessor.string#c6c8d0
meta.preprocessor.numeric#c6c8d0
meta.header.diff#c6c8d0
meta.section.attributes.plain#89a0c3
storage#89a0c3
storage.modifier#89a0c3
string#c6c8d0
string.tag#89a0c3
string.value#c6c8d0
string.regexp#c6c8d0
string.escape#89a0c3
string.quasi#89a0c3
string.entity#c6c8d0
object#c6c8d0
module.node#c6c8d0
support.type.property-name#c6c8d0
keyword#89a0c3
keyword.control#89a0c3
keyword.control.try, keyword.control.catch, keyword.control.trycatch#c6c8d0
keyword.control.conditional, keyword.control.loop#c6c8d0
keyword.control.module#c6c8d0
keyword.control.less#c6c8d0
keyword.operator, keyword.operator.punctuation, keyword.operator.new#89a0c3
keyword.operator.navigation#89a0c3
keyword.other.unit#c6c8d0
metatag.php#c6c8d0
support.function.git-rebase#c6c8d0
constant.sha.git-rebase#c6c8d0
meta.type.name, meta.return.type, meta.return-type, meta.cast, support.type, storage.type.cs, variable.class#89a0c3
variable.this, support.variable#c6c8d0
entity.static, entity.name.class.static.function, entity.name.function, entity.name.class, entity.name.type.class#c6c8d0
meta.type.annotation, meta.type.parameters#89a0c3
storage.type.function, entity.function, entity.name.function.static, meta.delimiter#89a0c3
entity.name.function.function-call#c6c8d0
support.function.builtin#c6c8d0
entity.name.method, entity.name.method.function-call, entity.name.static.function-call#89a0c3
brace, meta.brace.round, meta.brace.square, meta.brace.curly#89a0c3
meta.parameter.type.variable, variable.parameter, variable.name, variable.other, variable, string.constant.other.placeholder#c6c8d0
prototype#c6c8d0
storage.type.class#89a0c3
punctuation#89a0c3
punctuation.quoted#89a0c3
punctuation.quasi#89a0c3
punctuation.accessor, keyword.operator.accessor#c6c8d0
*url*, *link*, *uri*underline
text.haml, string.quoted.double.ruby, meta.section.attributes.plain.haml#c6c8d0
meta.section.attributes.plain.haml, entity.name.tag, meta.tag.haml#89a0c3
support.type.python, meta.function.python, meta.function-call.python, entity.name.function.python, meta.function-call.generic, meta.function-call.arguments, constant.other.caps#c6c8d0
storage.type.function.python, storage.modifier.declaration, storage.type.class.python, entity.name.function.decorator#89a0c3
keyword.operator.logical#89a0c3
punctuation.definition.logical-expression#89a0c3
string.inperpolated.dollar.shell#89a0c3
string.interpolated.dollar.shell, string.interpolated.backtick.shell#89a0c3
keyword.control.directive#89a0c3
support.function.C99 , keyword.control.c#c6c8d0
meta.scope.prerequisites#fabd2f
entity.name.function.target#b8bb26bold
keyword.other.import.java, comment.block.javadoc variable.parameter.java, source.java variable.other.object, source.java variable.other.definition.java, storage.modifier.import.java, storage.modifier.package.java, punctuation.separator.period#c6c8d0
keyword.other.package.java, keyword.other.import.java, storage.type.java, storage.type.annotation, keyword.other.documentation.javadoc#89a0c3
meta.function-parameters.lisp#fabd2f
markup.underlineunderline
string.other.link.title.markdown#c6c8d0underline
markup.underline.link#c6c8d0
markup.bold#c6c8d0bold
markup.heading#c6c8d0bold
markup.italicitalic
markup.inserted#c6c8d0
markup.deleted#c6c8d0
markup.changed#c6c8d0
markup.punctuation.quote.beginning#89a0c3
markup.punctuation.list.beginning#89a0c3
markup.inline.raw, markup.fenced_code.block#c6c8d0
string.quoted.double.interpolated.ruby, source.ruby.embedded.haml, meta.line.ruby.haml, tring.quoted.double.ruby#c6c8d0
string.quoted.double.json#c6c8d0
source.json meta.structure.dictionary.json support.type.property-name.json#c6c8d0
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c6c8d0
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c6c8d0
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c6c8d0
support.function.name.sass#c6c8d0
entity.other.attribute-name.pseudo-class.css.sass, meta.property-list.css.sass, keyword.other.unit.css.sass#89a0c3
entity.other.attribute-name.css, support.property-value, constant.rgb-value, support.property-value.scss, constant.rgb-value.scss, source.css support.function.transform, source.css support.function.timing-function, source.css support.function.misc, entity.other.attribute-name.class, punctuation.definition.entity, support.type.property-name.css, source.css meta.selector#c6c8d0
entity.name.tag.css, punctuation.definition.entity.css, entity.other.attribute-name.pseudo-class.css, keyword.other.unit.px.css, keyword.other.unit.em.css, keyword.other.unit.rem.css, keyword.other.unit.percentage.css, keyword.other.unit.deg.css, entity.other.attribute-name.pseudo-element.css#89a0c3
string.quoted.double.html#c6c8d0
support.type.object.html-attribute, punctuation.definition.tag.end.html, punctuation.definition.tag, cast.expr, text.html entity.name.tag, text.html punctuation.tag#89a0c3
#c6c8d0
string.regexp.angular-interpolation.begin, string.regexp.angular-interpolation.end, meta.directive.angular, text.html.angular#89a0c3
support.type.object, variable.language.self.js#c6c8d0
source.js variable.language#89a0c3
meta.decorator.ts, meta.objectliteral.ts, variable.other.object.ts#c6c8d0
source.ts variable.language, punctuation.definition.string.begin.ts, punctuation.definition.string.end.ts#89a0c3
source.go storage.type#89a0c3
source.go entity.name.import#c6c8d0
punctuation.other.period#c6c8d0
source.go keyword.package, source.go keyword.import#89a0c3
source.go keyword.interface, source.go keyword.struct#89a0c3
source.go entity.name.type#c6c8d0
source.go entity.name.function#c6c8d0
keyword.control.cucumber.table#c6c8d0
source.reason string.double#c6c8d0
source.reason keyword.control.less#89a0c3
source.reason entity.name.function#c6c8d0
source.reason support.property-value, source.reason entity.name.filename#c6c8d0
source.powershell variable.other.member.powershell#c6c8d0
source.powershell support.function.powershell#89a0c3
keyword.control.powershell#c6c8d0
source.powershell support.function.attribute.powershell#c6c8d0
source.powershell meta.hashtable.assignment.powershell variable.other.readwrite.powershell#89a0c3

Shiki preview

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

Loading...

RDCD by denis - VS Code Theme