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#0E1628
  • activityBar.border#1F2A4A
  • activityBar.foreground#E6EDF3
  • activityBar.inactiveForeground#6C7A96
  • activityBarBadge.background#7FE9FF
  • activityBarBadge.foreground#0B1220
  • button.background#4FC3F7
  • button.border#1F2A4A
  • button.foreground#0B1220
  • button.hoverBackground#5FD0FA
  • contrastBorder#1F2A4A
  • debugToolBar.background#111A2E
  • debugToolBar.border#1F2A4A
  • diffEditor.border#1F2A4A
  • diffEditor.insertedTextBackground#0F2A2240
  • diffEditor.insertedTextBorder#1E8E6A
  • diffEditor.removedTextBackground#2A141440
  • diffEditor.removedTextBorder#C15B5B
  • diffEditorGutter.insertedLineBackground#0F2A22
  • diffEditorGutter.removedLineBackground#2A1414
  • dropdown.background#111A2E
  • dropdown.border#1F2A4A
  • dropdown.foreground#E6EDF3
  • editor.background#0B1220
  • editor.findMatchBackground#1A244280
  • editor.findMatchHighlightBackground#141E3660
  • editor.foreground#E6EDF3
  • editor.hoverHighlightBackground#141E3650
  • editor.inactiveSelectionBackground#0E162840
  • editor.lineHighlightBackground#101A2E
  • editor.selectionBackground#1A2442
  • editor.selectionHighlightBackground#141E3680
  • editorBracketHighlight.foreground1#7FE9FF
  • editorBracketHighlight.foreground2#C4B5FD
  • editorBracketHighlight.foreground3#4FC3F7
  • editorBracketHighlight.foreground4#2EE6A6
  • editorBracketHighlight.foreground5#FF6AD5
  • editorBracketHighlight.foreground6#F5C542
  • editorBracketHighlight.unexpectedBracket.foreground#F97070
  • editorBracketMatch.background#1A244280
  • editorBracketMatch.border#35BFFF
  • editorCursor.foreground#7FE9FF
  • editorGroup.border#1F2A4A
  • editorGroupHeader.border#1F2A4A
  • editorGroupHeader.tabsBackground#0E1628
  • editorGutter.addedBackground#34D399
  • editorGutter.background#0B1220
  • editorGutter.deletedBackground#F87171
  • editorGutter.modifiedBackground#60A5FA
  • editorHoverWidget.background#141E36
  • editorHoverWidget.border#1F2A4A
  • editorIndentGuide.activeBackground1#284068
  • editorIndentGuide.background1#1E2D49
  • editorLineNumber.activeForeground#B8C4D9
  • editorLineNumber.foreground#6C7A96
  • editorSuggestWidget.background#141E36
  • editorSuggestWidget.border#1F2A4A
  • editorSuggestWidget.foreground#E6EDF3
  • editorSuggestWidget.highlightForeground#7FE9FF
  • editorSuggestWidget.selectedBackground#1A2442
  • editorWhitespace.foreground#1E2D49
  • editorWidget.background#141E36
  • editorWidget.border#1F2A4A
  • extensionButton.prominentBackground#4FC3F7
  • extensionButton.prominentForeground#0B1220
  • extensionButton.prominentHoverBackground#5FD0FA
  • focusBorder#35BFFF
  • gitDecoration.addedResourceForeground#34D399
  • gitDecoration.conflictingResourceForeground#F59E0B
  • gitDecoration.deletedResourceForeground#F87171
  • gitDecoration.ignoredResourceForeground#6B7280
  • gitDecoration.modifiedResourceForeground#60A5FA
  • gitDecoration.renamedResourceForeground#A78BFA
  • gitDecoration.untrackedResourceForeground#22D3EE
  • input.background#111A2E
  • input.border#1F2A4A
  • input.foreground#E6EDF3
  • input.placeholderForeground#8FA1BF
  • inputOption.activeBorder#7FE9FF
  • inputValidation.errorBackground#F9707020
  • inputValidation.errorBorder#F97070
  • inputValidation.infoBackground#60A5FA20
  • inputValidation.infoBorder#60A5FA
  • inputValidation.warningBackground#F5C54220
  • inputValidation.warningBorder#F5C542
  • list.activeSelectionBackground#1A2442
  • list.activeSelectionForeground#E6EDF3
  • list.dropBackground#1A2442
  • list.highlightForeground#7FE9FF
  • list.hoverBackground#141E36
  • list.hoverForeground#E6EDF3
  • list.inactiveSelectionBackground#141E36
  • list.inactiveSelectionForeground#E6EDF3
  • menu.background#111A2E
  • menu.foreground#E6EDF3
  • menu.selectionBackground#1A2442
  • menu.selectionForeground#E6EDF3
  • menubar.selectionBackground#111A2E
  • menubar.selectionForeground#E6EDF3
  • notificationCenter.border#1F2A4A
  • notifications.background#111A2E
  • notifications.border#1F2A4A
  • notifications.foreground#E6EDF3
  • notificationToast.border#1F2A4A
  • panel.background#0E1628
  • panel.border#1F2A4A
  • peekView.border#35BFFF
  • peekViewEditor.background#0E1628
  • peekViewEditorGutter.background#0B1220
  • peekViewResult.background#111A2E
  • peekViewTitle.background#141E36
  • quickInput.background#111A2E
  • quickInput.foreground#E6EDF3
  • quickInputList.focusBackground#1A2442
  • quickInputTitle.background#0B1220
  • scrollbar.shadow#0B122080
  • scrollbarSlider.activeBackground#1F2A4AA0
  • scrollbarSlider.background#1F2A4A60
  • scrollbarSlider.hoverBackground#1F2A4A80
  • sideBar.background#0E1628
  • sideBar.border#1F2A4A
  • sideBar.foreground#B8C4D9
  • sideBarSectionHeader.background#111A2E
  • sideBarSectionHeader.border#1F2A4A
  • sideBarSectionHeader.foreground#E6EDF3
  • sideBarTitle.foreground#E6EDF3
  • statusBar.background#111A2E
  • statusBar.border#1F2A4A
  • statusBar.debuggingBackground#B69CFF
  • statusBar.debuggingForeground#0B1220
  • statusBar.foreground#B8C4D9
  • statusBar.noFolderBackground#0E1628
  • statusBarItem.activeBackground#1A244260
  • statusBarItem.hoverBackground#1A244240
  • tab.activeBackground#0B1220
  • tab.activeBorder#7FE9FF
  • tab.activeForeground#E6EDF3
  • tab.border#1F2A4A
  • tab.hoverBackground#111A2E
  • tab.hoverForeground#E6EDF3
  • tab.inactiveBackground#0E1628
  • tab.inactiveForeground#6C7A96
  • terminal.ansiBlack#0B1220
  • terminal.ansiBlue#4FC3F7
  • terminal.ansiBrightBlack#1F2A4A
  • terminal.ansiBrightBlue#60A5FA
  • terminal.ansiBrightCyan#9FF0FF
  • terminal.ansiBrightGreen#6EE7B7
  • terminal.ansiBrightMagenta#B69CFF
  • terminal.ansiBrightRed#FF8A8A
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#F8D56C
  • terminal.ansiCyan#7FE9FF
  • terminal.ansiGreen#34D399
  • terminal.ansiMagenta#FF6AD5
  • terminal.ansiRed#F97070
  • terminal.ansiWhite#E6EDF3
  • terminal.ansiYellow#F5C542
  • terminal.background#0B1220
  • terminal.foreground#E6EDF3
  • titleBar.activeBackground#111A2E
  • titleBar.activeForeground#E6EDF3
  • titleBar.inactiveBackground#0E1628
  • titleBar.inactiveForeground#B8C4D9
  • widget.shadow#0B122060

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8FA1BFitalic
variable, variable.other, variable.parameter, variable.language.this#E6EDF3—
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.other.using, storage.type, storage.modifier#B69CFF—
entity.name.type, entity.name.class, entity.name.namespace, entity.other.inherited-class, support.type, support.class, storage.type.primitive, storage.type.built-in#C4B5FD—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#4FC3F7—
constant, constant.numeric, constant.language, constant.character, constant.escape, variable.other.constant, support.constant#FF6AD5—
constant.numeric, constant.language.boolean#7FE9FF—
string, string.quoted, string.template, constant.other.symbol#2EE6A6—
variable.other.property, meta.object-literal.key, support.type.property-name, keyword.operator, punctuation, meta.brace, meta.bracket, meta.delimiter#B8C4D9—
entity.name.tag, punctuation.definition.tag#B69CFF—
entity.other.attribute-name#4FC3F7—
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#B69CFF—
support.type.property-name.css#4FC3F7—
support.constant.property-value.css, constant.numeric.css#2EE6A6—
support.type.property-name.json#4FC3F7—
markup.heading, entity.name.section.markdown#B69CFF—
markup.bold#E6EDF3bold
markup.italic#E6EDF3italic
markup.inline.raw, markup.fenced_code#2EE6A6—
markup.underline.link, string.other.link#4FC3F7—
markup.inserted.git_gutter#34D399—
markup.changed.git_gutter#60A5FA—
markup.deleted.git_gutter#F87171—
invalid, invalid.illegal#F97070—
invalid.deprecated#F5C542—
Transylvanian Twilight by Hatem Soliman - VS Code Theme