Skip to main content
Coding Theme

Color themes

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#27fdf5
  • activityBar.background#161616
  • activityBar.border#16161660
  • activityBar.dropBackground#32101580
  • activityBar.foreground#ededed
  • activityBarBadge.background#27fdf5
  • activityBarBadge.foreground#000000
  • badge.background#00000030
  • badge.foreground#7a7979
  • breadcrumb.activeSelectionForeground#27fdf5
  • breadcrumb.background#161616
  • breadcrumb.focusForeground#ededed
  • breadcrumb.foreground#edededcc
  • breadcrumbPicker.background#161616
  • button.background#2b2b2b
  • button.foreground#ededed
  • button.hoverBackground#444444
  • button.secondaryBackground#2b2b2b
  • button.secondaryBorder#16161600
  • button.secondaryForeground#ededed
  • button.secondaryHoverBackground#444444
  • checkbox.border#edededcc
  • debugConsole.errorForeground#ededed
  • debugConsole.infoForeground#f890e7
  • debugConsole.warningForeground#27fdf5
  • debugToolBar.background#161616
  • diffEditor.insertedLineBackground#16f70215
  • diffEditor.insertedTextBackground#16f70210
  • diffEditor.removedLineBackground#f7020210
  • diffEditor.removedTextBackground#f7020215
  • diffEditorGutter.insertedLineBackground#16f70215
  • diffEditorGutter.removedLineBackground#f7020210
  • dropdown.background#161616
  • dropdown.border#ffffff
  • editor.background#161616
  • editor.findMatchBackground#000000
  • editor.findMatchBorder#27fdf5
  • editor.findMatchHighlight#ededed
  • editor.findMatchHighlightBackground#00000050
  • editor.findMatchHighlightBorder#ededed30
  • editor.findRangeHighlightBackground#27fdf5
  • editor.foreground#ededed
  • editor.lineHighlightBackground#00000030
  • editor.lineHighlightBorder#00000000
  • editor.placeholderForeground#edededcc
  • editor.rangeHighlightBackground#ffffff06
  • editor.selectionBackground#ffffff20
  • editor.selectionHighlightBackground#00F0FF20
  • editor.wordHighlightBackground#444444
  • editor.wordHighlightTextBackground#ededed30
  • editorBracketMatch.background#161616
  • editorBracketMatch.border#27fdb9
  • editorCursor.foreground#f890e7
  • editorError.foreground#f70202dd
  • editorGroup.border#00000030
  • editorGroup.dropBackground#32101580
  • editorGroup.focusedEmptyBorder#321015
  • editorGroupHeader.tabsBackground#161616
  • editorGutter.addedBackground#27fdb960
  • editorGutter.deletedBackground#f70202dd
  • editorGutter.modifiedBackground#f890e7
  • editorHoverWidget.background#161616
  • editorHoverWidget.border#444444
  • editorIndentGuide.activeBackground#ffffff06
  • editorIndentGuide.background1#ffffff06
  • editorInfo.foreground#50fff940
  • editorLineNumber.activeForeground#edededcc
  • editorLineNumber.foreground#ededed10
  • editorLink.activeForeground#ededed
  • editorMarkerNavigation.background#ededed10
  • editorOverviewRuler.border#161616
  • editorOverviewRuler.errorForeground#32101540
  • editorOverviewRuler.findMatchForeground#27fdf5
  • editorOverviewRuler.infoForeground#50fff940
  • editorOverviewRuler.warningForeground#27fdf5
  • editorRuler.foreground#ffffff06
  • editorSuggestWidget.background#161616
  • editorSuggestWidget.border#2b2b2b
  • editorSuggestWidget.foreground#ededed
  • editorSuggestWidget.highlightForeground#27fdf5
  • editorSuggestWidget.selectedBackground#00000050
  • editorWarning.foreground#27fdf5
  • editorWhitespace.foreground#ededed30
  • editorWidget.background#161616
  • editorWidget.border#00000000
  • editorWidget.resizeBorder#27fdf5
  • extensionBadge.remoteForeground#ededed
  • extensionButton.prominentBackground#f274dd
  • extensionButton.prominentForeground#ededed
  • extensionButton.prominentHoverBackground#f890e7
  • focusBorder#444444
  • foreground#ededed
  • gitDecoration.conflictingResourceForeground#27fdf5
  • gitDecoration.deletedResourceForeground#321015
  • gitDecoration.ignoredResourceForeground#ededed60
  • gitDecoration.modifiedResourceForeground#27fdf5
  • gitDecoration.untrackedResourceForeground#27fdb9
  • input.background#1c1c1c
  • input.border#2b2b2b
  • input.foreground#ededed
  • input.placeholderForeground#ededed60
  • inputOption.activeBackground#ededed30
  • inputOption.activeBorder#ededed30
  • inputValidation.errorBorder#321015
  • inputValidation.infoBorder#50fff9
  • inputValidation.warningBorder#27fdf5
  • list.activeSelectionBackground#161616
  • list.activeSelectionForeground#27fdf5
  • list.dropBackground#32101580
  • list.focusBackground#ededed30
  • list.focusForeground#ededed
  • list.highlightForeground#27fdf5
  • list.hoverBackground#161616
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#00000030
  • list.inactiveSelectionForeground#27fdf5
  • listFilterWidget.background#00000030
  • listFilterWidget.noMatchesOutline#00000030
  • listFilterWidget.outline#00000030
  • menu.background#161616
  • menu.foreground#ededed
  • menu.selectionBackground#00000050
  • menu.selectionBorder#00000030
  • menu.selectionForeground#27fdf5
  • menu.separatorBackground#ededed
  • menubar.selectionBackground#00000030
  • menubar.selectionBorder#00000030
  • menubar.selectionForeground#27fdf5
  • minimapSlider.activeBackground#ededed30
  • minimapSlider.background#ededed10
  • minimapSlider.hoverBackground#ededed10
  • notebook.focusedCellBorder#27fdf5
  • notebook.inactiveFocusedCellBorder#321015
  • notificationLink.foreground#27fdf5
  • notifications.background#161616
  • notifications.foreground#ededed
  • panel.background#161616
  • panel.border#16161660
  • panel.dropBackground#ededed
  • panelTitle.activeBorder#27fdf5
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#ededed
  • peekView.border#00000030
  • peekViewEditor.background#1c1c1c
  • peekViewEditor.matchHighlightBackground#00F0FF20
  • peekViewEditorGutter.background#1c1c1c
  • peekViewResult.matchHighlightBackground#00F0FF20
  • peekViewResult.selectionBackground#00000030
  • peekViewTitle.background#1c1c1c
  • peekViewTitleDescription.foreground#ededed60
  • pickerGroup.border#ffffff06
  • pickerGroup.foreground#27fdf5
  • progressBar.background#27fdf5
  • quickInput.background#161616
  • quickInput.foreground#edededcc
  • quickInput.list.focusBackground#ededed30
  • quickInputList.focusBackground#00000030
  • quickInputList.focusForeground#ededed
  • sash.hoverBorder#f274dd
  • scrollbar.shadow#00000030
  • scrollbarSlider.activeBackground#27fdf5
  • scrollbarSlider.background#ededed30
  • scrollbarSlider.hoverBackground#ededed10
  • selection.background#00000050
  • settings.checkboxBackground#161616
  • settings.checkboxForeground#ededed
  • settings.dropdownBackground#161616
  • settings.dropdownForeground#ededed
  • settings.headerForeground#27fdf5
  • settings.modifiedItemIndicator#27fdf5
  • settings.numberInputBackground#161616
  • settings.numberInputForeground#ededed
  • settings.textInputBackground#161616
  • settings.textInputForeground#ededed
  • sideBar.background#161616
  • sideBar.border#16161660
  • sideBar.foreground#edededcc
  • sideBarSectionHeader.background#161616
  • sideBarSectionHeader.border#16161660
  • sideBarTitle.foreground#ededed
  • statusBar.background#161616
  • statusBar.debuggingBackground#2b2b2b
  • statusBar.debuggingForeground#ededed60
  • statusBar.foreground#ededed60
  • statusBar.noFolderBackground#161616
  • statusBarItem.activeBackground#161616
  • statusBarItem.hoverBackground#161616
  • statusBarItem.hoverForeground#ededed
  • statusBarItem.remoteBackground#27fdf5
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#161616
  • tab.activeBorder#27fdf5
  • tab.activeForeground#ededed
  • tab.activeModifiedBorder#edededcc
  • tab.border#161616
  • tab.inactiveBackground#161616
  • tab.inactiveForeground#edededcc
  • tab.inactiveModifiedBorder#f274dd
  • tab.unfocusedActiveBorder#7a7979
  • tab.unfocusedActiveForeground#ededed
  • tab.unfocusedActiveModifiedBorder#f274dd
  • tab.unfocusedInactiveModifiedBorder#f274dd
  • terminal.foreground#ededed
  • terminalCommandGuide.foreground#2e2e2e
  • terminalCursor.background#000000
  • terminalCursor.foreground#ededed
  • textBlockQuote.background#00000030
  • textBlockQuote.border#2e2e2e
  • textCodeBlock.background#00000030
  • textLink.activeForeground#ededed
  • textLink.foreground#27fdf5
  • titleBar.activeBackground#161616
  • titleBar.activeForeground#ededed
  • titleBar.border#16161660
  • titleBar.inactiveBackground#161616
  • titleBar.inactiveForeground#edededcc
  • tree.indentGuidesStroke#ffffff06
  • welcomePage.background#161616
  • welcomePage.tileBackground#1c1c1c
  • welcomePage.tileBorder#ffffff
  • welcomePage.tileHoverBackground#2e2e2e
  • widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Main#ededed
