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#000000
  • activityBar.border#000000
  • activityBar.foreground#18C09E
  • activityBar.inactiveForeground#506070
  • activityBarBadge.background#ff5370
  • activityBarBadge.foreground#f2f2f2
  • badge.background#ff5370
  • badge.foreground#f2f2f2
  • breadcrumb.activeSelectionForeground#87711f
  • breadcrumb.focusForeground#cfdd2f
  • breadcrumb.foreground#646b76
  • contrastBorder#49463f
  • descriptionForeground#c7e1f9
  • editor.background#262f3d
  • editor.findMatchBackground#d83030
  • editor.findMatchHighlightBackground#707004
  • editor.foreground#cbc5be
  • editor.lineHighlightBackground#391426
  • editor.selectionBackground#006b596d
  • editor.selectionHighlightBackground#00ffff38
  • editorBracketMatch.border#ffffff
  • editorCodeLens.foreground#94b6a1
  • editorCursor.foreground#59ff00
  • editorError.border#2d323b
  • editorError.foreground#dd518c
  • editorGroup.border#211111
  • editorGroup.dropBackground#191d1c
  • editorGroupHeader.noTabsBackground#2e1d1d
  • editorGroupHeader.tabsBackground#2e1d1d
  • editorGroupHeader.tabsBorder#2e1d1d
  • editorGutter.addedBackground#46c489
  • editorGutter.deletedBackground#c44646
  • editorGutter.modifiedBackground#901872
  • editorHoverWidget.background#112823
  • editorHoverWidget.border#112823
  • editorLineNumber.activeForeground#c86100
  • editorLineNumber.foreground#506070
  • editorLink.activeForeground#01e796
  • editorMarkerNavigation.background#686868
  • editorMarkerNavigationError.background#64386c
  • editorMarkerNavigationWarning.background#e52712
  • editorSuggestWidget.background#202524
  • editorSuggestWidget.border#1d2026
  • editorSuggestWidget.foreground#B3C8DC
  • editorSuggestWidget.highlightForeground#37c2b6
  • editorSuggestWidget.selectedBackground#28323a
  • editorWarning.border#ffffff00
  • editorWarning.foreground#d6af78
  • editorWidget.background#202524
  • editorWidget.border#000000
  • errorForeground#dd518c
  • extensionButton.prominentBackground#509DDB
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#509DDB
  • focusBorder#509ddb
  • foreground#dcb3b3
  • gitDecoration.ignoredResourceForeground#9883b9
  • gitDecoration.modifiedResourceForeground#509ddb
  • gitDecoration.untrackedResourceForeground#37c2b6
  • input.background#252931
  • input.border#596477
  • input.foreground#509ddb
  • input.placeholderForeground#596477
  • inputOption.activeBorder#596477
  • inputValidation.errorBackground#dd518c
  • inputValidation.errorBorder#dd518c
  • inputValidation.errorForeground#121316
  • inputValidation.infoBackground#5ec4ff
  • inputValidation.infoBorder#539afc
  • inputValidation.infoForeground#121316
  • inputValidation.warningBackground#d6af78
  • inputValidation.warningBorder#d98e48
  • inputValidation.warningForeground#121316
  • list.activeSelectionBackground#2d323b
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#2d323b
  • list.errorForeground#f46161
  • list.focusBackground#211111
  • list.focusForeground#ffffff
  • list.highlightForeground#37c2b6
  • list.hoverBackground#3572ac
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#2d323b
  • list.inactiveSelectionForeground#ffffff
  • menu.background#191d1c
  • menu.border#506070
  • menu.foreground#c8c8c8
  • menu.selectionBackground#1f0d00
  • menu.selectionForeground#51b778
  • menubar.selectionBackground#1e3929
  • menubar.selectionForeground#18C09E
  • minimap.background#211111
  • panel.background#262f3d
  • panel.border#000000
  • panelTitle.activeBorder#c86100
  • panelTitle.activeForeground#CBC5BE
  • panelTitle.inactiveForeground#A29285
  • pickerGroup.border#112823
  • pickerGroup.foreground#CBC5BE
  • progressBar.background#18A1C0
  • scrollbar.shadow#374963
  • scrollbarSlider.activeBackground#069b7b
  • scrollbarSlider.background#006b596d
  • scrollbarSlider.hoverBackground#006347
  • selection.background#509cdb6e
  • sideBar.background#191d1c
  • sideBar.border#000000
  • sideBar.foreground#71889e
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#000000
  • sideBarSectionHeader.foreground#778fa6
  • sideBarTitle.foreground#a5c3ff
  • statusBar.background#1e1e22
  • statusBar.border#818181
  • statusBar.debuggingBackground#3F7EB3
  • statusBar.debuggingForeground#CBC5BE
  • statusBar.foreground#CBC5BE
  • tab.activeBackground#211111
  • tab.activeForeground#18C09E
  • tab.border#000000
  • tab.inactiveBackground#2e1d1d
  • tab.inactiveForeground#71889e
  • terminal.background#1e1e1e
  • terminal.foreground#c7e1f9
  • terminalCursor.foreground#ffff00
  • titleBar.activeBackground#211111
  • titleBar.activeForeground#71889e
  • titleBar.border#000000
  • titleBar.inactiveBackground#050505
  • titleBar.inactiveForeground#506070
  • walkThrough.embeddedEditorBackground#1d2026

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.other.inherited-class, variable.language, variable.language.this, variable.language.super, meta.var.expr, constant.language—italic
support.function.—bold
entity.other.attribute-name.id.css, storage.type.modifier.access, keyword.control.new.java, entity.name.type.class.java, entity.name.function.js, entity.name.type.class.js, entity.name.function.python, entity.name.type.class.python#18c09e—
support.type.property-name.css, variable.other.property.js, entity.name.function.call.initializer.cpp, variable.other.property.cpp, meta.block.cpp, variable.object.c, variable.other.member.c, meta.block.c, meta.function-call.c, variable.other.object.property.java, variable.other.definition.java, meta.function-call.generic.python, meta.attribute.python#FF9562—
support.constant.property-value.css, storage.type.js, variable.language, storage.type.primitive, storage.type.built-in.primitive, storage.type.built-in.primitive.cpp, storage.type.java, storage.type.object.array.java, support.function.builtin.python, variable.other.readwrite#FF5370—
storage.type.class.python, storage.type.function.python, storage.type.struct.c#9e0c4c—
meta.parens.cpp#CBC5BE—
string, comment#a29285—
keyword.control.at-rule, keyword.other, variable.other.object.js, entity.name.function.c, meta.body.function.definition.cpp, meta.body.class.cpp, variable.other.object.java, support.function.builtin.python, variable.other.readwrite.js#18a1c0—
constant.numeric#3f7eb3—
keyword.operator, punctuation.separator#85B56D—
constant.language#13990e—
entity.other.attribute-name, keyword.control.flow, keyword.control.java, keyword.control.while.cpp, keyword.control.for.cpp, keyword.control.c, keyword.control.return, keyword.control.try.cpp, keyword.control.try.java, keyword.control.catch.java, keyword.control.loop.js, keyword.control.trycatch.js#C285C0bold
entity.name.function.constructor.cpp, meta.head.function.definition.cpp, variable.other.object.access.c, entity.name.function.java, keyword.other.import.java, support.type.python#c9118f—
storage.modifier.java, storage.type.function, storage.type.class, keyword.control.import, keyword.control.directive, entity.name.function.member.cpp, entity.name.function.call.cpp#2f978d—
string.quoted.other, entity.name.tag, support.function.magic.python#9e990c—
entity.name.scope-resolution.parameter.cpp, entity.name.scope-resolution.cpp#bdcc4b—
Chocolate Chip by Codev - VS Code Theme