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.activeBorder#0099e1
  • activityBar.background#395063
  • activityBar.dropBackground#ffffff1f
  • activityBar.foreground#d7dae0
  • activityBar.inactiveForeground#fafbfc99
  • activityBarBadge.background#ff7b2e
  • activityBarBadge.foreground#f8fafd
  • badge.background#ff7b2e
  • badge.foreground#333333
  • breadcrumb.activeSelectionForeground#4e4e4e
  • breadcrumb.background#ffffff
  • breadcrumb.focusForeground#4e4e4e
  • breadcrumb.foreground#616161cc
  • breadcrumbPicker.background#f3f3f3
  • button.background#ff7b2e
  • button.foreground#ffffff
  • button.hoverBackground#0062a3
  • debugExceptionWidget.background#f1dfde
  • debugExceptionWidget.border#a31515
  • debugToolBar.background#eeeeee
  • descriptionForeground#717171
  • diffEditor.insertedTextBackground#00809b33
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#ffffff
  • dropdown.border#dddddd
  • dropdown.foreground#383a42
  • dropdown.listBackground#e8e8e8
  • editor.background#ffffff
  • editor.findMatchBackground#f1bfa0
  • editor.findMatchBorder#ff7b2e
  • editor.findMatchHighlightBackground#ea5c0055
  • editor.findRangeHighlightBackground#b4b4b44d
  • editor.focusedStackFrameHighlightBackground#cee7ce73
  • editor.foreground#395063
  • editor.hoverHighlightBackground#add6ff26
  • editor.inactiveSelectionBackground#add6ff60
  • editor.lineHighlightBackground#ffffff
  • editor.lineHighlightBorder#eeeeee
  • editor.rangeHighlightBackground#fdff0033
  • editor.selectionBackground#add6ff90
  • editor.selectionHighlightBackground#add6ff40
  • editor.snippetFinalTabstopHighlightBackground#a0a1a733
  • editor.snippetFinalTabstopHighlightBorder#0a326480
  • editor.snippetTabstopHighlightBackground#0a326433
  • editor.snippetTabstopHighlightBorder#a0a1a7
  • editor.stackFrameHighlightBackground#ffff6673
  • editor.wordHighlightBackground#add6ff40
  • editor.wordHighlightStrongBackground#add6ff40
  • editorBracketMatch.background#0064001a
  • editorBracketMatch.border#b9b9b9
  • editorCodeLens.foreground#999999
  • editorCursor.background#f9f9f9
  • editorCursor.foreground#535353
  • editorError.foreground#c24038
  • editorGroup.border#dddddd
  • editorGroup.dropBackground#2677cb2e
  • editorGroup.emptyBackground#e8e8e8
  • editorGroup.focusedEmptyBorder#0099e1
  • editorGroupHeader.noTabsBackground#ffffff
  • editorGroupHeader.tabsBackground#f5f5f5
  • editorGroupHeader.tabsBorder#e7e7e7
  • editorGutter.addedBackground#81b88b
  • editorGutter.background#ffffff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#ca4b51
  • editorGutter.modifiedBackground#66afe0
  • editorHint.foreground#6c6c6c
  • editorHoverWidget.background#ffffff
  • editorHoverWidget.border#dddddd
  • editorHoverWidget.statusBarBackground#e7e7e7
  • editorIndentGuide.activeBackground#7a82da90
  • editorIndentGuide.background#d9d7d7d2
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#535353
  • editorLineNumber.foreground#cccccc
  • editorLink.activeForeground#0000ff
  • editorMarkerNavigation.background#ffffff
  • editorMarkerNavigationError.background#d60a0a
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#117711
  • editorOverviewRuler.addedForeground#007acc99
  • editorOverviewRuler.border#7f7f7f4d
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#007acc99
  • editorOverviewRuler.errorForeground#ff1212b3
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#007acc99
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#ffffff
  • editorRuler.foreground#abb2bf26
  • editorSuggestWidget.background#ffffff
  • editorSuggestWidget.border#dddddd
  • editorSuggestWidget.foreground#24292e
  • editorSuggestWidget.highlightForeground#0066bf
  • editorSuggestWidget.selectedBackground#f1f1f1
  • editorUnnecessaryCode.opacity#00000077
  • editorWarning.foreground#117711
  • editorWhitespace.foreground#d9d7d7d2
  • editorWidget.background#ffffff
  • editorWidget.border#c8c8c8
  • errorForeground#a1260d
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#007acc66
  • foreground#616161
  • gitDecoration.addedResourceForeground#587c0c
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#ad0707
  • gitDecoration.ignoredResourceForeground#8e8e90
  • gitDecoration.modifiedResourceForeground#895503
  • gitDecoration.submoduleResourceForeground#1258a7
  • gitDecoration.untrackedResourceForeground#007100
  • gitlens.gutterBackgroundColor#0000000c
  • gitlens.gutterForegroundColor#747474
  • gitlens.gutterUncommittedForegroundColor#00bcf299
  • gitlens.lineHighlightBackgroundColor#00bcf233
  • gitlens.lineHighlightOverviewRulerColor#00bcf299
  • gitlens.trailingLineBackgroundColor#ffffff00
  • gitlens.trailingLineForegroundColor#99999959
  • input.background#eeeeee
  • input.border#d5d7d8
  • input.foreground#616161
  • input.placeholderForeground#61616180
  • inputOption.activeBorder#007acc
  • inputValidation.errorBackground#f2dede
  • inputValidation.errorBorder#be1100
  • inputValidation.infoBackground#d6ecf2
  • inputValidation.infoBorder#007acc
  • inputValidation.warningBackground#f6f5d2
  • inputValidation.warningBorder#b89500
  • list.activeSelectionBackground#00000020
  • list.activeSelectionForeground#535353
  • list.dropBackground#d6ebff
  • list.errorForeground#b01011
  • list.focusBackground#00000010
  • list.focusForeground#000000
  • list.highlightForeground#2f6f9f
  • list.hoverBackground#00000010
  • list.inactiveFocusBackground#d8dae6
  • list.inactiveSelectionBackground#00000011
  • list.inactiveSelectionForeground#535353
  • list.invalidItemForeground#b89500
  • list.warningForeground#117711
  • listFilterWidget.background#efc1ad
  • listFilterWidget.noMatchesOutline#be1100
  • listFilterWidget.outline#00000000
  • menu.background#ffffff
  • menu.foreground#616161
  • menu.selectionBackground#f1f1f1
  • menu.selectionForeground#535353
  • menu.separatorBackground#888888
  • menubar.selectionBackground#f1f1f1
  • menubar.selectionForeground#333333
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • minimap.findMatchHighlight#99e5c2c5
  • notificationCenter.border#d5d7d8
  • notificationCenterHeader.background#e7e7e7
  • notificationCenterHeader.foreground#383a42
  • notificationLink.foreground#006ab1
  • notifications.background#f3f3f3
  • notifications.border#e7e7e7
  • notifications.foreground#383a42
  • notificationToast.border#d5d7d8
  • panel.background#f9f9f9
  • panel.border#e4e4e4
  • panel.dropBackground#2677cb2e
  • panelTitle.activeBorder#80808059
  • panelTitle.activeForeground#424242
  • panelTitle.inactiveForeground#424242bf
  • peekView.border#007acc
  • peekViewEditor.background#f2f8fc
  • peekViewEditor.matchHighlightBackground#e2e2e2
  • peekViewEditorGutter.background#f2f8fc
  • peekViewResult.background#f3f3f3
  • peekViewResult.fileForeground#1e1e1e
  • peekViewResult.lineForeground#646465
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#6c6c6c
  • peekViewTitle.background#ffffff
  • peekViewTitleDescription.foreground#6c6c6cb3
  • peekViewTitleLabel.foreground#333333
  • pickerGroup.border#cccedb
  • pickerGroup.foreground#0066bf
  • progressBar.background#0e70c0
  • scrollbar.shadow#dddddd
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566680
  • scrollbarSlider.hoverBackground#5a637580
  • selection.background#d2ecff
  • settings.checkboxBackground#ffffff
  • settings.checkboxBorder#cecece
  • settings.dropdownBackground#ffffff
  • settings.dropdownBorder#cecece
  • settings.dropdownListBorder#c8c8c8
  • settings.headerForeground#444444
  • settings.modifiedItemIndicator#66afe0
  • settings.numberInputBackground#ffffff
  • settings.numberInputForeground#616161
  • settings.textInputBackground#ffffff
  • settings.textInputForeground#616161
  • sideBar.background#f5f5f5
  • sideBar.border#dddddd
  • sideBar.dropBackground#0000001a
  • sideBar.foreground#535353
  • sideBarSectionHeader.background#ececec
  • sideBarSectionHeader.foreground#535353
  • sideBarTitle.foreground#535353
  • statusBar.background#6d6d6d
  • statusBar.border#0099e1
  • statusBar.debuggingBackground#ff7b2e
  • statusBar.debuggingBorder#e1e4e8
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#21252b
  • statusBar.noFolderBorder#e1e4e8
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#575757
  • statusBarItem.hoverBackground#575757
  • statusBarItem.prominentBackground#388a34
  • statusBarItem.prominentHoverBackground#369432
  • statusBarItem.remoteBackground#383a42
  • statusBarItem.remoteForeground#ebebeb
  • tab.activeBackground#ffffff
  • tab.activeBorder#ffffff
  • tab.activeBorderTop#de6f2f
  • tab.activeForeground#333333
  • tab.activeModifiedBorder#de6f2f
  • tab.border#d1d1d1
  • tab.hoverBackground#ffffff
  • tab.inactiveBackground#f9f9f9
  • tab.inactiveForeground#333333b3
  • tab.inactiveModifiedBorder#33aaee80
  • tab.unfocusedActiveBorder#ffffff
  • tab.unfocusedActiveBorderTop#d1d1d1
  • tab.unfocusedActiveForeground#333333b3
  • tab.unfocusedActiveModifiedBorder#d1d1d1
  • tab.unfocusedHoverBackground#ffffffb3
  • tab.unfocusedInactiveForeground#58606980
  • tab.unfocusedInactiveModifiedBorder#d1d1d1
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#0451a5
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#0451a5
  • terminal.ansiBrightCyan#0598bc
  • terminal.ansiBrightGreen#14ce14
  • terminal.ansiBrightMagenta#bc05bc
  • terminal.ansiBrightRed#cd3131
  • terminal.ansiBrightWhite#a5a5a5
  • terminal.ansiBrightYellow#b5ba00
  • terminal.ansiCyan#0598bc
  • terminal.ansiGreen#00bc00
  • terminal.ansiMagenta#bc05bc
  • terminal.ansiRed#cd3131
  • terminal.ansiWhite#555555
  • terminal.ansiYellow#949800
  • terminal.background#e4e4e4
  • terminal.border#80808059
  • terminal.foreground#535353
  • terminal.selectionBackground#00000040
  • terminalCursor.background#e4e4e4
  • terminalCursor.foreground#535353
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#007acc80
  • textCodeBlock.background#dcdcdc66
  • textLink.activeForeground#006ab1
  • textLink.foreground#006ab1
  • textPreformat.foreground#a31515
  • textSeparator.foreground#0000002e
  • titleBar.activeBackground#f5f5f5
  • titleBar.activeForeground#535353
  • titleBar.border#d1d1d1
  • titleBar.inactiveBackground#ececec
  • titleBar.inactiveForeground#6b717d
  • walkThrough.embeddedEditorBackground#e8e8e8
  • welcomePage.buttonBackground#e8e8e8
  • welcomePage.buttonHoverBackground#d2ecff
  • widget.shadow#a8a8a8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment.unused.elixir#383A42
