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#0d0d06
  • activityBar.activeBorder#cccc00
  • activityBar.activeFocusBorder#cccc00
  • activityBar.background#111108
  • activityBar.border#cccc00
  • activityBar.dropBorder#cccc00
  • activityBar.foreground#f2f2f2
  • activityBar.inactiveForeground#cccccc
  • activityBarBadge.background#ff6600
  • activityBarBadge.foreground#111108
  • badge.background#ff6600
  • badge.foreground#111108
  • breadcrumbPicker.background#0d0d06
  • button.background#ff6600
  • button.foreground#0d0d06
  • button.hoverBackground#ff751a
  • debugToolBar.border#cccc00
  • diffEditor.insertedTextBackground#00ff0020
  • diffEditor.removedTextBackground#ff000020
  • dropdown.background#0d0d06
  • dropdown.border#cccc00
  • dropdown.foreground#f2f2f2
  • editor.background#0a0a05
  • editor.findMatchBackground#ff6600
  • editor.findMatchBorder#cccc00
  • editor.findMatchHighlightBackground#ffcc0025
  • editor.foreground#f2f2f2
  • editor.lineHighlightBackground#181808
  • editor.rangeHighlightBorder#cccc00
  • editor.selectionBackground#ffcc0025
  • editor.selectionHighlightBackground#ffcc0025
  • editor.wordHighlightBackground#ffcc0025
  • editor.wordHighlightStrongBackground#ffcc0025
  • editorBracketMatch.background#cccc0080
  • editorBracketMatch.border#cccc00
  • editorCursor.foreground#cccc00
  • editorGroup.border#cccc00
  • editorGroupHeader.border#ffcc0025
  • editorGroupHeader.tabsBackground#0d0d06
  • editorHoverWidget.border#cccc00
  • editorIndentGuide.activeBackground1#cccc0060
  • editorIndentGuide.background1#cccc0030
  • editorLineNumber.activeForeground#eeee88
  • editorLineNumber.foreground#cccc00
  • editorRuler.foreground#cccc00
  • editorSuggestWidget.border#cccc00
  • editorWhitespace.foreground#cccc00
  • editorWidget.border#cccc00
  • extensionButton.prominentBackground#ff6600
  • extensionButton.prominentForeground#0d0d06
  • extensionButton.prominentHoverBackground#ff751a
  • gitDecoration.conflictingResourceForeground#ff6600
  • gitDecoration.deletedResourceForeground#ff3333
  • gitDecoration.ignoredResourceForeground#9ca3af
  • gitDecoration.modifiedResourceForeground#cccc00
  • gitDecoration.untrackedResourceForeground#3399ff
  • input.background#0d0d06
  • input.border#cccc00
  • input.foreground#f2f2f2
  • input.placeholderForeground#cccccc
  • inputOption.activeBorder#cccc00
  • inputValidation.errorBackground#ff000040
  • inputValidation.errorBorder#ff0000
  • inputValidation.infoBackground#00cccc40
  • inputValidation.infoBorder#00cccc
  • inputValidation.warningBackground#ff660040
  • inputValidation.warningBorder#ff6600
  • list.activeSelectionBackground#cccccc10
  • list.activeSelectionForeground#cccc00
  • list.dropBackground#cccc0040
  • list.errorForeground#ff6666
  • list.focusBackground#cccccc10
  • list.focusOutline#cccc00
  • list.highlightForeground#cccc00
  • list.hoverBackground#0d0d06
  • list.inactiveSelectionBackground#cccccc10
  • list.warningForeground#ff8533
  • menu.background#0d0d06
  • menu.foreground#f2f2f2
  • menu.selectionBackground#cccc00
  • menu.selectionForeground#f2f2f2
  • menubar.selectionBackground#cccc00
  • menubar.selectionForeground#f2f2f2
  • notificationCenter.border#cccc00
  • notificationCenterHeader.background#0d0d06
  • notificationCenterHeader.foreground#f2f2f2
  • notifications.background#0d0d06
  • notifications.border#cccc00
  • notifications.foreground#f2f2f2
  • notificationToast.border#cccc00
  • panel.background#111108
  • panel.border#cccc00
  • panelInput.border#cccc00
  • panelSectionHeader.background#0d0d06
  • panelSectionHeader.border#cccc00
  • panelSectionHeader.foreground#f2f2f2
  • panelTitle.activeBorder#cccc00
  • panelTitle.activeForeground#f2f2f2
  • panelTitle.inactiveForeground#cccccc
  • peekView.border#cccc00
  • peekViewEditor.background#2c2c00
  • peekViewEditor.matchHighlightBackground#ffcc0025
  • peekViewResult.background#1a1a00
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#cccccc
  • peekViewResult.matchHighlightBackground#ffcc0025
  • peekViewResult.selectionBackground#3f3f00
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#3f3f00
  • peekViewTitleDescription.foreground#cccccc
  • peekViewTitleLabel.foreground#ffffff
  • quickInput.background#0d0d06
  • quickInput.foreground#f2f2f2
  • quickInputList.focusBackground#ffcc0025
  • quickInputList.focusForeground#f2f2f2
  • quickInputList.focusIconForeground#f2f2f2
  • quickInputTitle.background#cccc00
  • scrollbar.shadow#0d0d06
  • scrollbarSlider.activeBackground#cccc00
  • scrollbarSlider.background#cccc0080
  • scrollbarSlider.hoverBackground#cccc0080
  • searchEditor.findMatchBorder#cccc00
  • settings.headerForeground#f2f2f2
  • settings.modifiedItemIndicator#ff6600
  • sideBar.background#0d0d06
  • sideBar.border#cccc00
  • sideBar.foreground#f2f2f2
  • sideBarSectionHeader.background#0a0a05
  • sideBarSectionHeader.foreground#f2f2f2
  • sideBarTitle.foreground#f2f2f2
  • statusBar.background#0d0d06
  • statusBar.border#cccc00
  • statusBar.foreground#f2f2f2
  • statusBarItem.hoverBackground#cccc00
  • statusBarItem.remoteBackground#cccc00
  • statusBarItem.remoteForeground#0d0d06
  • tab.activeBackground#111108
  • tab.activeBorder#cccc00
  • tab.activeForeground#f2f2f2
  • tab.border#cccc00
  • tab.inactiveBackground#0d0d06
  • tab.inactiveForeground#cccccc
  • tab.inactiveModifiedBorder#cccc00
  • terminal.ansiBlack#0d0d06
  • terminal.ansiBlue#00cccc
  • terminal.ansiBrightBlack#111108
  • terminal.ansiBrightBlue#00ffff
  • terminal.ansiBrightCyan#00ffff
  • terminal.ansiBrightGreen#66ff66
  • terminal.ansiBrightMagenta#ff33ff
  • terminal.ansiBrightRed#ff6666
  • terminal.ansiBrightWhite#f2f2f2
  • terminal.ansiBrightYellow#cccc00
  • terminal.ansiCyan#00cccc
  • terminal.ansiGreen#00ff00
  • terminal.ansiMagenta#cc00cc
  • terminal.ansiRed#ff0000
  • terminal.ansiWhite#f2f2f2
  • terminal.ansiYellow#ffcc00
  • terminal.background#0a0a05
  • terminal.findMatchBackground#ff660080
  • terminal.findMatchHighlightBackground#ffcc0025
  • terminal.foreground#f2f2f2
  • terminal.selectionBackground#cccc0080
  • terminalCursor.background#cccc00
  • terminalCursor.foreground#0a0a05
  • titleBar.activeBackground#0d0d06
  • titleBar.activeForeground#f2f2f2
  • titleBar.border#cccc00
  • titleBar.inactiveBackground#0d0d06
  • 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#cccc00bold
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#fbbf24
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#cccc00
entity.name.label#ff00ffitalic
meta.preprocessor, keyword.control.directive, entity.name.function.preprocessor#cccc00
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#cccc00
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#cccc00bold
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#cccc00
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#cccc00bold
markup.table.markdown, punctuation.separator.table-cell.markdown, punctuation.section.table-header.markdown#fbbf24
text.html.markdown entity.name.tag, text.html.markdown punctuation.definition.tag#ef4444
text.html.markdown entity.other.attribute-name#fbbf24