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.activeBorder#D45500
  • activityBar.background#f0ece8
  • activityBar.border#e2dbd3
  • activityBar.foreground#D45500
  • activityBar.inactiveForeground#9a938b
  • activityBarBadge.background#D45500
  • activityBarBadge.foreground#ffffff
  • badge.background#D45500
  • badge.foreground#ffffff
  • breadcrumb.background#f7f5f2
  • breadcrumb.focusForeground#2c2c2c
  • breadcrumb.foreground#7a7570
  • button.background#D45500
  • button.foreground#ffffff
  • button.hoverBackground#B84A00
  • button.secondaryBackground#eae5e0
  • button.secondaryForeground#3a3a3a
  • contrastBorder#00000000
  • descriptionForeground#7a7570
  • diffEditor.insertedTextBackground#3a8c3a18
  • diffEditor.removedTextBackground#c41a0018
  • dropdown.background#faf8f6
  • dropdown.border#d5cec5
  • dropdown.foreground#2c2c2c
  • editor.background#f7f5f2
  • editor.findMatchBackground#d4550035
  • editor.findMatchBorder#D45500
  • editor.findMatchHighlightBackground#d4550020
  • editor.foldBackground#eee9e380
  • editor.foreground#2c2c2c
  • editor.lineHighlightBackground#eee9e3
  • editor.lineHighlightBorder#e2dbd3
  • editor.selectionBackground#d4550030
  • editor.selectionHighlightBackground#d4550018
  • editor.wordHighlightBackground#d4550025
  • editor.wordHighlightStrongBackground#d4550030
  • editorBracketHighlight.foreground1#B85C00
  • editorBracketHighlight.foreground2#2E7DAF
  • editorBracketHighlight.foreground3#3A8C3A
  • editorBracketHighlight.foreground4#8A5EB0
  • editorBracketHighlight.foreground5#C04A40
  • editorBracketHighlight.foreground6#997A00
  • editorBracketHighlight.unexpectedBracket.foreground#C41A00
  • editorBracketMatch.background#d4550020
  • editorBracketMatch.border#D45500
  • editorCodeLens.foreground#9a938b80
  • editorCursor.foreground#D45500
  • editorError.foreground#C41A00
  • editorGutter.addedBackground#3A8C3A
  • editorGutter.background#f7f5f2
  • editorGutter.deletedBackground#C41A00
  • editorGutter.modifiedBackground#2E7DAF
  • editorHoverWidget.background#faf8f6
  • editorHoverWidget.border#e2dbd3
  • editorIndentGuide.activeBackground1#D45500
  • editorIndentGuide.background1#d5cec540
  • editorInfo.foreground#2E7DAF
  • editorInlayHint.background#d4550012
  • editorInlayHint.foreground#5a5550b0
  • editorLineNumber.activeForeground#D45500
  • editorLineNumber.foreground#a09a92
  • editorOverviewRuler.border#e2dbd3
  • editorRuler.foreground#d5cec530
  • editorSuggestWidget.background#faf8f6
  • editorSuggestWidget.border#e2dbd3
  • editorSuggestWidget.foreground#3a3a3a
  • editorSuggestWidget.highlightForeground#D45500
  • editorSuggestWidget.selectedBackground#eee9e3
  • editorWarning.foreground#997A00
  • editorWhitespace.foreground#d5cec560
  • editorWidget.background#faf8f6
  • editorWidget.border#e2dbd3
  • errorForeground#C41A00
  • errorLens.errorForeground#C41A00
  • errorLens.hintForeground#2E7DAF
  • errorLens.infoForeground#2E7DAF
  • errorLens.warningForeground#997A00
  • focusBorder#d4550060
  • foreground#3a3a3a
  • gitDecoration.addedResourceForeground#3A8C3A
  • gitDecoration.conflictingResourceForeground#997A00
  • gitDecoration.deletedResourceForeground#C41A00
  • gitDecoration.ignoredResourceForeground#a09a92
  • gitDecoration.modifiedResourceForeground#2E7DAF
  • gitDecoration.untrackedResourceForeground#3A8C3A
  • icon.foreground#5a5550a0
  • input.background#faf8f6
  • input.border#d5cec5
  • input.foreground#2c2c2c
  • input.placeholderForeground#9a938b
  • inputOption.activeBackground#d4550020
  • inputOption.activeBorder#D45500
  • inputOption.activeForeground#2c2c2c
  • list.activeSelectionBackground#d4550018
  • list.activeSelectionForeground#2c2c2c
  • list.errorForeground#C41A00
  • list.highlightForeground#D45500
  • list.hoverBackground#eee9e380
  • list.hoverForeground#2c2c2c
  • list.inactiveSelectionBackground#eee9e360
  • list.warningForeground#997A00
  • menu.background#faf8f6
  • menu.border#e2dbd3
  • menu.foreground#3a3a3a
  • menu.selectionForeground#2c2c2c
  • menu.separatorBackground#e2dbd3
  • minimap.background#f7f5f2
  • minimap.errorHighlight#C41A00
  • minimap.selectionHighlight#d4550040
  • minimap.warningHighlight#997A00
  • notificationCenterHeader.background#faf8f6
  • notifications.background#faf8f6
  • notifications.border#e2dbd3
  • notifications.foreground#3a3a3a
  • notificationsErrorIcon.foreground#C41A00
  • notificationsInfoIcon.foreground#2E7DAF
  • notificationsWarningIcon.foreground#997A00
  • panel.background#f0ece8
  • panel.border#e2dbd3
  • panelTitle.activeBorder#D45500
  • panelTitle.activeForeground#2c2c2c
  • panelTitle.inactiveForeground#9a938b
  • peekView.border#D45500
  • peekViewEditor.background#faf8f6
  • peekViewResult.background#f0ece8
  • peekViewTitle.background#faf8f6
  • progressBar.background#D45500
  • quickInput.background#faf8f6
  • quickInput.foreground#2c2c2c
  • quickInputList.focusBackground#d4550018
  • quickInputList.focusForeground#2c2c2c
  • scrollbar.shadow#00000015
  • scrollbarSlider.activeBackground#d4550040
  • scrollbarSlider.background#3a3a3a15
  • scrollbarSlider.hoverBackground#3a3a3a25
  • selection.background#d4550020
  • settings.headerForeground#2c2c2c
  • settings.modifiedItemIndicator#D45500
  • sideBar.background#f0ece8
  • sideBar.border#e2dbd3
  • sideBar.foreground#4a4540
  • sideBarSectionHeader.background#f0ece8
  • sideBarSectionHeader.border#e2dbd3
  • sideBarSectionHeader.foreground#2c2c2c
  • sideBarTitle.foreground#9a938b
  • statusBar.background#f0ece8
  • statusBar.border#e2dbd3
  • statusBar.debuggingBackground#d4550020
  • statusBar.debuggingForeground#2c2c2c
  • statusBar.foreground#7a7570
  • statusBar.noFolderBackground#f0ece8
  • statusBarItem.activeBackground#d4550018
  • statusBarItem.errorBackground#C41A00
  • statusBarItem.errorForeground#ffffff
  • statusBarItem.hoverBackground#eee9e3
  • statusBarItem.remoteBackground#D45500
  • statusBarItem.remoteForeground#ffffff
  • statusBarItem.warningBackground#997A00
  • statusBarItem.warningForeground#ffffff
  • tab.activeBackground#f7f5f2
  • tab.activeBorderTop#D45500
  • tab.activeForeground#2c2c2c
  • tab.border#e2dbd3
  • tab.hoverBackground#f7f5f2
  • tab.inactiveBackground#f0ece8
  • tab.inactiveForeground#9a938b
  • terminal.ansiBlack#2c2c2c
  • terminal.ansiBlue#2E7DAF
  • terminal.ansiBrightBlack#7a7570
  • terminal.ansiBrightBlue#4A96C8
  • terminal.ansiBrightCyan#3A9E9E
  • terminal.ansiBrightGreen#4DA84D
  • terminal.ansiBrightMagenta#9A6EBF
  • terminal.ansiBrightRed#E0422D
  • terminal.ansiBrightWhite#2c2c2c
  • terminal.ansiBrightYellow#B89500
  • terminal.ansiCyan#2B8585
  • terminal.ansiGreen#3A8C3A
  • terminal.ansiMagenta#8A5EB0
  • terminal.ansiRed#C41A00
  • terminal.ansiWhite#f7f5f2
  • terminal.ansiYellow#997A00
  • terminal.background#f0ece8
  • terminal.foreground#2c2c2c
  • titleBar.activeBackground#eae5e0
  • titleBar.activeForeground#3a3a3a
  • titleBar.border#e2dbd3
  • titleBar.inactiveBackground#eae5e0
  • titleBar.inactiveForeground#9a938b
  • widget.shadow#00000018

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9a938bitalic
string#3A8C3A—
constant.numeric#B85C00—
constant.language, constant.other#C04A40—
keyword.operator#4a4540—
storage.type, storage.modifier#2B8585—
support.function#2E7DAF—
comment.line, comment.line.semicolon.krl, comment.line.ampersand.krl, comment.line.bug.krl, comment.line.fixme.krl, comment.line.hack.krl, comment.line.note.krl, comment.line.todo.krl#9a938bitalic
comment.line.fold.krl, meta.fold.krl, keyword.control.fold.krl#8a9060italic
keyword.control.krl#D45500bold
keyword.function.movement.krl#2E7DAFbold
storage.type.krl, storage.type.interrupt.krl, storage.type.trigger.krl#2B8585italic
variable.language.system.krl#C41A00
constant.numeric.krl, constant.numeric.hex.krl, constant.numeric.binary.krl#B85C00—
string.quoted.double.krl#3A8C3A—
variable.function.krl#2E7DAF—
constant.language.enum.krl, variable.other.enummember.krl#C04A40—
support.function.builtin.krl#2E7DAF—
keyword.operator.krl, keyword.operator.comparison.krl, keyword.operator.arithmetic.krl, keyword.operator.bitwise.krl, keyword.operator.logical.krl#4a4540—