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#060d06
  • activityBar.activeBorder#66ff66
  • activityBar.activeFocusBorder#66ff66
  • activityBar.background#081108
  • activityBar.border#66ff66
  • activityBar.dropBorder#66ff66
  • activityBar.foreground#f2f2f2
  • activityBar.inactiveForeground#cccccc
  • activityBarBadge.background#ff6600
  • activityBarBadge.foreground#081108
  • badge.background#ff6600
  • badge.foreground#081108
  • breadcrumbPicker.background#060d06
  • button.background#ff6600
  • button.foreground#060d06
  • button.hoverBackground#ff751a
  • debugToolBar.border#66ff66
  • diffEditor.insertedTextBackground#00ff0020
  • diffEditor.removedTextBackground#ff000020
  • dropdown.background#060d06
  • dropdown.border#66ff66
  • dropdown.foreground#f2f2f2
  • editor.background#050a05
  • editor.findMatchBackground#ff6600
  • editor.findMatchBorder#66ff66
  • editor.findMatchHighlightBackground#6b728025
  • editor.foreground#f2f2f2
  • editor.lineHighlightBackground#081808
  • editor.rangeHighlightBorder#66ff66
  • editor.selectionBackground#6b728025
  • editor.selectionHighlightBackground#6b728025
  • editor.wordHighlightBackground#6b728025
  • editor.wordHighlightStrongBackground#6b728025
  • editorBracketMatch.background#66ff6680
  • editorBracketMatch.border#66ff66
  • editorCursor.foreground#66ff66
  • editorGroup.border#66ff66
  • editorGroupHeader.border#cccccc25
  • editorGroupHeader.tabsBackground#060d06
  • editorHoverWidget.border#66ff66
  • editorIndentGuide.activeBackground1#66ff6660
  • editorIndentGuide.background1#66ff6630
  • editorLineNumber.activeForeground#aaffaa
  • editorLineNumber.foreground#66ff66
  • editorRuler.foreground#66ff66
  • editorSuggestWidget.border#66ff66
  • editorWhitespace.foreground#66ff66
  • editorWidget.border#66ff66
  • extensionButton.prominentBackground#ff6600
  • extensionButton.prominentForeground#060d06
  • extensionButton.prominentHoverBackground#ff751a
  • gitDecoration.conflictingResourceForeground#ff6600
  • gitDecoration.deletedResourceForeground#ff3333
  • gitDecoration.ignoredResourceForeground#9ca3af
  • gitDecoration.modifiedResourceForeground#66ff66
  • gitDecoration.untrackedResourceForeground#3399ff
  • input.background#060d06
  • input.border#66ff66
  • input.foreground#f2f2f2
  • input.placeholderForeground#cccccc
  • inputOption.activeBorder#66ff66
  • inputValidation.errorBackground#ff000040
  • inputValidation.errorBorder#ff0000
  • inputValidation.infoBackground#00cccc40
  • inputValidation.infoBorder#00cccc
  • inputValidation.warningBackground#ff660040
  • inputValidation.warningBorder#ff6600
  • list.activeSelectionBackground#cccccc10
  • list.activeSelectionForeground#66ff66
  • list.dropBackground#66ff6640
  • list.errorForeground#ff6666
  • list.focusBackground#cccccc10
  • list.focusOutline#66ff66
  • list.highlightForeground#66ff66
  • list.hoverBackground#060d06
  • list.inactiveSelectionBackground#cccccc10
  • list.warningForeground#ff8533
  • menu.background#060d06
  • menu.foreground#f2f2f2
  • menu.selectionBackground#66ff66
  • menu.selectionForeground#f2f2f2
  • menubar.selectionBackground#66ff66
  • menubar.selectionForeground#f2f2f2
  • notificationCenter.border#66ff66
  • notificationCenterHeader.background#060d06
  • notificationCenterHeader.foreground#f2f2f2
  • notifications.background#060d06
  • notifications.border#66ff66
  • notifications.foreground#f2f2f2
  • notificationToast.border#66ff66
  • panel.background#081108
  • panel.border#66ff66
  • panelInput.border#66ff66
  • panelSectionHeader.background#060d06
  • panelSectionHeader.border#66ff66
  • panelSectionHeader.foreground#f2f2f2
  • panelTitle.activeBorder#66ff66
  • panelTitle.activeForeground#f2f2f2
  • panelTitle.inactiveForeground#cccccc
  • peekView.border#00ff00
  • peekViewEditor.background#002c00
  • peekViewEditor.matchHighlightBackground#6b728025
  • peekViewResult.background#001a00
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#cccccc
  • peekViewResult.matchHighlightBackground#6b728025
  • peekViewResult.selectionBackground#003f00
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#003f00
  • peekViewTitleDescription.foreground#cccccc
  • peekViewTitleLabel.foreground#ffffff
  • quickInput.background#060d06
  • quickInput.foreground#f2f2f2
  • quickInputList.focusBackground#6b728025
  • quickInputList.focusForeground#f2f2f2
  • quickInputList.focusIconForeground#f2f2f2
  • quickInputTitle.background#66ff66
  • scrollbar.shadow#060d06
  • scrollbarSlider.activeBackground#66ff66
  • scrollbarSlider.background#66ff6680
  • scrollbarSlider.hoverBackground#66ff6680
  • searchEditor.findMatchBorder#66ff66
  • settings.headerForeground#f2f2f2
  • settings.modifiedItemIndicator#ff6600
  • sideBar.background#060d06
  • sideBar.border#66ff66
  • sideBar.foreground#f2f2f2
  • sideBarSectionHeader.background#050a05
  • sideBarSectionHeader.foreground#f2f2f2
  • sideBarTitle.foreground#f2f2f2
  • statusBar.background#060d06
  • statusBar.border#66ff66
  • statusBar.foreground#f2f2f2
  • statusBarItem.hoverBackground#66ff66
  • statusBarItem.remoteBackground#66ff66
  • statusBarItem.remoteForeground#060d06
  • tab.activeBackground#081108
  • tab.activeBorder#66ff66
  • tab.activeForeground#f2f2f2
  • tab.border#66ff66
  • tab.inactiveBackground#060d06
  • tab.inactiveForeground#cccccc
  • tab.inactiveModifiedBorder#66ff66
  • terminal.ansiBlack#060d06
  • terminal.ansiBlue#00cccc
  • terminal.ansiBrightBlack#081108
  • terminal.ansiBrightBlue#00ffff
  • terminal.ansiBrightCyan#00ffff
  • terminal.ansiBrightGreen#66ff66
  • terminal.ansiBrightMagenta#33ff33
  • terminal.ansiBrightRed#ff6666
  • terminal.ansiBrightWhite#f2f2f2
  • terminal.ansiBrightYellow#ff8533
  • terminal.ansiCyan#00cccc
  • terminal.ansiGreen#00ff00
  • terminal.ansiMagenta#00cc00
  • terminal.ansiRed#ff0000
  • terminal.ansiWhite#f2f2f2
  • terminal.ansiYellow#ff6600
  • terminal.background#050a05
  • terminal.findMatchBackground#ff660080
  • terminal.findMatchHighlightBackground#6b728025
  • terminal.foreground#f2f2f2
  • terminal.selectionBackground#66ff6680
  • terminalCursor.background#66ff66
  • terminalCursor.foreground#050a05
  • titleBar.activeBackground#060d06
  • titleBar.activeForeground#f2f2f2
  • titleBar.border#66ff66
  • titleBar.inactiveBackground#060d06
  • 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#84fc84
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#77ff7d
keyword.control.import, keyword.control.include, meta.import, meta.include#14ff14
entity.name.function.decorator, punctuation.decorator, storage.type.annotation.java#ffd700
entity.name.label#00ff00italic
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#14ff14italic
storage.modifier.access, storage.modifier.java, storage.modifier.cpp#66ff66
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#66ff66bold
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#66ff66
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#66ff66bold
markup.table.markdown, punctuation.separator.table-cell.markdown, punctuation.section.table-header.markdown#34d399
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