comment, punctuation.definition.comment, comment.block.documentation punctuation.definition, string.comment, comment.block.documentation, comment.block#A0A1A7
comment.block.documentation variable, keyword.other.documentation, storage.type.class.jsdoc, comment.block variable.parameter, keyword.other.phpdoc, comment.block.documentation entity.name.type, meta.other.type.phpdoc support class#727378
punctuation.comma.graphql, punctuation.definition.variable, punctuation.definition.parameters, punctuation.definition.array, punctuation.definition.function, punctuation.brace, punctuation.terminator.statement, punctuation.delimiter.object.comma, punctuation.definition.entity, punctuation.definition, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.separator.key-value, punctuation.separator.dictionary, punctuation.terminator, punctuation.delimiter.comma, punctuation.separator.comma, punctuation.accessor, punctuation.separator.array, punctuation.section, punctuation.section.property-list.begin.bracket.curly, punctuation.section.property-list.end.bracket.curly, punctuation.separator.statement, punctuation.separator.parameter, punctuation.section.array.elixir, punctuation.separator.object.elixir, punctuation.section.embedded.elixir, punctuation.section.function.elixir, punctuation.section.scope.elixir, punctuation.section.embedded, meta.brace.round, meta.brace.square, meta.brace.curly, constant.name.attribute.tag.pug, punctuation.section.embedded, punctuation.separator.method, punctuation.separator, punctuation.other.comma, punctuation.bracket, keyword.control.ternary, string.interpolated.pug, support.function.interpolation.sass, punctuation.parenthesis.begin, punctuation.parenthesis.end, punctuation.operation.graphql, punctuation.colon.graphql#7A82DA
none#383A42
keyword.operator#7A82DA
keyword, keyword.operator.expression, variable.language, keyword.other.special-method.elixir, meta.control.flow#0098DD
variable, source.elixir.embedded.source, string source.groovy, string meta.embedded.line.ruby#383A42
entity.name.function, meta.require, support.function.any-method, meta.function-call, meta.method-call, variable.function#23974A
support.class, entity.name.class, entity.name.type.class, meta.class.instance, meta.class.inheritance, entity.other.inherited-class, entity.name.type, variable.other.constant.elixir, storage.type.haskell, support.type.graphql, support.type.enum.graphql#D52753
keyword.other.special-method#23974A
storage, constant.language#0098DD
support.function#23974A
string, punctuation.definition.string, support.constant.property-value, string.quoted.double.shell, support.function.variable.quoted.single.elixir, storage.type.string#C5A332
constant.numeric, variable.other.anonymous.elixir#CE33C0
none#CE33C0
none#0098DD
constant, variable.other.constant, constant.other.symbol, constant.language.symbol, support.constant, support.variable.magic.python#823FF1
entity.name.tag, punctuation.definition.tag#275FE4
entity.other.attribute-name, string.unquoted.alias.graphql#DF631C
meta.selector#7A82DA
none#CE33C0
markup.heading, punctuation.definition.heading, entity.name.section, markup.heading.setext#C5A332
keyword.other.unit#C5A332
markup.bold, punctuation.definition.bold#D52753bold
markup.italic, punctuation.definition.italic#DF631C
markup.raw.inline#C5A332
string.other.link#275FE4
meta.link#0098DD
beginning.punctuation.definition.list#A05A48
markup.quote#823FF1
meta.separator#383A42
markup.inserted#23974A
markup.deleted#D52753
markup.changed#0098DD
string.regexp#A05A48
constant.character.escape, constant.other.character-class#DF631C
variable.interpolation#0098DD
invalid#FF0000
keyword.operator.new#0098DD
entity.other.attribute-name.id#D52753
meta.function-call.arguments#383A42
meta.object-literal.key, meta.object.member, variable.other.property, variable.other.object.property, support.variable.property, variable.object.property, support.type.property-name, meta.property-name, entity.name.tag.yaml, constant.other.key, constant.other.object.key.js, string.unquoted.label.js, support.type.map.key, variable.graphql#A05A48
markup.inline.raw, markup.fenced_code.block, markup.raw.block#A05A48
markup.underline.link.image#23974A
variable.parameter, parameter.variable.function.elixir, variable.other.block.ruby#40B8C5
support.type.primitive, support.type.builtin#0098DD
string.interpolated.dollar.shell#D52753
string.other.math.shell#275FE4
punctuation.definition.string.begin.shell, punctuation.definition.string.end.shell#7A82DA
comment.rainbow4#A05A48
markup.bold.rainbow9#823FF1
invalid.rainbow10#DF631C
comment#B1B1B1
punctuation.definition.comment#B1B1B1
entity.name.functionitalic
entity.name.tagunderline
variable.language.constructorunderline
entity.name.classunderline
entity.name.typeunderline
comment#B1B1B1
comment.block.documentation#B1B1B1
comment.line.double-slash#B1B1B1
token.info-token#316BCD
token.warn-token#CD9731
token.error-token#CD3131
token.debug-token#800080
Walloco Light Theme by Steven Waller - VS Code Theme