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#4DD6C3
  • activityBar.background#0A0F0C
  • activityBar.border#1B2A22
  • activityBar.foreground#8792A2
  • activityBarBadge.background#4DD6C3
  • activityBarBadge.foreground#050706
  • badge.background#4DD6C3
  • badge.foreground#050706
  • button.background#111A15
  • button.foreground#DDE5EE
  • debugIcon.breakpointCurrentStackframeForeground#74D66A
  • debugIcon.breakpointDisabledForeground#8792A2
  • debugIcon.breakpointForeground#FF6B6B
  • debugIcon.breakpointStackframeForeground#74D66A
  • debugIcon.breakpointUnverifiedForeground#8792A2
  • debugIcon.continueForeground#FF6B6B
  • debugIcon.disconnectForeground#FF6B6B
  • debugIcon.pauseForeground#FF6B6B
  • debugIcon.restartForeground#74D66A
  • debugIcon.startForeground#74D66A
  • debugIcon.stepBackForeground#FF6B6B
  • debugIcon.stepIntoForeground#FF6B6B
  • debugIcon.stepOutForeground#FF6B6B
  • debugIcon.stepOverForeground#FF6B6B
  • debugIcon.stopForeground#74D66A
  • diffEditor.insertedTextBackground#74D66A22
  • diffEditor.insertedTextBorder#74D66A44
  • diffEditor.removedTextBackground#FF6B6B22
  • diffEditor.removedTextBorder#FF6B6B44
  • editor.background#050706
  • editor.foreground#DDE5EE
  • editor.lineHighlightBackground#111A15
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#1F3A2E
  • editorBracketMatch.background#1B2A2266
  • editorBracketMatch.border#4DD6C3
  • editorCursor.foreground#F8FAFC
  • editorGroupHeader.tabsBackground#0A0F0C
  • editorGroupHeader.tabsBorder#1B2A22
  • editorIndentGuide.activeBackground#4DD6C3
  • editorIndentGuide.background#343D4B
  • editorLineNumber.activeForeground#4DD6C3
  • editorLineNumber.foreground#343D4B
  • editorSuggestWidget.background#0A0F0C
  • editorSuggestWidget.border#1B2A22
  • editorSuggestWidget.selectedBackground#1F3A2E
  • editorSuggestWidget.selectedForeground#F8FAFC
  • editorWhitespace.foreground#343D4B
  • focusBorder#4DD6C3
  • foreground#DDE5EE
  • input.background#0A0F0C
  • input.border#1B2A22
  • input.foreground#DDE5EE
  • inputOption.activeBackground#4DD6C3
  • inputOption.activeBorder#4DD6C3
  • inputOption.activeForeground#050706
  • list.activeSelectionBackground#1F3A2E
  • list.activeSelectionForeground#F8FAFC
  • list.focusBackground#1F3A2E
  • list.highlightForeground#DDE5EE
  • list.hoverBackground#1F3A2E
  • list.hoverForeground#DDE5EE
  • list.inactiveSelectionBackground#1F3A2E
  • list.inactiveSelectionForeground#F8FAFC
  • panel.background#0A0F0C
  • panel.border#1B2A22
  • panelTitle.activeBorder#4DD6C3
  • panelTitle.activeForeground#DDE5EE
  • panelTitle.inactiveForeground#8792A2
  • peekView.border#4DD6C3
  • peekViewEditor.background#0A0F0C
  • peekViewEditorGutter.background#050706
  • peekViewResult.background#0A0F0C
  • peekViewResult.selectionBackground#1F3A2E
  • peekViewResult.selectionForeground#F8FAFC
  • peekViewTitle.background#1F3A2E
  • peekViewTitleDescription.foreground#8792A2
  • peekViewTitleLabel.foreground#DDE5EE
  • pickerGroup.border#4DD6C3
  • pickerGroup.foreground#DDE5EE
  • progressBar.background#4DD6C3
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#4DD6C3
  • scrollbarSlider.background#1B2A2280
  • scrollbarSlider.hoverBackground#4DD6C3AA
  • sideBar.background#0A0F0C
  • sideBar.border#1B2A22
  • sideBar.foreground#DDE5EE
  • sideBarSectionHeader.background#0A0F0C
  • sideBarSectionHeader.border#1B2A22
  • sideBarSectionHeader.foreground#DDE5EE
  • statusBar.background#0A0F0C
  • statusBar.debuggingBackground#1F3A2E
  • statusBar.foreground#DDE5EE
  • statusBar.noFolderBackground#0A0F0C
  • statusBarItem.errorBackground#FF6B6B
  • statusBarItem.errorForeground#050706
  • statusBarItem.prominentBackground#4DD6C3
  • statusBarItem.prominentForeground#050706
  • statusBarItem.remoteBackground#0A0F0C
  • statusBarItem.remoteForeground#DDE5EE
  • tab.activeBorder#4DD6C3
  • tab.activeForeground#4DD6C3
  • tab.border#1B2A22
  • tab.inactiveBackground#050706
  • tab.inactiveForeground#8792A2
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#7EA6FF
  • terminal.ansiBrightBlack#7A8494
  • terminal.ansiBrightBlue#7EA6FF
  • terminal.ansiBrightCyan#4DD6C3
  • terminal.ansiBrightGreen#74D66A
  • terminal.ansiBrightMagenta#C792EA
  • terminal.ansiBrightRed#FF6B6B
  • terminal.ansiBrightWhite#F8FAFC
  • terminal.ansiBrightYellow#FFD166
  • terminal.ansiCyan#4DD6C3
  • terminal.ansiGreen#74D66A
  • terminal.ansiMagenta#C792EA
  • terminal.ansiRed#FF6B6B
  • terminal.ansiWhite#DDE5EE
  • terminal.ansiYellow#FFD166
  • terminal.foreground#DDE5EE
  • terminal.inactiveBackground#050706
  • textLink.activeForeground#4DD6C3
  • textLink.foreground#A6D88A
  • titleBar.activeBackground#0A0F0C
  • titleBar.activeForeground#DDE5EE
  • titleBar.background#050706
  • titleBar.border#00000000
  • titleBar.inactiveForeground#8792A2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, string.quoted.docstring.multi#6F7A89italic
