Skip to main content
Coding Theme

Color themes

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.activeBackground#0d0d0d
  • activityBar.activeBorder#909090
  • activityBar.activeFocusBorder#909090
  • activityBar.background#111111
  • activityBar.border#909090
  • activityBar.dropBorder#909090
  • activityBar.foreground#f2f2f2
  • activityBar.inactiveForeground#cccccc
  • activityBarBadge.background#ff6600
  • activityBarBadge.foreground#111111
  • badge.background#ff6600
  • badge.foreground#111111
  • breadcrumbPicker.background#0d0d0d
  • button.background#ff6600
  • button.foreground#0d0d0d
  • button.hoverBackground#ff751a
  • debugToolBar.border#909090
  • diffEditor.insertedTextBackground#00ff0020
  • diffEditor.removedTextBackground#ff000020
  • dropdown.background#0d0d0d
  • dropdown.border#909090
  • dropdown.foreground#f2f2f2
  • editor.background#0a0a0a
  • editor.findMatchBackground#ff6600
  • editor.findMatchBorder#909090
  • editor.findMatchHighlightBackground#6b728025
  • editor.foreground#f2f2f2
  • editor.lineHighlightBackground#181818
  • editor.rangeHighlightBorder#909090
  • editor.selectionBackground#6b728025
  • editor.selectionHighlightBackground#6b728025
  • editor.wordHighlightBackground#6b728025
  • editor.wordHighlightStrongBackground#6b728025
  • editorBracketMatch.background#90909080
  • editorBracketMatch.border#909090
  • editorCursor.foreground#909090
  • editorGroup.border#909090
  • editorGroupHeader.border#cccccc25
  • editorGroupHeader.tabsBackground#0d0d0d
  • editorHoverWidget.border#909090
  • editorIndentGuide.activeBackground1#90909060
  • editorIndentGuide.background1#90909030
  • editorLineNumber.activeForeground#dddddd
  • editorLineNumber.foreground#909090
  • editorRuler.foreground#909090
  • editorSuggestWidget.border#909090
  • editorWhitespace.foreground#909090
  • editorWidget.border#909090
  • extensionButton.prominentBackground#ff6600
  • extensionButton.prominentForeground#0d0d0d
  • extensionButton.prominentHoverBackground#ff751a
  • gitDecoration.conflictingResourceForeground#ff6600
  • gitDecoration.deletedResourceForeground#ff3333
  • gitDecoration.ignoredResourceForeground#9ca3af
  • gitDecoration.modifiedResourceForeground#909090
  • gitDecoration.untrackedResourceForeground#3399ff
  • input.background#0d0d0d
  • input.border#909090
  • input.foreground#f2f2f2
  • input.placeholderForeground#cccccc
  • inputOption.activeBorder#909090
  • inputValidation.errorBackground#ff000040
  • inputValidation.errorBorder#ff0000
  • inputValidation.infoBackground#00cccc40
  • inputValidation.infoBorder#00cccc
  • inputValidation.warningBackground#ff660040
  • inputValidation.warningBorder#ff6600
  • list.activeSelectionBackground#cccccc10
  • list.activeSelectionForeground#909090
  • list.dropBackground#90909040
  • list.errorForeground#ff6666
  • list.focusBackground#cccccc10
  • list.focusOutline#909090
  • list.highlightForeground#909090
  • list.hoverBackground#0d0d0d
  • list.inactiveSelectionBackground#cccccc10
  • list.warningForeground#ff8533
  • menu.background#0d0d0d
  • menu.foreground#f2f2f2
  • menu.selectionBackground#909090
  • menu.selectionForeground#f2f2f2
  • menubar.selectionBackground#909090
  • menubar.selectionForeground#f2f2f2
  • notificationCenter.border#909090
  • notificationCenterHeader.background#0d0d0d
  • notificationCenterHeader.foreground#f2f2f2
  • notifications.background#0d0d0d
  • notifications.border#909090
  • notifications.foreground#f2f2f2
  • notificationToast.border#909090
  • panel.background#111111
  • panel.border#909090
  • panelInput.border#909090
  • panelSectionHeader.background#0d0d0d
  • panelSectionHeader.border#909090
  • panelSectionHeader.foreground#f2f2f2
  • panelTitle.activeBorder#909090
  • panelTitle.activeForeground#f2f2f2
  • panelTitle.inactiveForeground#cccccc
  • peekView.border#999999
  • peekViewEditor.background#2c2c2c
  • peekViewEditor.matchHighlightBackground#6b728025
  • peekViewResult.background#1a1a1a
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#cccccc
  • peekViewResult.matchHighlightBackground#6b728025
  • peekViewResult.selectionBackground#3f3f3f
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#3f3f3f
  • peekViewTitleDescription.foreground#cccccc
  • peekViewTitleLabel.foreground#ffffff
  • quickInput.background#0d0d0d
  • quickInput.foreground#f2f2f2
  • quickInputList.focusBackground#6b728025
  • quickInputList.focusForeground#f2f2f2
  • quickInputList.focusIconForeground#f2f2f2
  • quickInputTitle.background#909090
  • scrollbar.shadow#0d0d0d
  • scrollbarSlider.activeBackground#909090
  • scrollbarSlider.background#90909080
  • scrollbarSlider.hoverBackground#90909080
  • searchEditor.findMatchBorder#909090
  • settings.headerForeground#f2f2f2
  • settings.modifiedItemIndicator#ff6600
  • sideBar.background#0d0d0d
  • sideBar.border#909090
  • sideBar.foreground#f2f2f2
  • sideBarSectionHeader.background#0a0a0a
  • sideBarSectionHeader.foreground#f2f2f2
  • sideBarTitle.foreground#f2f2f2
  • statusBar.background#0d0d0d
  • statusBar.border#909090
  • statusBar.foreground#f2f2f2
  • statusBarItem.hoverBackground#909090
  • statusBarItem.remoteBackground#909090
  • statusBarItem.remoteForeground#0d0d0d
  • tab.activeBackground#111111
  • tab.activeBorder#909090
  • tab.activeForeground#f2f2f2
  • tab.border#909090
  • tab.inactiveBackground#0d0d0d
  • tab.inactiveForeground#cccccc
  • tab.inactiveModifiedBorder#909090
  • terminal.ansiBlack#0d0d0d
  • terminal.ansiBlue#00cccc
  • terminal.ansiBrightBlack#111111
  • terminal.ansiBrightBlue#00ffff
  • terminal.ansiBrightCyan#00ffff
  • terminal.ansiBrightGreen#66ff66
  • terminal.ansiBrightMagenta#ff33ff
  • terminal.ansiBrightRed#ff6666
  • terminal.ansiBrightWhite#f2f2f2
  • terminal.ansiBrightYellow#ff8533
  • terminal.ansiCyan#00cccc
  • terminal.ansiGreen#00ff00
  • terminal.ansiMagenta#cc00cc
  • terminal.ansiRed#ff0000
  • terminal.ansiWhite#f2f2f2
  • terminal.ansiYellow#ff6600
  • terminal.background#0a0a0a
  • terminal.findMatchBackground#ff660080
  • terminal.findMatchHighlightBackground#6b728025
  • terminal.foreground#f2f2f2
  • terminal.selectionBackground#90909080
  • terminalCursor.background#909090
  • terminalCursor.foreground#0a0a0a
  • titleBar.activeBackground#0d0d0d
  • titleBar.activeForeground#f2f2f2
  • titleBar.border#909090
  • titleBar.inactiveBackground#0d0d0d
  • titleBar.inactiveForeground#cccccc

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6b7280italic
keyword, storage.type, storage.modifier, keyword.control, keyword.operator.new, keyword.operator.sizeof, keyword.operator.delete, keyword.operator.typeof#ff6600bold
string, string.quoted, string.template, string.interpolated#22c55e
constant.character.escape, string.regexp#34d399
constant.numeric, constant.language.boolean, constant.language.null, constant.language.undefined#06b6d4
entity.name.class, entity.name.type.class, support.class, entity.other.inherited-class, meta.cast entity.name.type, storage.type.cs, storage.type.java, storage.type.cpp, entity.name.type, entity.name.type.template, support.type, variable.other.readwrite.member.cpp, entity.name.scope-resolution#f59e0bbold
entity.name.function, support.function, meta.function-call, meta.method-call, variable.function#3b82f6
entity.name.function.member, meta.method.java, meta.method.cpp, entity.name.function.method#60a5fa
variable, variable.other.readwrite, variable.parameter, meta.definition.variable#e5e7eb
variable.other.property, variable.other.member, entity.name.variable.field#ef4444
constant.language, constant.other, variable.other.constant, entity.name.constant, variable.other.enummember#059669italic
keyword.operator, punctuation.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical#ff8533
punctuation, punctuation.separator, punctuation.terminator, punctuation.definition#9ca3af
punctuation.section.brackets, punctuation.section.braces, punctuation.section.parens, meta.brace.round, meta.brace.square, meta.brace.curly#c0c0c0
storage.type.primitive.java, storage.type.built-in.primitive.cpp, storage.type.primitive.cpp, keyword.type.cs, support.type.primitive, storage.type.void, keyword.type.void#f59e0bbold
entity.name.namespace, entity.name.package, storage.modifier.package.java, storage.modifier.import.java#c77dff
keyword.control.import, keyword.control.include, meta.import, meta.include#ff1493
entity.name.function.decorator, punctuation.decorator, storage.type.annotation.java#ffd700
entity.name.label#ff00ffitalic
meta.preprocessor, keyword.control.directive, entity.name.function.preprocessor#ffd700
entity.name.type.template, storage.type.template, punctuation.definition.template-expression#ff9800
entity.name.type.parameter, storage.type.generic, punctuation.definition.typeparameters#ff9800italic
variable.language.this, keyword.other.this, variable.language.self#ff1493italic
storage.modifier.access, storage.modifier.java, storage.modifier.cpp#909090
keyword.control.trycatch, storage.type.java.exception#ff3333
storage.type.function.lambda, keyword.operator.lambda#ffa726
markup.heading, markup.heading.1, markup.heading.2, markup.heading.3, markup.heading.4, markup.heading.5, markup.heading.6, entity.name.section.markdown#909090bold
markup.bold, punctuation.definition.bold.markdown#f59e0bbold
markup.italic, punctuation.definition.italic.markdown#3b82f6italic
markup.strikethrough, punctuation.definition.strikethrough.markdown#9ca3afstrikethrough
markup.inline.raw, markup.raw.inline.markdown#ff6600
markup.fenced_code.block.markdown, markup.raw.block.markdown#22c55e
fenced_code.block.language.markdown, markup.fenced_code.block.markdown punctuation.definition.markdown#909090
markup.underline.link.markdown, markup.underline.link.image.markdown#06b6d4underline
string.other.link.title.markdown, string.other.link.description.markdown#60a5fa
markup.underline.link.markdown, markup.underline.link.image.markdown#06b6d4
markup.list.unnumbered.markdown, markup.list.numbered.markdown, punctuation.definition.list.markdown#ff8533
markup.quote.markdown, punctuation.definition.quote.markdown#a855f7italic
meta.separator.markdown#909090bold
markup.table.markdown, punctuation.separator.table-cell.markdown, punctuation.section.table-header.markdown#c0c0c0
text.html.markdown entity.name.tag, text.html.markdown punctuation.definition.tag#ef4444
text.html.markdown entity.other.attribute-name#fbbf24
darkercolor by J. Feser - VS Code Theme