string#27fdb9
punctuation, constant.other.symbol#f890e7
constant.character.escape, text.html constant.character.entity.named#ededed
constant.language.boolean#ededed
constant.numeric#f890e7
variable, variable.parameter, support.variable, variable.language, support.constant, meta.definition.variable entity.name.function, meta.function-call.arguments#ededed
keyword.other#f890e7
keyword, modifier, variable.language.this, support.type.object, constant.language#f890e7
entity.name.function, support.function#50fff9
meta.function entity.name.function#50fff9
storage.type, storage.modifier, storage.control#d0d0d0
support.module, support.node#321015italic
support.type, constant.other.key#27fdf5
entity.name.type, entity.other.inherited-class, entity.other#27fdf5
comment#ededed60italic
comment punctuation.definition.comment, string.quoted.docstring#ededed60italic
punctuation#f890e7
entity.name, entity.name.type.class, support.type, support.class, meta.use#27fdf5
variable.object.property, meta.field.declaration entity.name.function#ededed
meta.definition.method entity.name.function#ededed
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#f890e7
meta.embedded, source.groovy.embedded, meta.template.expression#ededed
entity.name.tag.yaml#edededcc
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#ededed
constant.language.json#f890e7
entity.other.attribute-name.class#27fdf5
entity.other.attribute-name.id#f890e7
source.css entity.name.tag#27fdf5
support.type.property-name.css#ededed
meta.tag, punctuation.definition.tag#f890e7
entity.name.tag#f890e7
entity.other.attribute-name#d0d0d0
punctuation.definition.entity.html#ededed
markup.heading#f890e7
text.html.markdown meta.link.inline, meta.link.reference#ededed
text.html.markdown beginning.punctuation.definition.list#f890e7
markup.italic#edededitalic
markup.bold#edededbold
markup.bold markup.italic, markup.italic markup.bold#edededitalic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#27fdb9
markup.inline.raw.string.markdown#27fdb9
keyword.other.definition.ini#ededed
entity.name.section.group-title.ini#f890e7
source.cs meta.class.identifier storage.type#27fdf5
source.cs meta.method.identifier entity.name.function#ededed
source.cs meta.method-call meta.method, source.cs entity.name.function#50fff9
source.cs storage.type#27fdf5
source.cs meta.method.return-type#27fdf5
source.cs meta.preprocessor#7a7979
source.cs entity.name.type.namespace#ededed
meta.jsx.children, SXNested#ededed
support.class.component#27fdf5
source.cpp meta.block variable.other#ededed
source.python meta.member.access.python#ededed
source.python meta.function-call.python, meta.function-call.arguments#50fff9
meta.block#ededed
entity.name.function.call#50fff9
source.php support.other.namespace, source.php meta.use support.class#ededed
constant.keyword#f890e7italic
entity.name.function#50fff9
Global settings#ededed
constant.other.placeholder#ededed
markup.deleted#321015
markup.inserted#27fdb9
markup.underlineunderline
keyword.control#f890e7regular
variable.parameterregular
variable.parameter.function.language.special.self.python#edededitalic
constant.character.format.placeholder.other.python#f890e7
markup.quote#edededitalic
markup.fenced_code.block#ededed
punctuation.definition.quote#ededed
meta.structure.dictionary.json support.type.property-name.json#d0d0d0
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#27fdf5
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f890e7
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#321015
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f890e7
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#50fff9
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#321015
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#d0d0d0
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#27fdb9
EpicenteЯ Theme by churikoff - VS Code Theme