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#edece8
  • activityBar.foreground#424242
  • activityBarBadge.background#005577
  • badge.background#c4c4c4
  • badge.foreground#333333
  • breadcrumb.activeSelectionForeground#4e4e4e
  • breadcrumb.background#f9f8f4
  • breadcrumb.focusForeground#4e4e4e
  • breadcrumb.foreground#616161cc
  • breadcrumbPicker.background#f3f3f3
  • button.background#005577
  • button.foreground#f9f8f4
  • button.hoverBackground#0062a3
  • debugExceptionWidget.background#f1dfde
  • debugExceptionWidget.border#488432
  • debugToolBar.background#f3f3f3
  • descriptionForeground#717171
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#7b447433
  • dropdown.background#f9f8f4
  • dropdown.border#cecece
  • editor.background#f9f8f4
  • editor.findMatchBackground#a8ac94
  • editor.findMatchHighlightBackground#ea5c0055
  • editor.findRangeHighlightBackground#b4b4b44d
  • editor.focusedStackFrameHighlightBackground#cee7ce73
  • editor.foreground#424242
  • editor.hoverHighlightBackground#add6ff26
  • editor.inactiveSelectionBackground#e5ebf1
  • editor.lineHighlightBorder#eeeeee
  • editor.rangeHighlightBackground#fdff0033
  • editor.selectionBackground#add6ff
  • editor.selectionHighlightBackground#add6ff80
  • editor.snippetFinalTabstopHighlightBorder#0a326480
  • editor.snippetTabstopHighlightBackground#0a326433
  • editor.stackFrameHighlightBackground#ffff6673
  • editor.wordHighlightBackground#57575740
  • editor.wordHighlightStrongBackground#0e639c40
  • editorBracketMatch.background#0064001a
  • editorBracketMatch.border#b9b9b9
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#424242
  • editorError.foreground#d60a0a
  • editorGroup.border#e7e7e7
  • editorGroup.dropBackground#2677cb2e
  • editorGroupHeader.noTabsBackground#f9f8f4
  • editorGroupHeader.tabsBackground#f7f6ef
  • editorGutter.addedBackground#81b88b
  • editorGutter.background#f9f8f4
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#ca4b51
  • editorGutter.modifiedBackground#66afe0
  • editorHint.foreground#6c6c6c
  • editorHoverWidget.background#f3f3f3
  • editorHoverWidget.border#c8c8c8
  • editorInfo.foreground#b8b8b8
  • editorLineNumber.activeForeground#0b216f
  • editorLineNumber.foreground#237893
  • editorLink.activeForeground#2c65b5
  • editorMarkerNavigation.background#f9f8f4
  • editorMarkerNavigationError.background#d60a0a
  • editorMarkerNavigationInfo.background#b8b8b8
  • editorMarkerNavigationWarning.background#117711
  • editorOverviewRuler.addedForeground#00557799
  • editorOverviewRuler.border#7f7f7f4d
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#00557799
  • editorOverviewRuler.errorForeground#ff1212b3
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#00557799
  • editorOverviewRuler.rangeHighlightForeground#00557799
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#f9f8f4
  • editorRuler.foreground#d3d3d3
  • editorSuggestWidget.background#f3f3f3
  • editorSuggestWidget.border#c8c8c8
  • editorSuggestWidget.focusHighlightForeground#bbdefb
  • editorSuggestWidget.foreground#424242
  • editorSuggestWidget.highlightForeground#bc4749
  • editorSuggestWidget.selectedBackground#3581b8
  • editorUnnecessaryCode.opacity#42424277
  • editorWarning.foreground#117711
  • editorWhitespace.foreground#33333333
  • editorWidget.background#f3f3f3
  • editorWidget.border#c8c8c8
  • errorForeground#a1260d
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#f9f8f4
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#00557766
  • foreground#616161
  • gitDecoration.addedResourceForeground#587c0c
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#ad0707
  • gitDecoration.ignoredResourceForeground#8e8e90
  • gitDecoration.modifiedResourceForeground#895503
  • gitDecoration.submoduleResourceForeground#1258a7
  • gitDecoration.untrackedResourceForeground#007100
  • input.background#f9f8f4
  • input.foreground#616161
  • input.placeholderForeground#767676
  • inputOption.activeBorder#005577
  • inputValidation.errorBackground#f2dede
  • inputValidation.errorBorder#be1100
  • inputValidation.infoBackground#d6ecf2
  • inputValidation.infoBorder#005577
  • inputValidation.warningBackground#f6f5d2
  • inputValidation.warningBorder#b89500
  • list.activeSelectionBackground#3581b8
  • list.activeSelectionForeground#f9f8f4
  • list.dropBackground#d6ebff
  • list.errorForeground#b01011
  • list.focusBackground#d6ebff
  • list.highlightForeground#0066bf
  • list.hoverBackground#e8e8e8
  • list.inactiveFocusBackground#d8dae6
  • list.inactiveSelectionBackground#e4e6f1
  • list.invalidItemForeground#b89500
  • list.warningForeground#117711
  • listFilterWidget.background#efc1ad
  • listFilterWidget.noMatchesOutline#be1100
  • listFilterWidget.outline#42424200
  • menu.background#f9f8f4
  • menu.selectionBackground#0074e8
  • menu.selectionForeground#f9f8f4
  • menu.separatorBackground#888888
  • menubar.selectionBackground#4242421a
  • menubar.selectionForeground#333333
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#e7e7e7
  • notificationLink.foreground#006ab1
  • notifications.background#f3f3f3
  • notifications.border#e7e7e7
  • panel.background#f9f8f4
  • panel.border#80808059
  • panelTitle.activeBorder#80808059
  • panelTitle.activeForeground#424242
  • panelTitle.inactiveForeground#424242bf
  • peekView.border#005577
  • peekViewEditor.background#f2f8fc
  • peekViewEditor.matchHighlightBackground#f5d802de
  • peekViewEditorGutter.background#f2f8fc
  • peekViewResult.background#f3f3f3
  • peekViewResult.fileForeground#1e1e1e
  • peekViewResult.lineForeground#646465
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#6c6c6c
  • peekViewTitle.background#f9f8f4
  • peekViewTitleDescription.foreground#6c6c6cb3
  • peekViewTitleLabel.foreground#333333
  • pickerGroup.border#cccedb
  • pickerGroup.foreground#0066bf
  • progressBar.background#0e70c0
  • scrollbar.shadow#dddddd
  • scrollbarSlider.activeBackground#42424299
  • scrollbarSlider.background#64646466
  • scrollbarSlider.hoverBackground#646464b3
  • settings.checkboxBackground#f9f8f4
  • settings.checkboxBorder#cecece
  • settings.dropdownBackground#f9f8f4
  • settings.dropdownBorder#cecece
  • settings.dropdownListBorder#c8c8c8
  • settings.headerForeground#444444
  • settings.modifiedItemIndicator#66afe0
  • settings.numberInputBackground#f9f8f4
  • settings.numberInputBorder#cecece
  • settings.numberInputForeground#616161
  • settings.textInputBackground#f9f8f4
  • settings.textInputBorder#cecece
  • settings.textInputForeground#616161
  • sideBar.background#f7f6ef
  • sideBar.dropBackground#f9f8f41f
  • sideBarSectionHeader.background#80808033
  • sideBarTitle.foreground#6f6f6f
  • statusBar.background#bc4749
  • statusBar.debuggingBackground#cc6633
  • statusBar.debuggingForeground#f9f8f4
  • statusBar.foreground#f9f8f4
  • statusBar.noFolderBackground#68217a
  • statusBar.noFolderForeground#f9f8f4
  • statusBarItem.activeBackground#f9f8f42e
  • statusBarItem.hoverBackground#f9f8f41f
  • statusBarItem.prominentBackground#388a34
  • statusBarItem.prominentHoverBackground#369432
  • tab.activeBackground#bc474936
  • tab.activeForeground#333333
  • tab.activeModifiedBorder#33aaee
  • tab.border#f3f3f3
  • tab.inactiveBackground#ececec
  • tab.inactiveForeground#333333b3
  • tab.inactiveModifiedBorder#33aaee80
  • tab.unfocusedActiveForeground#333333b3
  • tab.unfocusedActiveModifiedBorder#33aaeeb3
  • tab.unfocusedInactiveForeground#33333359
  • tab.unfocusedInactiveModifiedBorder#33aaee40
  • terminal.ansiBlack#424242
  • terminal.ansiBlue#0451a5
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#0451a5
  • terminal.ansiBrightCyan#0598bc
  • terminal.ansiBrightGreen#14ce14
  • terminal.ansiBrightMagenta#bc05bc
  • terminal.ansiBrightRed#ed2939
  • terminal.ansiBrightWhite#a5a5a5
  • terminal.ansiBrightYellow#b5ba00
  • terminal.ansiCyan#0598bc
  • terminal.ansiGreen#00bc00
  • terminal.ansiMagenta#bc05bc
  • terminal.ansiRed#ed2939
  • terminal.ansiWhite#555555
  • terminal.ansiYellow#949800
  • terminal.background#f9f8f4
  • terminal.border#80808059
  • terminal.foreground#333333
  • terminal.selectionBackground#42424240
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#00557780
  • textCodeBlock.background#dcdcdc66
  • textLink.activeForeground#006ab1
  • textLink.foreground#006ab1
  • textPreformat.foreground#488432
  • textSeparator.foreground#4242422e
  • titleBar.activeBackground#edece8
  • titleBar.activeForeground#424242
  • titleBar.inactiveBackground#edece8
  • titleBar.inactiveForeground#42424280
  • widget.shadow#a8a8a8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#424242
