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#E89838
  • activityBar.background#0F0E0C
  • activityBar.border#5C4A28
  • activityBar.foreground#E89838
  • activityBar.inactiveForeground#8A8068
  • activityBarBadge.background#E89838
  • activityBarBadge.foreground#131210
  • badge.background#E89838
  • badge.foreground#131210
  • breadcrumb.activeSelectionForeground#EDE4CC
  • breadcrumb.focusForeground#D4C9A8
  • breadcrumb.foreground#A09680
  • breadcrumbPicker.background#1F1E1A
  • button.background#E89838
  • button.foreground#131210
  • button.hoverBackground#F0B240
  • button.secondaryBackground#3D3830
  • button.secondaryForeground#D4C9A8
  • button.secondaryHoverBackground#4A453C
  • charts.blue#5A7A9E
  • charts.cyan#5CCFBC
  • charts.foreground#D4C9A8
  • charts.green#8DA06E
  • charts.orange#E89838
  • charts.purple#A67A8B
  • charts.red#D45A3A
  • charts.yellow#F0B240
  • descriptionForeground#A09680
  • diffEditor.insertedLineBackground#7A8B5C12
  • diffEditor.insertedTextBackground#7A8B5C20
  • diffEditor.removedLineBackground#D45A3A12
  • diffEditor.removedTextBackground#D45A3A20
  • dropdown.background#222019
  • dropdown.border#5A4D3E
  • dropdown.foreground#D4C9A8
  • dropdown.listBackground#1F1E1A
  • editor.background#1B1A17
  • editor.findMatchBackground#E8A63540
  • editor.findMatchHighlightBackground#E8A63520
  • editor.foreground#E8DFC0
  • editor.inactiveSelectionBackground#D4842A20
  • editor.lineHighlightBackground#22201A
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#D4842A15
  • editor.selectionBackground#2E3D3840
  • editor.selectionHighlightBackground#D4842A25
  • editor.wordHighlightBackground#4DBEAB20
  • editor.wordHighlightStrongBackground#4DBEAB30
  • editorBracketMatch.background#4DBEAB20
  • editorBracketMatch.border#4DBEAB60
  • editorCursor.foreground#E89838
  • editorError.foreground#D45A3A
  • editorGroup.border#5C4A28
  • editorGroup.dropBackground#D4842A30
  • editorGroupHeader.tabsBackground#16150F
  • editorGroupHeader.tabsBorder#5C4A28
  • editorGutter.addedBackground#8DA06E
  • editorGutter.deletedBackground#D45A3A
  • editorGutter.modifiedBackground#F0B240
  • editorHint.foreground#8DA06E
  • editorHoverWidget.background#1F1E1A
  • editorHoverWidget.border#5A4D3E
  • editorIndentGuide.activeBackground1#3D3830
  • editorIndentGuide.background1#2E2B25
  • editorInfo.foreground#5CCFBC
  • editorLineNumber.activeForeground#B0A48A
  • editorLineNumber.foreground#6B6050
  • editorOverviewRuler.addedForeground#8DA06E
  • editorOverviewRuler.border#5C4A28
  • editorOverviewRuler.deletedForeground#D45A3A
  • editorOverviewRuler.errorForeground#D45A3A
  • editorOverviewRuler.findMatchForeground#E8A63560
  • editorOverviewRuler.modifiedForeground#F0B240
  • editorOverviewRuler.selectionHighlightForeground#D4842A60
  • editorOverviewRuler.warningForeground#F0B240
  • editorOverviewRuler.wordHighlightForeground#4DBEAB60
  • editorRuler.foreground#2E2B25
  • editorSuggestWidget.background#1F1E1A
  • editorSuggestWidget.border#5A4D3E
  • editorSuggestWidget.foreground#E8DFC0
  • editorSuggestWidget.highlightForeground#E89838
  • editorSuggestWidget.selectedBackground#2E2B25
  • editorWarning.foreground#F0B240
  • editorWhitespace.foreground#2E2B2540
  • editorWidget.background#1F1E1A
  • editorWidget.border#5A4D3E
  • editorWidget.foreground#E8DFC0
  • errorForeground#D45A3A
  • focusBorder#3D8B7A
  • foreground#E8DFC0
  • gitDecoration.addedResourceForeground#8DA06E
  • gitDecoration.conflictingResourceForeground#E89838
  • gitDecoration.deletedResourceForeground#D45A3A
  • gitDecoration.ignoredResourceForeground#5C5443
  • gitDecoration.modifiedResourceForeground#F0B240
  • gitDecoration.submoduleResourceForeground#8A8068
  • gitDecoration.untrackedResourceForeground#5CCFBC
  • icon.foreground#8A8068
  • input.background#222019
  • input.border#5A4D3E
  • input.foreground#D4C9A8
  • input.placeholderForeground#5C5443
  • inputOption.activeBackground#D4842A30
  • inputOption.activeBorder#E89838
  • inputOption.activeForeground#EDE4CC
  • inputValidation.errorBackground#D45A3A20
  • inputValidation.errorBorder#D45A3A
  • inputValidation.infoBackground#4DBEAB20
  • inputValidation.infoBorder#5CCFBC
  • inputValidation.warningBackground#E8A63520
  • inputValidation.warningBorder#F0B240
  • list.activeSelectionBackground#2A3530
  • list.activeSelectionForeground#F0E8D0
  • list.errorForeground#D45A3A
  • list.focusBackground#2E2B25
  • list.focusForeground#EDE4CC
  • list.highlightForeground#E89838
  • list.hoverBackground#2A2620
  • list.hoverForeground#E8DFC0
  • list.inactiveSelectionBackground#22201A
  • list.inactiveSelectionForeground#E0D5B8
  • list.warningForeground#F0B240
  • listFilterWidget.background#222019
  • listFilterWidget.outline#E89838
  • minimap.findMatchHighlight#E8A63560
  • minimap.selectionHighlight#D4842A60
  • minimapGutter.addedBackground#8DA06E
  • minimapGutter.deletedBackground#D45A3A
  • minimapGutter.modifiedBackground#F0B240
  • notificationCenterHeader.background#222019
  • notificationCenterHeader.foreground#EDE4CC
  • notificationLink.foreground#5CCFBC
  • notifications.background#1F1E1A
  • notifications.border#5A4D3E
  • notifications.foreground#D4C9A8
  • panel.background#1B1A17
  • panel.border#5C4A28
  • panelTitle.activeBorder#E89838
  • panelTitle.activeForeground#F0E8D0
  • panelTitle.inactiveForeground#A09680
  • peekView.border#E89838
  • peekViewEditor.background#1F1E1A
  • peekViewEditor.matchHighlightBackground#E8A63530
  • peekViewResult.background#16150F
  • peekViewResult.fileForeground#EDE4CC
  • peekViewResult.lineForeground#D4C9A8
  • peekViewResult.matchHighlightBackground#E8A63530
  • peekViewResult.selectionBackground#2E2B25
  • peekViewResult.selectionForeground#EDE4CC
  • peekViewTitle.background#222019
  • peekViewTitleDescription.foreground#8A8068
  • peekViewTitleLabel.foreground#EDE4CC
  • progressBar.background#E89838
  • quickInput.background#1F1E1A
  • quickInput.foreground#D4C9A8
  • quickInputList.focusBackground#2E2B25
  • quickInputList.focusForeground#EDE4CC
  • scrollbar.shadow#00000050
  • scrollbarSlider.activeBackground#3D3830B0
  • scrollbarSlider.background#3D383060
  • scrollbarSlider.hoverBackground#3D383090
  • selection.background#D4842A50
  • settings.checkboxBackground#222019
  • settings.checkboxBorder#3D3830
  • settings.dropdownBackground#222019
  • settings.dropdownBorder#3D3830
  • settings.headerForeground#EDE4CC
  • settings.modifiedItemIndicator#E89838
  • settings.numberInputBackground#222019
  • settings.numberInputBorder#3D3830
  • settings.textInputBackground#222019
  • settings.textInputBorder#3D3830
  • sideBar.background#141310
  • sideBar.border#5C4A28
  • sideBar.foreground#E0D5B8
  • sideBarSectionHeader.background#1E1C16
  • sideBarSectionHeader.border#5C4A28
  • sideBarSectionHeader.foreground#E8DFC0
  • sideBarTitle.foreground#F0E8D0
  • statusBar.background#181308
  • statusBar.border#5C4A28
  • statusBar.debuggingBackground#E89838
  • statusBar.debuggingForeground#131210
  • statusBar.foreground#C4A55A
  • statusBar.noFolderBackground#1B1A17
  • statusBar.noFolderForeground#D4C9A8
  • statusBarItem.hoverBackground#2E2510
  • statusBarItem.remoteBackground#5CCFBC
  • statusBarItem.remoteForeground#131210
  • tab.activeBackground#1B1A17
  • tab.activeBorder#E89838
  • tab.activeBorderTop#00000000
  • tab.activeForeground#EDE4CC
  • tab.border#3A3328
  • tab.hoverBackground#1F1E1A
  • tab.inactiveBackground#16150F
  • tab.inactiveForeground#A09680
  • tab.unfocusedActiveForeground#C8B88A
  • tab.unfocusedInactiveForeground#6B6860
  • terminal.ansiBlack#151410
  • terminal.ansiBlue#6B8DB5
  • terminal.ansiBrightBlack#7A7568
  • terminal.ansiBrightBlue#90B0D0
  • terminal.ansiBrightCyan#80E8D5
  • terminal.ansiBrightGreen#B0C890
  • terminal.ansiBrightMagenta#D0AAB8
  • terminal.ansiBrightRed#F08060
  • terminal.ansiBrightWhite#F5F0E0
  • terminal.ansiBrightYellow#F8D060
  • terminal.ansiCyan#5CCFBC
  • terminal.ansiGreen#8FA86E
  • terminal.ansiMagenta#A67A8B
  • terminal.ansiRed#E06848
  • terminal.ansiWhite#E8DFC0
  • terminal.ansiYellow#F0B840
  • terminal.background#151410
  • terminal.border#5C4A28
  • terminal.findMatchBackground#E8A63550
  • terminal.foreground#E8DFC0
  • terminal.selectionBackground#D4842A40
  • terminal.tab.activeBorder#E89838
  • terminalCursor.background#151410
  • terminalCursor.foreground#F0B240
  • textLink.activeForeground#6DD4C2
  • textLink.foreground#5CCFBC
  • titleBar.activeBackground#131210
  • titleBar.activeForeground#D4C9A8
  • titleBar.border#5C4A28
  • titleBar.inactiveBackground#131210
  • titleBar.inactiveForeground#6B6860

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source#E8DFC0
comment, punctuation.definition.comment#6B6860italic
keyword, keyword.control, keyword.control.flow, keyword.control.import, keyword.control.conditional, keyword.control.loop, keyword.control.exception, keyword.control.exception.python, keyword.control.with, keyword.control.with.python, keyword.operator.logical, keyword.operator.logical.python, keyword.operator.wordlike#4DBEAB
storage.type, storage.type.function, storage.type.class, storage.modifier, keyword.other#4DBEAB
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.quoted.multi#7A8B5C
string.quoted.docstring.multi, string.quoted.docstring#7A8B5Citalic
constant.character.escape, constant.character.escape.python#A89040
constant.character.format.placeholder.other.python, meta.format.brace#D4842A
string.regexp, keyword.operator.quantifier.regexp, keyword.control.anchor.regexp, keyword.operator.or.regexp, punctuation.definition.character-class.regexp#A89040
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary, constant.numeric.complex#E8A635
constant.language, constant.language.python#E8A635
variable.other.constant, variable.other.constant.python#D89628
entity.name.function, entity.name.function.python, meta.function entity.name.function#C4A858
meta.function-call.generic, meta.function-call entity.name.function, support.function.call#B89060
support.function.builtin, support.function.builtin.python, support.function.magic.python#C89838
entity.name.function.magic.python, support.function.magic#A89040italic
entity.name.type.class, entity.name.type.class.python, entity.name.class, support.class#D4842A
entity.other.inherited-class, entity.other.inherited-class.python#D4842Aitalic
support.type.exception, support.type.exception.python#D4842A
support.type, support.type.python, meta.function.parameters meta.type, keyword.operator.annotation.python#A88868
variable, variable.other, variable.other.readwrite#C0B898
variable.language.self.python, variable.language.special.self.python, variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python, variable.language.special.cls.python#987550italic
variable.parameter, variable.parameter.function, variable.parameter.function.python#988860
variable.other.property, variable.other.object.property, meta.attribute.python#80A898
entity.name.function.decorator, entity.name.function.decorator.python, meta.function.decorator, meta.function.decorator.python, punctuation.definition.decorator.python#A89040italic
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.bitwise, keyword.operator.unpacking.arguments.python, keyword.operator.unpacking.parameter.python#908478
punctuation.separator, punctuation.terminator, meta.brace, punctuation.definition.list, punctuation.definition.dict, punctuation.section.function, punctuation.section.class#787068
support.type.property-name.json, string.json support.type.property-name#4DBEAB
string.quoted.double.json#7A8B5C
constant.numeric.json, constant.language.json#E8A635
entity.name.tag.yaml, string.unquoted.plain.out.yaml entity.name.tag#4DBEAB
string.unquoted.plain.out.yaml, string.quoted.single.yaml, string.quoted.double.yaml#7A8B5C
entity.name.type.anchor.yaml, variable.other.alias.yaml, punctuation.definition.anchor.yaml, punctuation.definition.alias.yaml#A89040
support.type.property-name.toml, keyword.key.toml#4DBEAB
entity.name.section.group-title.toml#D4842A
markup.heading, entity.name.section.markdown, heading.1.markdown entity.name, heading.2.markdown entity.name, heading.3.markdown entity.name#D4842Abold
markup.bold#EDE4CCbold
markup.italic#A89040italic
markup.inline.raw, markup.raw.inline#7A8B5C
string.other.link, markup.underline.link, markup.underline.link.image#4DBEAB
markup.quote#8A8068italic
beginning.punctuation.definition.list.markdown, punctuation.definition.list.begin.markdown#D4842A
entity.name.tag, entity.name.tag.html, entity.name.tag.xml#D4842A
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.xml#A89040
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#8A8068
keyword.control.js, keyword.control.ts, keyword.control.tsx, keyword.operator.new.js, keyword.operator.new.ts, storage.type.js, storage.type.ts#4DBEAB
entity.name.type.class.js, entity.name.type.class.ts, entity.name.function.js, entity.name.function.ts#C4A858
support.type.property-name.css, source.css support.type#4DBEAB
support.constant.property-value.css, meta.property-value.css#7A8B5C
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.name.tag.css#D4842A
keyword.control.shell, storage.type.function.shell#4DBEAB
variable.other.normal.shell, punctuation.definition.variable.shell#BDA87A
invalid, invalid.deprecated#D45A3Aunderline
tva-dark-color-theme by Thashil Naidoo - VS Code Theme