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#86fdc0
  • activityBar.background#0f232e
  • activityBar.border#0f232e60
  • activityBar.dropBackground#32101580
  • activityBar.foreground#ddeecc
  • activityBarBadge.background#86fdc0
  • activityBarBadge.foreground#000000
  • badge.background#00000030
  • badge.foreground#685E79
  • breadcrumb.activeSelectionForeground#86fdc0
  • breadcrumb.background#0f232e
  • breadcrumb.focusForeground#ddeecc
  • breadcrumb.foreground#ddeecccc
  • breadcrumbPicker.background#0f232e
  • button.background#203d4d
  • button.foreground#ddeecc
  • button.hoverBackground#345465
  • button.secondaryBackground#203d4d
  • button.secondaryBorder#0f232e00
  • button.secondaryForeground#ddeecc
  • button.secondaryHoverBackground#345465
  • checkbox.border#ddeecccc
  • debugConsole.errorForeground#ddeecc
  • debugConsole.infoForeground#FE9055
  • debugConsole.warningForeground#86fdc0
  • debugToolBar.background#0f232e
  • diffEditor.insertedLineBackground#16f70225
  • diffEditor.insertedTextBackground#16f70220
  • diffEditor.removedLineBackground#f7020220
  • diffEditor.removedTextBackground#f7020225
  • diffEditorGutter.insertedLineBackground#16f70225
  • diffEditorGutter.removedLineBackground#f7020220
  • dropdown.background#0f232e
  • dropdown.border#ffffff
  • editor.background#0f232e
  • editor.findMatchBackground#000000
  • editor.findMatchBorder#86fdc0
  • editor.findMatchHighlight#ddeecc
  • editor.findMatchHighlightBackground#00000050
  • editor.findMatchHighlightBorder#ddeecc30
  • editor.findRangeHighlightBackground#86fdc0
  • editor.foreground#ddeecc
  • editor.lineHighlightBackground#00000030
  • editor.lineHighlightBorder#00000000
  • editor.placeholderForeground#ddeecccc
  • editor.rangeHighlightBackground#ffffff06
  • editor.selectionBackground#ffffff20
  • editor.selectionHighlightBackground#00F0FF20
  • editor.wordHighlightBackground#345465
  • editor.wordHighlightTextBackground#ddeecc30
  • editorBracketMatch.background#0f232e
  • editorBracketMatch.border#72F1B8
  • editorCursor.foreground#FE9055
  • editorError.foreground#f70202dd
  • editorGroup.border#00000030
  • editorGroup.dropBackground#32101580
  • editorGroup.focusedEmptyBorder#321015
  • editorGroupHeader.tabsBackground#0f232e
  • editorGutter.addedBackground#72F1B860
  • editorGutter.deletedBackground#f70202dd
  • editorGutter.modifiedBackground#FE9055
  • editorHoverWidget.background#0f232e
  • editorHoverWidget.border#345465
  • editorIndentGuide.activeBackground#ffffff06
  • editorIndentGuide.background1#ffffff06
  • editorInfo.foreground#8cddf440
  • editorLineNumber.activeForeground#ddeecccc
  • editorLineNumber.foreground#ddeecc10
  • editorLink.activeForeground#ddeecc
  • editorMarkerNavigation.background#ddeecc10
  • editorOverviewRuler.border#0f232e
  • editorOverviewRuler.errorForeground#32101540
  • editorOverviewRuler.findMatchForeground#86fdc0
  • editorOverviewRuler.infoForeground#8cddf440
  • editorOverviewRuler.warningForeground#86fdc0
  • editorRuler.foreground#ffffff06
  • editorSuggestWidget.background#0f232e
  • editorSuggestWidget.border#203d4d
  • editorSuggestWidget.foreground#ddeecc
  • editorSuggestWidget.highlightForeground#86fdc0
  • editorSuggestWidget.selectedBackground#00000050
  • editorWarning.foreground#86fdc0
  • editorWhitespace.foreground#ddeecc30
  • editorWidget.background#0f232e
  • editorWidget.border#00000000
  • editorWidget.resizeBorder#86fdc0
  • extensionBadge.remoteForeground#ddeecc
  • extensionButton.prominentBackground#c05a60
  • extensionButton.prominentForeground#ddeecc
  • extensionButton.prominentHoverBackground#FE9055
  • focusBorder#345465
  • foreground#ddeecc
  • gitDecoration.conflictingResourceForeground#86fdc0
  • gitDecoration.deletedResourceForeground#321015
  • gitDecoration.ignoredResourceForeground#ddeecc60
  • gitDecoration.modifiedResourceForeground#86fdc0
  • gitDecoration.untrackedResourceForeground#72F1B8
  • input.background#132a36
  • input.border#203d4d
  • input.foreground#ddeecc
  • input.placeholderForeground#ddeecc60
  • inputOption.activeBackground#ddeecc30
  • inputOption.activeBorder#ddeecc30
  • inputValidation.errorBorder#321015
  • inputValidation.infoBorder#8cddf4
  • inputValidation.warningBorder#86fdc0
  • list.activeSelectionBackground#0f232e
  • list.activeSelectionForeground#86fdc0
  • list.dropBackground#32101580
  • list.focusBackground#ddeecc30
  • list.focusForeground#ddeecc
  • list.highlightForeground#86fdc0
  • list.hoverBackground#0f232e
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#00000030
  • list.inactiveSelectionForeground#86fdc0
  • listFilterWidget.background#00000030
  • listFilterWidget.noMatchesOutline#00000030
  • listFilterWidget.outline#00000030
  • menu.background#0f232e
  • menu.foreground#ddeecc
  • menu.selectionBackground#00000050
  • menu.selectionBorder#00000030
  • menu.selectionForeground#86fdc0
  • menu.separatorBackground#ddeecc
  • menubar.selectionBackground#00000030
  • menubar.selectionBorder#00000030
  • menubar.selectionForeground#86fdc0
  • minimapSlider.activeBackground#ddeecc30
  • minimapSlider.background#ddeecc10
  • minimapSlider.hoverBackground#ddeecc10
  • notebook.focusedCellBorder#86fdc0
  • notebook.inactiveFocusedCellBorder#321015
  • notificationLink.foreground#86fdc0
  • notifications.background#0f232e
  • notifications.foreground#ddeecc
  • panel.background#0f232e
  • panel.border#0f232e60
  • panel.dropBackground#ddeecc
  • panelTitle.activeBorder#86fdc0
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#ddeecc
  • peekView.border#00000030
  • peekViewEditor.background#132a36
  • peekViewEditor.matchHighlightBackground#00F0FF20
  • peekViewEditorGutter.background#132a36
  • peekViewResult.matchHighlightBackground#00F0FF20
  • peekViewResult.selectionBackground#00000030
  • peekViewTitle.background#132a36
  • peekViewTitleDescription.foreground#ddeecc60
  • pickerGroup.border#ffffff06
  • pickerGroup.foreground#86fdc0
  • progressBar.background#86fdc0
  • quickInput.background#0f232e
  • quickInput.foreground#ddeecccc
  • quickInput.list.focusBackground#ddeecc30
  • quickInputList.focusBackground#00000030
  • quickInputList.focusForeground#ddeecc
  • sash.hoverBorder#c05a60
  • scrollbar.shadow#00000030
  • scrollbarSlider.activeBackground#86fdc0
  • scrollbarSlider.background#ddeecc30
  • scrollbarSlider.hoverBackground#ddeecc10
  • selection.background#00000050
  • settings.checkboxBackground#0f232e
  • settings.checkboxForeground#ddeecc
  • settings.dropdownBackground#0f232e
  • settings.dropdownForeground#ddeecc
  • settings.headerForeground#86fdc0
  • settings.modifiedItemIndicator#86fdc0
  • settings.numberInputBackground#0f232e
  • settings.numberInputForeground#ddeecc
  • settings.textInputBackground#0f232e
  • settings.textInputForeground#ddeecc
  • sideBar.background#0f232e
  • sideBar.border#0f232e60
  • sideBar.foreground#ddeecccc
  • sideBarSectionHeader.background#0f232e
  • sideBarSectionHeader.border#0f232e60
  • sideBarTitle.foreground#ddeecc
  • statusBar.background#0f232e
  • statusBar.debuggingBackground#203d4d
  • statusBar.debuggingForeground#ddeecc60
  • statusBar.foreground#ddeecc60
  • statusBar.noFolderBackground#0f232e
  • statusBarItem.activeBackground#0f232e
  • statusBarItem.hoverBackground#0f232e
  • statusBarItem.hoverForeground#ddeecc
  • statusBarItem.remoteBackground#86fdc0
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#0f232e
  • tab.activeBorder#86fdc0
  • tab.activeForeground#ddeecc
  • tab.activeModifiedBorder#ddeecccc
  • tab.border#0f232e
  • tab.inactiveBackground#0f232e
  • tab.inactiveForeground#ddeecccc
  • tab.inactiveModifiedBorder#c05a60
  • tab.unfocusedActiveBorder#685E79
  • tab.unfocusedActiveForeground#ddeecc
  • tab.unfocusedActiveModifiedBorder#c05a60
  • tab.unfocusedInactiveModifiedBorder#c05a60
  • terminal.foreground#ddeecc
  • terminalCommandGuide.foreground#26485b
  • terminalCursor.background#000000
  • terminalCursor.foreground#ddeecc
  • textBlockQuote.background#00000030
  • textBlockQuote.border#26485b
  • textCodeBlock.background#00000030
  • textLink.activeForeground#ddeecc
  • textLink.foreground#86fdc0
  • titleBar.activeBackground#0f232e
  • titleBar.activeForeground#ddeecc
  • titleBar.border#0f232e60
  • titleBar.inactiveBackground#0f232e
  • titleBar.inactiveForeground#ddeecccc
  • tree.indentGuidesStroke#ffffff06
  • welcomePage.background#0f232e
  • welcomePage.tileBackground#132a36
  • welcomePage.tileBorder#ffffff
  • welcomePage.tileHoverBackground#26485b
  • widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Main#ddeecc