emphasisitalic
strongbold
meta.diff.header#005577
comment#B8B8B8
constant.language#2C65B5
constant.numeric#1B8486
constant.regexp#325D23
entity.name.tag#1F477F
entity.name.selector#1F477F
entity.other.attribute-name#7B4474
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#1F477F
invalid#ED2939
markup.underlineunderline
markup.bold#005577bold
markup.heading#1F477Fbold
markup.italicitalic
markup.inserted#1B8486
markup.deleted#488432
markup.changed#0451A5
punctuation.definition.quote.begin.markdown, punctuation.definition.list.begin.markdown#0451A5
markup.inline.raw#1F477F
punctuation.definition.tag#1F477F
meta.preprocessor#2C65B5
meta.preprocessor.string#488432
meta.preprocessor.numeric#1B8486
meta.structure.dictionary.key.python#0451A5
storage#2C65B5
storage.type#2C65B5
storage.modifier#2C65B5
string#488432
string.comment.buffered.block.pug, string.quoted.pug, string.interpolated.pug, string.unquoted.plain.in.yaml, string.unquoted.plain.out.yaml, string.unquoted.block.yaml, string.quoted.single.yaml, string.quoted.double.xml, string.quoted.single.xml, string.unquoted.cdata.xml, string.quoted.double.html, string.quoted.single.html, string.unquoted.html, string.quoted.single.handlebars, string.quoted.double.handlebars#2C65B5
string.regexp#325D23
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#2C65B5
meta.template.expression#424242
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#0451A5
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#7B4474
support.type.property-name.json#0451A5
keyword#2C65B5
keyword.control#2C65B5
keyword.operator#424242
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python#2C65B5
keyword.other.unit#1B8486
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#1F477F
support.function.git-rebase#0451A5
constant.sha.git-rebase#1B8486
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#424242
variable.language#2C65B5
entity.name.function, support.function, support.constant.handlebars#A25D0E
meta.return-type, support.class, support.type, entity.name.type, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#27BBBE
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#27BBBE
keyword.control#E32791
variable, meta.definition.variable.name, support.variable, entity.name.variable#B062A7
meta.object-literal.key#B062A7
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#0451A5
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#D16969
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#325D23
keyword.operator.quantifier.regexp#424242
keyword.operator.or.regexp, keyword.control.anchor.regexp#7B4474
constant.character#2C65B5
constant.character.escape#7B4474
token.info-token#316BCD
token.warn-token#CD9731
token.error-token#ED2939
token.debug-token#800080
source.dart#B062A7
meta.return-type, support.class, support.type, entity.name.type, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#3581B8
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#3581B8
constant.language#12507B
meta.preprocessor#12507B
storage#12507B
storage.type#12507B
storage.modifier#12507B
string.comment.buffered.block.pug, string.quoted.pug, string.interpolated.pug, string.unquoted.plain.in.yaml, string.unquoted.plain.out.yaml, string.unquoted.block.yaml, string.quoted.single.yaml, string.quoted.double.xml, string.quoted.single.xml, string.unquoted.cdata.xml, string.quoted.double.html, string.quoted.single.html, string.unquoted.html, string.quoted.single.handlebars, string.quoted.double.handlebars#12507B
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#12507B
keyword#12507B
keyword.control#12507B
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python#12507B
variable.language#12507B
comment, storage.modifier, punctuation.definition.comment, entity.other, support.type.vendored, support.constant.vendored, markup.quote, markup.italic, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, keyword.control.clojure, source.clojure meta.symbol.dynamic, keyword.other.this.cs, keyword.other.base.cs, support.type.core.rust, source.r meta.function.r keyword.control.r, comment.line.roxygen.r keyword, keyword.control.inheritance.coffee, comment.block.documentation.phpdoc.php keyword, keyword.other.array.phpdoc.php, storage.type.modifier, comment.block.javadoc.java keyword, keyword.operator.documentation.powershell, storage.type.scala, comment.block.documentation.scala keyword, comment.block.documentation.scala variable.parameter, support.function.builtin.go, constant.other.symbol.hashkey.ruby, constant.other.symbol.ruby, source.vala storage.type.generic, constant.other.table-name, constant.other.placeholder, entity.alias.import.go, source.swift keyword.other.declaration-specifier, support.variable.swift, keyword.other.capture-specifier, text.tex support.function.emph, constant.other.math, support.function.textit, entity.name.footnote, entity.name.function.directive.graphql, source.graphql support.type.enum, source.ocaml entity.name.filename, source.reason entity.name.filename, abstract.definition.fsharp keyword, abstract.definition.fsharp entity, function.anonymous keyword, entity.name.record.field.accessor.elm, support.type.builtin, storage.type.built-in, storage.type.primitive, source.python support.type.python, storage.type.core.rust, source.swift support.type, source.go storage.type, storage.type.php, storage.type.function.kotlin, entity.name.type.kotlin, support.type.julia, variable.other.member, keyword.other.import, keyword.package, keyword.import, source.wsd keyword.control.diagram, keyword.language.gherkin.feature.step, source.hlsl storage.type.basic, source.apex keyword.type, sharing.modifier, source.nim storage.type.concrete, meta.preprocessor.pragma.nim, storage.type.integral, entity.name.scope-resolution.function.call, support.class.builtin, comment.block.documentation storage.type.class, source.tf meta.keyword.string, source.tf meta.keyword.number, source.scala entity.name.class, meta.import keyword.control, keyword.control.export, source.vue meta.directive punctuation.separator.key-value, keyword.local.lua, markup.mark.constrained markup.mark, markup.block.open, entity.name.type.primitive, entity.name.type.numeric, source.zig keyword.type, source.zig keyword.storage, source.zig keyword.structure, source.cs keyword.type, storage.type, keyword.control, variable.parameteritalic
markup.quote markup.bold, text.html punctuation.section.embedded, variable.other.c, storage.modifier.lifetime.rust, entity.name.lifetime.rust, source.rust meta.attribute.rust, meta.attribute.id entity.other.attribute-name, source.ocaml punctuation.definition.tag emphasis, source.tf entity.name, markup.quote punctuation.definition, markup.fenced_code punctuation.definition, fenced_code.block.languagebold italic
constant.character#12507B
wush by Jerry Wu - VS Code Theme