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.activeBackground#0A1306
  • activityBar.activeBorder#D9FF77
  • activityBar.background#010201
  • activityBar.border#17340C
  • activityBar.foreground#98FF5F
  • activityBar.inactiveForeground#4C7F37
  • activityBarBadge.background#EDB391
  • activityBarBadge.foreground#001000
  • badge.background#FFE45E
  • badge.foreground#1C1400
  • breadcrumb.activeSelectionForeground#F0FFD9
  • breadcrumb.foreground#A5C66A
  • button.background#2B6F12
  • button.border#FFE45E
  • button.foreground#FBFFF8
  • button.hoverBackground#389618
  • button.secondaryBackground#2C3B19
  • button.secondaryForeground#F4FFE7
  • button.secondaryHoverBackground#3A4D22
  • button.separator#8A7642
  • chart.line#D9FF77
  • charts.blue#B8FF78
  • charts.green#8FFF2A
  • charts.red#FF7272
  • charts.yellow#FFE45E
  • checkbox.background#0C1408
  • checkbox.border#4D8A20
  • checkbox.foreground#FFE45E
  • commandCenter.border#315F18
  • contrastActiveBorder#C7FF63
  • contrastBorder#224313
  • descriptionForeground#9EED91
  • diffEditor.border#224313
  • diffEditor.insertedTextBackground#8FFF2A16
  • diffEditor.removedTextBackground#7B1F1F22
  • disabledForeground#315E2C
  • dropdown.background#0C1408
  • dropdown.border#4D8A20
  • dropdown.foreground#D7F7BF
  • editor.background#000000
  • editor.findMatchBackground#FFE45E33
  • editor.findMatchBorder#FFB84D
  • editor.findMatchHighlightBackground#FFCF661C
  • editor.foreground#CEF0B6
  • editor.hoverHighlightBackground#10170C
  • editor.inactiveSelectionBackground#0E170B
  • editor.lineHighlightBackground#0B1407
  • editor.rangeHighlightBackground#091108
  • editor.selectionBackground#24340F
  • editor.selectionHighlightBackground#1F2C0D
  • editor.wordHighlightBackground#546B1A55
  • editor.wordHighlightStrongBackground#D16C0077
  • editorBracketHighlight.foreground1#71FF48
  • editorBracketHighlight.foreground2#FFE45E
  • editorBracketHighlight.foreground3#D16C00
  • editorBracketMatch.background#13210C
  • editorBracketMatch.border#FFE45E
  • editorBracketPairGuide.activeBackground1#71FF48
  • editorBracketPairGuide.activeBackground2#C7FF63
  • editorBracketPairGuide.activeBackground3#FF7272
  • editorBracketPairGuide.background1#1B3713
  • editorBracketPairGuide.background2#294A17
  • editorBracketPairGuide.background3#3A5E1E
  • editorCursor.foreground#FFF7CF
  • editorError.foreground#FF5C5C
  • editorGroup.border#14290B
  • editorGroup.dropBackground#21411288
  • editorGroupHeader.border#214112
  • editorGroupHeader.noTabsBackground#030502
  • editorGroupHeader.tabsBackground#030502
  • editorGroupHeader.tabsBorder#18350D
  • editorGutter.addedBackground#8FFF2A
  • editorGutter.deletedBackground#7B1F1F
  • editorGutter.modifiedBackground#D16C00
  • editorHint.foreground#9EED91
  • editorHoverWidget.background#0D1609
  • editorHoverWidget.border#5A9D25
  • editorHoverWidget.foreground#EAF8D9
  • editorHoverWidget.highlightForeground#D9FF77
  • editorIndentGuide.activeBackground1#4B911C
  • editorIndentGuide.background1#173015
  • editorInfo.foreground#B3ED91
  • editorLineNumber.activeForeground#4DFF34
  • editorLineNumber.foreground#1C7D1B
  • editorLink.activeForeground#FFFFFA
  • editorMarkerNavigation.background#0A1407
  • editorMarkerNavigationError.background#A83333
  • editorMarkerNavigationInfo.background#5A7D20
  • editorMarkerNavigationWarning.background#D16C00
  • editorOverviewRuler.addedForeground#8FFF2AAA
  • editorOverviewRuler.deletedForeground#A83333AA
  • editorOverviewRuler.modifiedForeground#D16C00AA
  • editorPane.background#010201
  • editorStickyScroll.background#091008
  • editorStickyScrollHover.background#10170C
  • editorSuggestWidget.background#0A1407
  • editorSuggestWidget.border#B17A1E
  • editorSuggestWidget.foreground#D3F5BB
  • editorSuggestWidget.highlightForeground#FFE45E
  • editorSuggestWidget.selectedBackground#13210C
  • editorToolbar.background#030502
  • editorWarning.foreground#FFE45E
  • editorWhitespace.foreground#183016
  • editorWidget.background#0A1407
  • editorWidget.border#B17A1E
  • errorForeground#FF5C5C
  • extensionButton.background#334021
  • extensionButton.foreground#F4FFE7
  • extensionButton.hoverBackground#45572A
  • extensionButton.prominentBackground#2B6F12
  • extensionButton.prominentForeground#FBFFF8
  • extensionButton.prominentHoverBackground#389618
  • extensionButton.separator#8A7642
  • focusBorder#D9FF77CC
  • foreground#D2F7B6
  • gitDecoration.addedResourceForeground#8FFF2A
  • gitDecoration.conflictingResourceForeground#FF8E8E
  • gitDecoration.deletedResourceForeground#FF7272
  • gitDecoration.ignoredResourceForeground#55724A
  • gitDecoration.modifiedResourceForeground#D16C00
  • gitDecoration.untrackedResourceForeground#B8FF78
  • icon.foreground#B2FF86
  • input.background#0C1408
  • input.border#4D8A20
  • input.foreground#ECFFE0
  • input.placeholderForeground#6A8A58
  • inputOption.activeBorder#FFE45E
  • inputValidation.errorBackground#2A1010
  • inputValidation.errorBorder#FF7272
  • inputValidation.infoBackground#10210B
  • inputValidation.infoBorder#A3D65A
  • inputValidation.warningBackground#241A07
  • inputValidation.warningBorder#FFE45E
  • list.activeSelectionBackground#10210B
  • list.activeSelectionForeground#F1FFE8
  • list.dropBackground#183111
  • list.filterMatchBackground#AEFF0033
  • list.filterMatchBorder#D9FF77
  • list.focusOutline#AEFF0077
  • list.highlightForeground#FFE45E
  • list.hoverBackground#10180B
  • list.inactiveSelectionBackground#0B1208
  • list.inactiveSelectionForeground#82D56A
  • listFilterWidget.background#10180B
  • listFilterWidget.noMatchesOutline#A83333
  • listFilterWidget.outline#5A9D25
  • menu.background#0A1407
  • menu.border#2A5E14
  • menu.foreground#CEF2B2
  • menu.selectionBackground#13210C
  • menu.selectionForeground#F7FFF0
  • minimap.background#020301
  • notifications.background#0A1407
  • notifications.border#2A5E14
  • notifications.foreground#DFFF98
  • panel.background#030502
  • panel.border#1D390F
  • panelTitle.activeBorder#FFE45E
  • panelTitle.activeForeground#FFF1A8
  • panelTitle.inactiveForeground#457341
  • peekViewEditor.background#081007
  • peekViewEditor.matchHighlightBackground#FFB84D2A
  • peekViewResult.background#060A05
  • peekViewResult.selectionBackground#13210C
  • peekViewTitle.background#0C1609
  • pickerGroup.border#315F18
  • pickerGroup.foreground#FFE45E
  • problemsErrorIcon.foreground#FF7272
  • problemsInfoIcon.foreground#D9FF77
  • problemsWarningIcon.foreground#FFE45E
  • progressBar.background#FFE45E
  • quickInput.background#0A1407
  • quickInput.foreground#D8F7C0
  • quickInputList.focusBackground#15240D
  • quickInputList.focusForeground#FBFFF8
  • sash.hoverBorder#AEFF00
  • scrollbarSlider.activeBackground#B88A2CAA
  • scrollbarSlider.background#36591F99
  • scrollbarSlider.hoverBackground#5D8E3099
  • selection.background#1B310D
  • settings.checkboxBackground#0C1408
  • settings.checkboxBorder#4D8A20
  • settings.checkboxForeground#E8FF8A
  • settings.dropdownBackground#0C1408
  • settings.dropdownBorder#4D8A20
  • settings.dropdownForeground#D7F7BF
  • settings.headerForeground#FFE45E
  • settings.modifiedItemIndicator#D16C00
  • settings.numberInputBackground#0C1408
  • settings.numberInputBorder#4D8A20
  • settings.numberInputForeground#ECFFE0
  • settings.textInputBackground#0C1408
  • settings.textInputBorder#4D8A20
  • settings.textInputForeground#ECFFE0
  • sideBar.background#030502
  • sideBar.border#12300A
  • sideBar.dropBackground#183111
  • sideBar.foreground#9EDD7B
  • sideBarSectionHeader.background#0A1407
  • sideBarSectionHeader.border#214112
  • sideBarSectionHeader.foreground#DFFF98
  • sideBarStickyScroll.background#071006
  • sideBarStickyScroll.border#214112
  • sideBarTitle.foreground#CFFF9A
  • statusBar.background#091108
  • statusBar.border#1B3D0E
  • statusBar.debuggingBackground#10210B
  • statusBar.debuggingForeground#F6FFF0
  • statusBar.foreground#DFFF98
  • statusBar.noFolderBackground#020402
  • symbolIcon.arrayForeground#B8FF78
  • symbolIcon.booleanForeground#E8FF8A
  • symbolIcon.classForeground#F0FFD9
  • symbolIcon.functionForeground#DFFF98
  • symbolIcon.interfaceForeground#E9FFD1
  • symbolIcon.methodForeground#DFFF98
  • symbolIcon.namespaceForeground#E9FFD1
  • symbolIcon.numberForeground#FFF6B6
  • symbolIcon.objectForeground#D9FF77
  • symbolIcon.stringForeground#FFFFFA
  • symbolIcon.variableForeground#C2EEA0
  • tab.activeBackground#091008
  • tab.activeBorder#FFCF66
  • tab.activeBorderTop#FFE45E
  • tab.activeForeground#F8FFF2
  • tab.border#14300B
  • tab.inactiveBackground#020401
  • tab.inactiveForeground#6D9554
  • tab.unfocusedActiveBackground#000000
  • tab.unfocusedActiveForeground#FFCF66
  • tab.unfocusedInactiveBackground#000000
  • tab.unfocusedInactiveForeground#356133
  • terminal.ansiBlack#020402
  • terminal.ansiBlue#C7FF63
  • terminal.ansiBrightBlack#2E592B
  • terminal.ansiBrightBlue#D7FF9C
  • terminal.ansiBrightCyan#FFF4D0
  • terminal.ansiBrightGreen#85FF63
  • terminal.ansiBrightMagenta#FFCF66
  • terminal.ansiBrightRed#FF8E8E
  • terminal.ansiBrightWhite#FCFFF8
  • terminal.ansiBrightYellow#FFF1A8
  • terminal.ansiCyan#EDB391
  • terminal.ansiGreen#63FF3C
  • terminal.ansiMagenta#FFB84D
  • terminal.ansiRed#FF6767
  • terminal.ansiWhite#F1FFE8
  • terminal.ansiYellow#FFE45E
  • terminal.background#000000
  • terminal.border#214112
  • terminal.foreground#CDEFBC
  • terminal.selectionBackground#1B310D
  • terminal.tab.activeBorder#D9FF77
  • terminalCommandDecoration.defaultBackground#D16C00
  • terminalCommandDecoration.errorBackground#FF7272
  • terminalCommandDecoration.successBackground#8FFF2A
  • terminalCommandGuide.foreground#36591F
  • terminalCursor.background#0A1809
  • terminalCursor.foreground#F7FFF0
  • testing.iconErrored#FF8E8E
  • testing.iconFailed#FF7272
  • testing.iconPassed#8FFF2A
  • testing.iconQueued#FFE45E
  • testing.iconUnset#6D9554
  • textBlockQuote.background#071006
  • textBlockQuote.border#1D5A19
  • textCodeBlock.background#061005
  • textLink.activeForeground#F7FFF0
  • textLink.foreground#AEFF00
  • textPreformat.foreground#FFF1A8
  • titleBar.activeBackground#030502
  • titleBar.activeForeground#DFFF98
  • titleBar.border#1B3D0E
  • titleBar.inactiveBackground#010301
  • titleBar.inactiveForeground#6B8F55
  • walkThrough.embeddedEditorBackground#071006
  • walkthrough.stepTitle.foreground#E8FF8A
  • welcomePage.background#020401
  • welcomePage.progress.background#173015
  • welcomePage.progress.foreground#FFE45E
  • welcomePage.tileBackground#0B1408
  • widget.shadow#FFE45E22
  • window.activeBorder#D9FF77
  • window.inactiveBorder#182115

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#3A812Eitalic
keyword.control, keyword, storage#7BFF57—
storage.type, storage.modifier, keyword.operator.new#AEFF00—
entity.name.type, entity.name.class, entity.name.namespace, support.type, support.class#F0FFD9—
entity.name.function, meta.function-call, variable.function, support.function#FFF18A—
support.function.builtin, support.function.builtin.python#FFCF66—
entity.name.decorator, entity.name.function.decorator, meta.function.decorator#FFB84D—
variable, meta.definition.variable#C2EEA0—
variable.parameter, meta.function.parameters, meta.parameter.object-binding#FFF4D0—
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python, variable.language.this#FFF1A8italic
meta.attribute, entity.other.attribute-name, support.type.property-name, variable.object.property#EDB391—
string, string.quoted, string.interpolated#FFFFF6—
constant.numeric, constant.language.boolean, constant.language.null#FFE45E—
constant.character.escape, constant.other#D16C00—
constant, entity.name.constant, variable.language, support.constant#FFF0C0—
keyword.operator, punctuation.separator, punctuation.accessor, punctuation.terminator.statement#EDB391—
punctuation.section.block.begin, punctuation.section.block.end, punctuation.section.group.begin, punctuation.section.group.end, punctuation.definition.parameters.begin, punctuation.definition.parameters.end#FF8A68—
regexp#FFB84D—
invalid, invalid.illegal#FFF4F4—
markup.heading, markup.heading entity.name#FFF0C0bold
markup.bold#FFFFFAbold
markup.italic#C2EEA0italic
markup.inline.raw, markup.raw#FFE45E—
markup.list, punctuation.definition.list.begin.markdown#AEFF00—
markup.quote#81BC60italic
entity.name.tag, meta.tag.sgml, punctuation.definition.tag#B3ED91—
support.type.property-name.json, meta.object-literal.key, meta.mapping.key#B3ED91—
keyword.other.unit.css, constant.numeric.css, constant.other.color.rgb-value.css#D16C00—
source.sql keyword, keyword.other.DML.sql, keyword.other.sql#AEFF00—
support.function.aggregate.sql, support.function.scalar.sql#FFB84D—
markup.link, string.other.link.title.markdown, string.other.link.description.markdown#9EED91—
Tema Matrix by Chris Kirsch - VS Code Theme