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#0a0f15
  • activityBar.foreground#d6deeb
  • activityBar.inactiveForeground#6f8194
  • activityBarBadge.background#2b6cb0
  • activityBarBadge.foreground#ffffff
  • badge.background#1f2c3a
  • badge.foreground#d6deeb
  • button.background#2b6cb0
  • button.foreground#ffffff
  • button.hoverBackground#2f7ed0
  • descriptionForeground#9fb0c0
  • dropdown.background#121b25
  • dropdown.border#1f2c3a
  • dropdown.foreground#d6deeb
  • editor.background#0b0f14
  • editor.findMatchBackground#ffc85755
  • editor.findMatchBorder#ffc857
  • editor.findMatchHighlightBackground#ffc8572e
  • editor.foreground#d6deeb
  • editor.inactiveSelectionBackground#1b304488
  • editor.selectionBackground#214a6b88
  • editor.wordHighlightBackground#4dd0e133
  • editor.wordHighlightStrongBackground#4dd0e155
  • editorBracketMatch.background#2b6cb044
  • editorBracketMatch.border#2b6cb0
  • editorCursor.foreground#68d5ff
  • editorError.foreground#ff6b6b
  • editorGutter.addedBackground#3fb950
  • editorGutter.deletedBackground#f85149
  • editorGutter.modifiedBackground#f2cc60
  • editorHint.foreground#8be9a8
  • editorHoverWidget.background#111a23
  • editorHoverWidget.border#1f2c3a
  • editorIndentGuide.activeBackground1#2e4258
  • editorIndentGuide.background1#1a232e
  • editorInfo.foreground#68d5ff
  • editorLineNumber.activeForeground#91a3b7
  • editorLineNumber.foreground#4e5f72
  • editorSuggestWidget.background#101821
  • editorSuggestWidget.foreground#d6deeb
  • editorSuggestWidget.highlightForeground#68d5ff
  • editorSuggestWidget.selectedBackground#1e3347
  • editorWarning.foreground#f2cc60
  • editorWhitespace.foreground#273645
  • editorWidget.background#111a23
  • editorWidget.border#1f2c3a
  • errorForeground#ff6b6b
  • focusBorder#2b6cb0
  • foreground#d6deeb
  • icon.foreground#9fb0c0
  • input.background#121b25
  • input.border#1f2c3a
  • input.foreground#d6deeb
  • input.placeholderForeground#6f8194
  • inputOption.activeBorder#2b6cb0
  • list.activeSelectionBackground#1b2d3f
  • list.focusOutline#2b6cb0
  • list.hoverBackground#142131
  • list.inactiveSelectionBackground#162433
  • panel.background#0a1118
  • panel.border#1a2430
  • panelTitle.activeBorder#68d5ff
  • panelTitle.activeForeground#d6deeb
  • peekView.border#1f2c3a
  • peekViewEditor.background#0c131b
  • peekViewResult.background#0d151f
  • peekViewResult.selectionBackground#1e3347
  • peekViewTitle.background#101821
  • sideBar.background#0d131b
  • sideBar.foreground#c8d4e0
  • sideBarSectionHeader.background#101821
  • sideBarTitle.foreground#d6deeb
  • statusBar.background#0a0f15
  • statusBar.debuggingBackground#7a4a00
  • statusBar.foreground#b9c7d6
  • statusBar.noFolderBackground#090d13
  • statusBarItem.hoverBackground#142131
  • terminal.ansiBlack#1f2c3a
  • terminal.ansiBlue#6fa8ff
  • terminal.ansiBrightBlack#4e5f72
  • terminal.ansiBrightBlue#9ec2ff
  • terminal.ansiBrightCyan#9ce8ff
  • terminal.ansiBrightGreen#b5f7c7
  • terminal.ansiBrightMagenta#ddb5ff
  • terminal.ansiBrightRed#ff8f8f
  • terminal.ansiBrightWhite#f4f8fc
  • terminal.ansiBrightYellow#ffd98f
  • terminal.ansiCyan#68d5ff
  • terminal.ansiGreen#8be9a8
  • terminal.ansiMagenta#c792ea
  • terminal.ansiRed#ff6b6b
  • terminal.ansiWhite#d6deeb
  • terminal.ansiYellow#f2cc60
  • terminal.background#0a0f15
  • terminal.foreground#d6deeb
  • textBlockQuote.background#101821
  • textBlockQuote.border#2b6cb0
  • textCodeBlock.background#111a23
  • textLink.foreground#68d5ff
  • titleBar.activeBackground#0a0f15
  • titleBar.activeForeground#d6deeb
  • titleBar.inactiveBackground#090d13
  • titleBar.inactiveForeground#6f8194
  • tree.indentGuidesStroke#1f2c3a
  • window.activeBorder#1d2630
  • window.inactiveBorder#121820

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7f8fa3italic
keyword, storage, keyword.control, keyword.operator.logical#ff8da1
string, string.quoted, string.template, string.interpolated#c3e88d
constant.numeric, constant.language, constant.character, constant.other#f78c6c
entity.name.function, meta.function-call, support.function, support.function.builtin, variable.function#8be9a8
entity.name.type, entity.name.class, support.type, storage.type#7ad7ff
variable, meta.definition.variable, meta.object-literal.key#d6deeb
variable.parameter#ffcb8b
variable.other.property, support.variable.property, entity.other.attribute-name#b8c7ff
punctuation, meta.brace, meta.delimiter#88a4bf
markup.heading.markdown, entity.name.section.markdown#68d5ffbold
markup.italic.markdown, markup.bold.markdown, markup.inline.raw.string.markdown#ffcb8b
support.type.property-name.json, meta.structure.dictionary.json string.quoted.double.json#68d5ff
meta.function.decorator.python, entity.name.function.decorator.python#c792ea
keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.authorization.sql#ff8da1bold
entity.name.function.sql, entity.name.type.sql, variable.other.readwrite.sql#8be9a8
keyword, storage.type#ff8da1
string, string.quoted#c3e88d
VS saBOR Cursor by Kalloyer - VS Code Theme