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#0a0a0a
  • activityBar.border#1a1a1a
  • activityBar.foreground#fafafa
  • activityBar.inactiveForeground#666666
  • activityBarBadge.background#fafafa
  • activityBarBadge.foreground#0a0a0a
  • badge.background#1a1a1a
  • badge.foreground#fafafa
  • button.background#fafafa
  • button.foreground#0a0a0a
  • button.hoverBackground#e5e5e5
  • button.secondaryBackground#1a1a1a
  • button.secondaryForeground#fafafa
  • button.secondaryHoverBackground#262626
  • checkbox.background#1a1a1a
  • checkbox.border#333333
  • debugToolBar.background#0a0a0a
  • diffEditor.insertedTextBackground#fafafa0d
  • diffEditor.removedTextBackground#ff64670d
  • dropdown.background#0a0a0a
  • dropdown.border#1a1a1a
  • dropdown.foreground#fafafa
  • editor.background#0a0a0a
  • editor.findMatchBackground#4d4d4d
  • editor.findMatchHighlightBackground#33333333
  • editor.foreground#e0e0e0
  • editor.inactiveSelectionBackground#1a1a1a33
  • editor.lineHighlightBackground#141414
  • editor.selectionBackground#2a2a2a
  • editor.wordHighlightBackground#26262600
  • editor.wordHighlightBorder#333333
  • editor.wordHighlightStrongBackground#26262600
  • editor.wordHighlightStrongBorder#4d4d4d
  • editorBracketHighlight.foreground1#999999
  • editorBracketHighlight.foreground2#999999
  • editorBracketHighlight.foreground3#999999
  • editorBracketHighlight.foreground4#999999
  • editorBracketHighlight.foreground5#999999
  • editorBracketHighlight.foreground6#999999
  • editorBracketHighlight.unexpectedBracket.foreground#ff6467
  • editorBracketMatch.background#1a1a1a
  • editorBracketMatch.border#666666
  • editorCursor.foreground#fafafa
  • editorError.foreground#ff6467
  • editorGroup.border#1a1a1a
  • editorGroupHeader.tabsBackground#0a0a0a
  • editorGutter.addedBackground#fafafa
  • editorGutter.deletedBackground#ff6467
  • editorGutter.modifiedBackground#999999
  • editorIndentGuide.activeBackground1#333333
  • editorIndentGuide.background1#1a1a1a
  • editorLineNumber.activeForeground#808080
  • editorLineNumber.foreground#404040
  • editorLink.activeForeground#fafafa
  • editorWarning.foreground#ff6467
  • editorWhitespace.foreground#1a1a1a
  • editorWidget.background#0a0a0a
  • editorWidget.border#1a1a1a
  • focusBorder#333333
  • foreground#fafafa
  • gitDecoration.addedResourceForeground#cccccc
  • gitDecoration.conflictingResourceForeground#cccccc
  • gitDecoration.deletedResourceForeground#cccccc
  • gitDecoration.ignoredResourceForeground#666666
  • gitDecoration.modifiedResourceForeground#cccccc
  • gitDecoration.submoduleResourceForeground#cccccc
  • gitDecoration.untrackedResourceForeground#cccccc
  • input.background#0a0a0a
  • input.border#1a1a1a
  • input.foreground#fafafa
  • input.placeholderForeground#666666
  • inputOption.activeBorder#fafafa
  • inputValidation.errorBackground#0a0a0a
  • inputValidation.errorBorder#ff6467
  • list.activeSelectionBackground#1a1a1a
  • list.activeSelectionForeground#fafafa
  • list.deemphasizedForeground#666666
  • list.focusOutline#333333
  • list.highlightForeground#fafafa
  • list.hoverBackground#1a1a1a
  • list.inactiveSelectionBackground#1a1a1a
  • menu.background#0a0a0a
  • menu.foreground#fafafa
  • menu.selectionBackground#1a1a1a
  • menubar.selectionBackground#1a1a1a
  • notificationCenter.border#1a1a1a
  • notificationCenterHeader.background#0a0a0a
  • notifications.background#0a0a0a
  • notifications.border#1a1a1a
  • panel.background#0a0a0a
  • panel.border#1a1a1a
  • panelTitle.activeBorder#fafafa
  • panelTitle.activeForeground#fafafa
  • panelTitle.inactiveForeground#666666
  • peekView.border#1a1a1a
  • peekViewEditor.background#0a0a0a
  • peekViewResult.background#0a0a0a
  • peekViewTitle.background#0a0a0a
  • pickerGroup.border#1a1a1a
  • progressBar.background#fafafa
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#4d4d4d
  • scrollbarSlider.background#33333380
  • scrollbarSlider.hoverBackground#4d4d4d80
  • selection.background#333333
  • settings.headerForeground#fafafa
  • settings.modifiedItemIndicator#fafafa
  • sideBar.background#0a0a0a
  • sideBar.border#1a1a1a
  • sideBar.foreground#cccccc
  • sideBarSectionHeader.background#0a0a0a
  • sideBarSectionHeader.foreground#fafafa
  • sideBarTitle.foreground#fafafa
  • statusBar.background#0a0a0a
  • statusBar.border#1a1a1a
  • statusBar.debuggingBackground#ff6467
  • statusBar.debuggingForeground#0a0a0a
  • statusBar.foreground#999999
  • statusBar.noFolderBackground#0a0a0a
  • statusBarItem.hoverBackground#1a1a1a
  • statusBarItem.remoteBackground#fafafa
  • statusBarItem.remoteForeground#0a0a0a
  • tab.activeBackground#0a0a0a
  • tab.activeBorder#0a0a0a
  • tab.activeBorderTop#fafafa
  • tab.activeForeground#fafafa
  • tab.border#0a0a0a
  • tab.inactiveBackground#0a0a0a
  • tab.inactiveForeground#666666
  • terminal.ansiBlack#0a0a0a
  • terminal.ansiBlue#cccccc
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#cccccc
  • terminal.ansiBrightCyan#d9d9d9
  • terminal.ansiBrightGreen#fafafa
  • terminal.ansiBrightMagenta#b3b3b3
  • terminal.ansiBrightRed#ff6467
  • terminal.ansiBrightWhite#fafafa
  • terminal.ansiBrightYellow#e5e5e5
  • terminal.ansiCyan#d9d9d9
  • terminal.ansiGreen#fafafa
  • terminal.ansiMagenta#b3b3b3
  • terminal.ansiRed#ff6467
  • terminal.ansiWhite#fafafa
  • terminal.ansiYellow#e5e5e5
  • terminal.background#0a0a0a
  • terminal.foreground#fafafa
  • textLink.activeForeground#fafafa
  • textLink.foreground#cccccc
  • titleBar.activeBackground#0a0a0a
  • titleBar.activeForeground#fafafa
  • titleBar.border#1a1a1a
  • titleBar.inactiveBackground#0a0a0a
  • titleBar.inactiveForeground#666666
  • tree.indentGuidesStroke#1a1a1a
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5a5a5aitalic
string, string.quoted, string.template#a8a8a8
punctuation.definition.string#7a7a7a
constant.numeric, constant.language.boolean, constant.language.null, constant.language.undefined#c2c2c2
variable, variable.other.readwrite, variable.other.object#e0e0e0
variable.parameter, meta.parameters variable#b8b8b8
variable.other.constant, variable.other.enummember#d0d0d0
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, storage.type, storage.modifier#ffffff
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.relational#909090
punctuation.separator, punctuation.terminator, punctuation.accessor, meta.brace, punctuation.section#707070
entity.name.function, support.function, meta.function-call.generic#f5f5f5
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class#d8d8d8
entity.name.tag, meta.tag.sgml.doctype#f0f0f0
entity.other.attribute-name#b0b0b0
support.constant, constant.other, variable.language.this, variable.language.super#c8c8c8
entity.name.namespace, entity.name.scope-resolution#d4d4d4
support.type.property-name, meta.object-literal.key#bcbcbc
invalid, invalid.illegal#ff6467
invalid.deprecated#ff6467strikethrough
markup.heading#ffffffbold
markup.italicitalic
markup.boldbold
markup.underlineunderline
markup.deleted#ff6467
markup.inserted#fafafa
meta.diff.header#5a5a5a
kuro by orhantugrul - VS Code Theme