constant, constant.language, constant.character, constant.other#7EA6FF—
keyword, storage, storage.type#FF5C8A—
entity.name.function, support.function, meta.function-call#4DD6C3—
variable.other.property, meta.property-name#7CF9B8—
string, markup.inline#A6D88A—
constant.numeric, number#C792EA—
storage.type, entity.name.type, support.class, entity.other.inherited-class#FFB86C—
entity.name.class#D2FF72—
markup.error#FF6B6B—
markup.warning#FFD166—
markup.inserted#74D66A—
support.class.component.jsx, support.class.component.tsx, entity.name.tag.jsx, entity.name.tag.tsx#D2FF72—
entity.name.tag.html.jsx, entity.name.tag.html.tsx, punctuation.definition.tag.jsx, punctuation.definition.tag.tsx#FFB86C—
entity.other.attribute-name.jsx, entity.other.attribute-name.tsx#7CF9B8—
punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx#F8FAFC—
entity.name.type.ts, entity.name.type.tsx, support.type.primitive.ts, support.type.primitive.tsx#FFB86C—
entity.name.type.interface.ts, entity.name.type.interface.tsx#4DD6C3—
punctuation.definition.typeparameters.begin.ts, punctuation.definition.typeparameters.end.ts, punctuation.definition.typeparameters.begin.tsx, punctuation.definition.typeparameters.end.tsx#C792EA—
string.template, punctuation.definition.string.template.begin, punctuation.definition.string.template.end#A6D88A—
meta.template.expression, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#F8FAFC—
storage.type.function.arrow#FF5C8A—
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#FF5C8A—
variable.other.readwrite.alias, meta.import string.quoted#A6D88A—
meta.method.declaration entity.name.function, meta.object-literal.key#4DD6C3—
meta.object-binding-pattern-variable variable.other.readwrite, meta.array-binding-pattern-variable variable.other.readwrite#7CF9B8—
keyword.operator.spread#FF5C8A—
meta.function-call entity.name.function#4DD6C3—
punctuation.decorator, meta.decorator#C792EA—
source.css.styled, meta.template.expression.css#A6D88A—
vsc-eezzy-nvim Themes by ASHISH JHA - VS Code Theme