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#022B3A
  • activityBar.border#022B3A60
  • activityBar.foreground#F0F3BD
  • activityBarBadge.background#A7F6E3
  • activityBarBadge.foreground#022B3A
  • badge.background#022B3A30
  • badge.foreground#66D9E8
  • breadcrumb.activeSelectionForeground#66D9E8
  • breadcrumb.background#022B3A
  • breadcrumb.focusForeground#F0F3BD
  • breadcrumb.foreground#00A896
  • breadcrumbPicker.background#022B3A
  • button.background#66D9E850
  • contrastBorder#66D9E840
  • debugToolBar.background#022B3A
  • diffEditor.insertedTextBackground#D97C0B15
  • diffEditor.removedTextBackground#F0F3BD20
  • dropdown.background#022B3A
  • dropdown.border#FFFFFF10
  • editor.background#022B3A
  • editor.findMatchBackground#022B3A
  • editor.findMatchBorder#66D9E8
  • editor.findMatchHighlightBackground#66D9E893
  • editor.findMatchHighlightBorder#FFFFFF30
  • editor.foreground#F0F3BD
  • editor.lineHighlightBackground#022B3A50
  • editor.selectionBackground#A7F6E330
  • editor.selectionHighlightBackground#66D9E86b
  • editor.selectionHighlightBorder#A7F6E3f0
  • editorBracketMatch.background#022B3A
  • editorBracketMatch.border#FFA62B7f
  • editorCursor.foreground#FFA62B
  • editorError.foreground#D97C0Baa
  • editorGroup.border#022B3A30
  • editorGroupHeader.tabsBackground#022B3A
  • editorGutter.addedBackground#D97C0B60
  • editorGutter.deletedBackground#F0F3BD60
  • editorGutter.modifiedBackground#A7F6E360
  • editorHoverWidget.background#022B3A
  • editorHoverWidget.border#FFFFFF10
  • editorIndentGuide.activeBackground1#05668D
  • editorIndentGuide.background1#05668D70
  • editorInfo.foreground#A7F6E370
  • editorLineNumber.activeForeground#A7F6E3
  • editorLineNumber.foreground#66D9E8c0
  • editorLink.activeForeground#F0F3BD
  • editorMarkerNavigation.background#F0F3BD05
  • editorOverviewRuler.border#022B3A
  • editorOverviewRuler.errorForeground#F0F3BD40
  • editorOverviewRuler.findMatchForeground#66D9E8
  • editorOverviewRuler.infoForeground#A7F6E340
  • editorOverviewRuler.warningForeground#FFA62B70
  • editorRuler.foreground#05668D
  • editorSuggestWidget.background#022B3A
  • editorSuggestWidget.border#FFFFFF10
  • editorSuggestWidget.foreground#F0F3BD
  • editorSuggestWidget.highlightForeground#FFA62B
  • editorSuggestWidget.selectedBackground#A7F6E330
  • editorWarning.foreground#D97C0B
  • editorWhitespace.foreground#F0F3BD40
  • editorWidget.background#022B3A
  • editorWidget.border#FFA62B
  • editorWidget.resizeBorder#66D9E8
  • extensionButton.prominentBackground#D97C0B90
  • extensionButton.prominentHoverBackground#F0F3BD
  • focusBorder#FFFFFF00
  • gitDecoration.conflictingResourceForeground#FFA62B
  • gitDecoration.deletedResourceForeground#F0F3BD
  • gitDecoration.ignoredResourceForeground#66D9E8
  • gitDecoration.modifiedResourceForeground#00A896
  • gitDecoration.untrackedResourceForeground#A7F6E3
  • input.background#033E4D
  • input.border#FFFFFF10
  • input.foreground#F0F3BD
  • input.placeholderForeground#F0F3BD60
  • inputOption.activeBackground#F0F3BD30
  • inputOption.activeBorder#F0F3BD30
  • inputValidation.errorBorder#F0F3BD50
  • inputValidation.infoBorder#A7F6E350
  • inputValidation.warningBorder#FFA62B50
  • list.activeSelectionBackground#022B3A
  • list.activeSelectionForeground#66D9E8
  • list.focusBackground#033E4D
  • list.focusForeground#A7F6E3
  • list.highlightForeground#66D9E8
  • list.hoverBackground#05668D
  • list.hoverForeground#F0F3BD
  • list.inactiveSelectionBackground#022B3A30
  • list.inactiveSelectionForeground#66D9E8
  • list.warningForeground#FFA62B
  • listFilterWidget.background#022B3A30
  • listFilterWidget.noMatchesOutline#022B3A30
  • listFilterWidget.outline#022B3A30
  • menu.background#022B3Af8
  • menu.border#66D9E850
  • menu.foreground#F0F3BD
  • menu.selectionBackground#033E4D
  • menu.selectionBorder#022B3A30
  • menu.selectionForeground#F0F3BD
  • menu.separatorBackground#F0F3BD
  • menubar.selectionBackground#033E4D
  • menubar.selectionBorder#66D9E850
  • menubar.selectionForeground#F0F3BD
  • minimap.background#022B3A
  • minimapGutter.addedBackground#F0F3BD
  • minimapGutter.deletedBackground#FFA62B
  • minimapGutter.modifiedBackground#D97C0B
  • minimapSlider.activeBackground#D97C0Bb0
  • minimapSlider.background#D97C0B80
  • minimapSlider.hoverBackground#D97C0Ba0
  • notificationLink.foreground#66D9E8
  • notifications.background#022B3A
  • notifications.foreground#F0F3BD
  • panel.background#022B3A
  • panel.border#022B3A60
  • panelTitle.activeBorder#66D9E8
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#F0F3BD
  • peekView.border#022B3A30
  • peekViewEditor.background#F0F3BD05
  • peekViewEditor.matchHighlightBackground#66D9E850
  • peekViewEditorGutter.background#F0F3BD05
  • peekViewResult.background#F0F3BD05
  • peekViewResult.matchHighlightBackground#66D9E850
  • peekViewResult.selectionBackground#66D9E870
  • peekViewTitle.background#F0F3BD05
  • peekViewTitleDescription.foreground#F0F3BD60
  • pickerGroup.foreground#66D9E8
  • progressBar.background#66D9E8
  • scrollbar.shadow#022B3A00
  • scrollbarSlider.activeBackground#66D9E8cc
  • scrollbarSlider.background#66D9E8bb
  • scrollbarSlider.hoverBackground#66D9E8ee
  • selection.background#66D9E8
  • settings.checkboxBackground#022B3A
  • settings.checkboxForeground#F0F3BD
  • settings.dropdownBackground#022B3A
  • settings.dropdownForeground#F0F3BD
  • settings.headerForeground#66D9E8
  • settings.modifiedItemIndicator#66D9E8
  • settings.numberInputBackground#022B3A
  • settings.numberInputForeground#F0F3BD
  • settings.textInputBackground#022B3A
  • settings.textInputForeground#F0F3BD
  • sideBar.background#011F29
  • sideBar.border#66D9E830
  • sideBar.foreground#A7F6E3
  • sideBarSectionHeader.background#011F29
  • sideBarSectionHeader.border#022B3A60
  • sideBarSectionHeader.foreground#A7F6E3
  • sideBarTitle.foreground#F0F3BD
  • statusBar.background#66D9E8
  • statusBar.border#022B3A60
  • statusBar.debuggingBackground#FFA62B
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#F0F3BD
  • statusBar.noFolderBackground#022B3A
  • statusBarItem.hoverBackground#66D9E820
  • statusBarItem.remoteBackground#66D9E8
  • statusBarItem.remoteForeground#022B3A
  • tab.activeBackground#66D9E850
  • tab.activeBorder#FF6F61
  • tab.activeForeground#FFFFFF
  • tab.activeModifiedBorder#66D9E8
  • tab.border#022B3A
  • tab.inactiveBackground#022B3A
  • tab.inactiveForeground#F0F3BDaf
  • tab.unfocusedActiveBackground#66D9E840
  • tab.unfocusedActiveBorder#66D9E8
  • tab.unfocusedActiveForeground#F0F3BD
  • tab.unfocusedInactiveBackground#66D9E810
  • tab.unfocusedInactiveForeground#F0F3BD7f
  • terminal.ansiBlack#022B3A
  • terminal.ansiBlue#A7F6E3
  • terminal.ansiBrightBlack#66D9E8
  • terminal.ansiBrightBlue#A7F6E3
  • terminal.ansiBrightCyan#A7F6E3
  • terminal.ansiBrightGreen#D97C0B
  • terminal.ansiBrightMagenta#FFA62B
  • terminal.ansiBrightRed#F0F3BD
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFA62B
  • terminal.ansiCyan#A7F6E3
  • terminal.ansiGreen#D97C0B
  • terminal.ansiMagenta#FFA62B
  • terminal.ansiRed#F0F3BD
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#FFA62B
  • terminalCursor.background#022B3A
  • terminalCursor.foreground#FFA62B
  • textLink.activeForeground#F0F3BD
  • textLink.foreground#66D9E8
  • titleBar.activeBackground#022B3A
  • titleBar.activeForeground#F0F3BD
  • titleBar.border#022B3A60
  • titleBar.inactiveBackground#022B3A
  • titleBar.inactiveForeground#66D9E8
  • tree.indentGuidesStroke#05668D
  • widget.shadow#022B3A30

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, string.quoted.docstring.multi.python, string.quoted.docstring.multi.python punctuation.definition.string.begin.python, string.quoted.docstring.multi.python punctuation.definition.string.end.python#848bbditalic
string.quoted, string.template, punctuation.definition.string#FFA62B
string.template meta.embedded.line#F0F3BD
variable, entity.name.variable#00A896
variable.language#66D9E8bold
variable.parameteritalic
storage.type, storage.modifier#A7F6E3
constant#FFA62B
string.regexp#A7F6E3
constant.numeric#66D9E8
constant.language#A7F6E3
constant.character.escape#00A896
entity.name#05668D
entity.name.tag#00A896
punctuation.definition.tag#66D9E8
entity.other.attribute-name#F0F3BD
entity.other.attribute-name.html#A7F6E3italic
entity.name.type, meta.attribute.class.html#FF6F61
entity.other.inherited-class#00A896
entity.name.function, variable.function#66D9E8
keyword.control.export.js, keyword.control.import.js#00A896
constant.numeric.decimal.js#A7F6E3
keyword#FFA62B
keyword.control#FFA62B
keyword.operator#66D9E8
keyword.operator.new, keyword.operator.expression, keyword.operator.logical#00A896
keyword.other.unit#66D9E8
support#66D9E8
support.function#00A896
support.variable#00A896
meta.object-literal.key, support.type.property-name#00A896
punctuation.separator.key-value#66D9E8
punctuation.section.embedded#F0F3BD
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#36f9f6
support.type.property-name.css, support.type.property-name.json#56d1aa
switch-block.expr.js#00A896
variable.other.constant.property.js, variable.other.property.js#A7F6E3
constant.other.color#36f9f6
support.constant.font-name#36f9f6
entity.other.attribute-name.id#36f9f6
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#66D9E8
support.function.misc.css#FFA62B
markup.heading, entity.name.section#00A896
text.html, keyword.operator.assignment#F0F3BD
markup.quote#F0F3BDitalic
beginning.punctuation.definition.list#F0F3BD
markup.underline.link#66D9E8
string.other.link.description#66D9E8
meta.function-call.generic.python#66D9E8
variable.parameter.function-call.python#A7F6E3
storage.type.cs#66D9E8
entity.name.variable.local.cs#00A896
entity.name.variable.field.cs, entity.name.variable.property.cs#A7F6E3
storage.modifier.c#FFA62B
source.cpp keyword.operator#FFA62B
constant.other.placeholder.cpp#A7F6E3italic
keyword.control.directive.include.cpp, keyword.control.directive.define.cpp#05668D
storage.modifier.specifier.const.cpp#66D9E8
markup.underline.link.markdown, markup.inline.raw.string.markdown#A7F6E3italic
string.other.link.title.markdown#FFA62B
markup.heading.markdown, entity.name.section.markdown#66D9E8bold
markup.italic.markdown#00A896italic
markup.bold.markdown#00A896bold
punctuation.definition.quote.begin.markdown, markup.quote.markdown#F0F3BDitalic
source.dart, source.python, source.scala#66D9E8
Sufocode by C4ptain_Pl0uf - VS Code Theme