string#72F1B8
punctuation, constant.other.symbol#FE9055
constant.character.escape, text.html constant.character.entity.named#ddeecc
constant.language.boolean#ddeecc
constant.numeric#FE9055
variable, variable.parameter, support.variable, variable.language, support.constant, meta.definition.variable entity.name.function, meta.function-call.arguments#ddeecc
keyword.other#FE9055
keyword, modifier, variable.language.this, support.type.object, constant.language#FE9055
entity.name.function, support.function#8cddf4
meta.function entity.name.function#8cddf4
storage.type, storage.modifier, storage.control#d7a6f8
support.module, support.node#321015italic
support.type, constant.other.key#86fdc0
entity.name.type, entity.other.inherited-class, entity.other#86fdc0
comment#ddeecc60italic
comment punctuation.definition.comment, string.quoted.docstring#ddeecc60italic
punctuation#FE9055
entity.name, entity.name.type.class, support.type, support.class, meta.use#86fdc0
variable.object.property, meta.field.declaration entity.name.function#ddeecc
meta.definition.method entity.name.function#ddeecc
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#FE9055
meta.embedded, source.groovy.embedded, meta.template.expression#ddeecc
entity.name.tag.yaml#ddeecccc
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#ddeecc
constant.language.json#FE9055
entity.other.attribute-name.class#86fdc0
entity.other.attribute-name.id#FE9055
source.css entity.name.tag#86fdc0
support.type.property-name.css#ddeecc
meta.tag, punctuation.definition.tag#FE9055
entity.name.tag#FE9055
entity.other.attribute-name#d7a6f8
punctuation.definition.entity.html#ddeecc
markup.heading#FE9055
text.html.markdown meta.link.inline, meta.link.reference#ddeecc
text.html.markdown beginning.punctuation.definition.list#FE9055
markup.italic#ddeeccitalic
markup.bold#ddeeccbold
markup.bold markup.italic, markup.italic markup.bold#ddeeccitalic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#72F1B8
markup.inline.raw.string.markdown#72F1B8
keyword.other.definition.ini#ddeecc
entity.name.section.group-title.ini#FE9055
source.cs meta.class.identifier storage.type#86fdc0
source.cs meta.method.identifier entity.name.function#ddeecc
source.cs meta.method-call meta.method, source.cs entity.name.function#8cddf4
source.cs storage.type#86fdc0
source.cs meta.method.return-type#86fdc0
source.cs meta.preprocessor#685E79
source.cs entity.name.type.namespace#ddeecc
meta.jsx.children, SXNested#ddeecc
support.class.component#86fdc0
source.cpp meta.block variable.other#ddeecc
source.python meta.member.access.python#ddeecc
source.python meta.function-call.python, meta.function-call.arguments#8cddf4
meta.block#ddeecc
entity.name.function.call#8cddf4
source.php support.other.namespace, source.php meta.use support.class#ddeecc
constant.keyword#FE9055italic
entity.name.function#8cddf4
Global settings#ddeecc
constant.other.placeholder#ddeecc
markup.deleted#321015
markup.inserted#72F1B8
markup.underlineunderline
keyword.control#FE9055regular
variable.parameterregular
variable.parameter.function.language.special.self.python#ddeeccitalic
constant.character.format.placeholder.other.python#FE9055
markup.quote#ddeeccitalic
markup.fenced_code.block#ddeecc
punctuation.definition.quote#ddeecc
meta.structure.dictionary.json support.type.property-name.json#d7a6f8
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#86fdc0
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#FE9055
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#FE9055
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#8cddf4
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#d7a6f8
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#72F1B8
EpicenteЯ Theme by churikoff - VS Code Theme