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.background#03101A
  • activityBar.border#11384A
  • activityBar.foreground#AB7130
  • activityBar.inactiveForeground#9FB9C5
  • activityBarBadge.background#B03C3C
  • activityBarBadge.foreground#061D29
  • badge.background#B03C3C
  • badge.foreground#061D29
  • breadcrumb.activeSelectionForeground#F1DABF
  • breadcrumb.background#081F2C
  • breadcrumb.focusForeground#FF6666
  • breadcrumb.foreground#BDA88F
  • button.background#206383
  • button.foreground#F1DABF
  • button.hoverBackground#2B7AA0
  • button.secondaryBackground#B03C3C
  • button.secondaryForeground#F1DABF
  • button.secondaryHoverBackground#C94747
  • chat.avatarBackground#206383
  • chat.avatarForeground#F1DABF
  • chat.editedFileForeground#68B8C4
  • chat.requestBubbleBackground#0F324466
  • chat.requestBubbleHoverBackground#12405A66
  • chat.slashCommandBackground#5B1B1B66
  • chat.slashCommandForeground#F1DABF
  • debugIcon.breakpointForeground#FF7777
  • debugToolBar.background#0C2A39
  • descriptionForeground#C6B198
  • diffEditor.border#206383
  • diffEditor.insertedTextBackground#4FAF7D33
  • diffEditor.removedTextBackground#FF777733
  • disabledForeground#8B7761
  • dropdown.background#0C2A39
  • dropdown.border#206383
  • dropdown.foreground#F1DABF
  • editor.background#061D29
  • editor.findMatchBackground#AB713099
  • editor.findMatchHighlightBackground#AB713055
  • editor.foreground#FAE090
  • editor.hoverHighlightBackground#20638344
  • editor.inactiveSelectionBackground#20638333
  • editor.lineHighlightBackground#0C2A39
  • editor.selectionBackground#20638366
  • editor.wordHighlightBackground#20638333
  • editor.wordHighlightStrongBackground#AB713044
  • editorBracketHighlight.foreground1#AB7130
  • editorBracketHighlight.foreground2#F1DABF
  • editorBracketHighlight.foreground3#206383
  • editorBracketHighlight.foreground4#FF6666
  • editorBracketHighlight.foreground5#7CA8BF
  • editorBracketHighlight.foreground6#DFAF79
  • editorBracketHighlight.unexpectedBracket.foreground#FF8E7A
  • editorBracketPairGuide.activeBackground1#AB713088
  • editorBracketPairGuide.activeBackground2#F1DABF66
  • editorBracketPairGuide.activeBackground3#20638388
  • editorBracketPairGuide.activeBackground4#FF666688
  • editorBracketPairGuide.activeBackground5#7CA8BF88
  • editorBracketPairGuide.activeBackground6#DFAF7988
  • editorBracketPairGuide.background1#AB713044
  • editorBracketPairGuide.background2#F1DABF33
  • editorBracketPairGuide.background3#20638344
  • editorBracketPairGuide.background4#FF666644
  • editorBracketPairGuide.background5#7CA8BF44
  • editorBracketPairGuide.background6#DFAF7944
  • editorCursor.foreground#FF6666
  • editorError.foreground#FF8E7A
  • editorGroupHeader.tabsBackground#03101A
  • editorGutter.addedBackground#4FAF7D
  • editorGutter.deletedBackground#E07575
  • editorGutter.modifiedBackground#206383
  • editorHint.foreground#8FA8B3
  • editorHoverWidget.background#0C2A39
  • editorHoverWidget.border#206383
  • editorIndentGuide.activeBackground1#AB7130
  • editorIndentGuide.background1#1A3240
  • editorInfo.foreground#68B8C4
  • editorLineNumber.activeForeground#F1DABF
  • editorLineNumber.foreground#3D5B6A
  • editorLink.activeForeground#AB7130
  • editorSuggestWidget.background#0C2A39
  • editorSuggestWidget.border#206383
  • editorSuggestWidget.foreground#F1DABF
  • editorSuggestWidget.highlightForeground#FF6666
  • editorSuggestWidget.selectedBackground#20638366
  • editorWarning.foreground#E7C989
  • editorWhitespace.foreground#1B3642
  • editorWidget.background#0C2A39
  • editorWidget.border#206383
  • errorForeground#FF8E7A
  • focusBorder#AB7130
  • foreground#FAE090
  • gitDecoration.addedResourceForeground#4FAF7D
  • gitDecoration.deletedResourceForeground#FF7777
  • gitDecoration.ignoredResourceForeground#6A7E88
  • gitDecoration.modifiedResourceForeground#68B8C4
  • gitDecoration.untrackedResourceForeground#79D49D
  • inlineChat.background#0C2A39
  • inlineChat.border#AB7130
  • inlineChat.shadow#00000066
  • inlineChatInput.background#0F3244
  • inlineChatInput.border#AB7130
  • input.background#0C2A39
  • input.border#206383
  • input.foreground#F1DABF
  • input.placeholderForeground#8FA8B3
  • inputOption.activeBorder#AB7130
  • inputValidation.errorBorder#AB7130
  • inputValidation.infoBorder#206383
  • inputValidation.warningBorder#AB7130
  • list.activeSelectionBackground#20638366
  • list.activeSelectionForeground#F1DABF
  • list.highlightForeground#FF6666
  • list.hoverBackground#103447
  • list.inactiveSelectionBackground#20638333
  • minimap.background#061D29
  • minimap.errorHighlight#FF7777
  • minimap.findMatchHighlight#AB713099
  • minimap.selectionHighlight#20638399
  • minimap.warningHighlight#D4B06C
  • notificationCenterHeader.background#0C2A39
  • notifications.background#081F2C
  • notifications.border#206383
  • panel.background#081F2C
  • panel.border#11384A
  • panelTitle.activeBorder#CC5555
  • panelTitle.activeForeground#CC5555
  • panelTitle.inactiveForeground#9FB9C5
  • peekView.border#206383
  • peekViewEditor.background#081F2C
  • peekViewEditor.matchHighlightBackground#FF666666
  • peekViewResult.background#081F2C
  • peekViewResult.selectionBackground#20638366
  • peekViewTitle.background#0C2A39
  • progressBar.background#FF6666
  • scrollbarSlider.activeBackground#DFAF79CC
  • scrollbarSlider.background#AB713066
  • scrollbarSlider.hoverBackground#AB713099
  • sideBar.background#081F2C
  • sideBar.border#11384A
  • sideBar.foreground#F1DABF
  • sideBarSectionHeader.background#0C2A39
  • sideBarSectionHeader.border#11384A
  • sideBarSectionHeader.foreground#CC5555
  • sideBarTitle.foreground#CC5555
  • statusBar.background#5B1B1B
  • statusBar.border#11384A
  • statusBar.debuggingBackground#5B1B1B
  • statusBar.debuggingForeground#F1DABF
  • statusBar.foreground#DFAF79
  • statusBar.noFolderBackground#081F2C
  • statusBarItem.hoverBackground#20638366
  • tab.activeBackground#0C2A39
  • tab.activeBorderTop#CC4444
  • tab.activeForeground#FFBBBB
  • tab.border#11384A
  • tab.hoverBackground#103447
  • tab.inactiveBackground#081F2C
  • tab.inactiveForeground#9FB9C5
  • terminal.ansiBlack#0D1C25
  • terminal.ansiBlue#206383
  • terminal.ansiBrightBlack#4A6470
  • terminal.ansiBrightBlue#4D95B6
  • terminal.ansiBrightCyan#8CD2DC
  • terminal.ansiBrightGreen#79D49D
  • terminal.ansiBrightMagenta#D2A4D2
  • terminal.ansiBrightRed#FF8E7A
  • terminal.ansiBrightWhite#F1DABF
  • terminal.ansiBrightYellow#E7C989
  • terminal.ansiCyan#68B8C4
  • terminal.ansiGreen#4FAF7D
  • terminal.ansiMagenta#B184B1
  • terminal.ansiRed#E07575
  • terminal.ansiWhite#E7D1B6
  • terminal.ansiYellow#D4B06C
  • terminal.background#061D29
  • terminal.border#11384A
  • terminal.foreground#F1DABF
  • terminal.selectionBackground#20638366
  • terminalCursor.background#F1DABF
  • terminalCursor.foreground#AB7130
  • testing.iconFailed#FF7777
  • testing.iconPassed#4FAF7D
  • testing.iconQueued#D4B06C
  • titleBar.activeBackground#03101A
  • titleBar.activeForeground#DFAF79
  • titleBar.border#11384A
  • titleBar.inactiveBackground#03101A
  • titleBar.inactiveForeground#9FB9C5
  • tree.indentGuidesStroke#1E3A49

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7CA8BFitalic
keyword, storage, storage.type#FF7777
keyword.control, keyword.operator#FF8888
string, punctuation.definition.string#F1DABF
constant.numeric, constant.language#FF9999
variable, identifier#F1DABF
entity.name.function, support.function#206383
entity.name.type, support.type, entity.name.class#4A95B8
punctuation.definition.block, punctuation.section.block, meta.brace.curly#FF6666
punctuation.squarebracket.open, punctuation.squarebracket.close#206383
punctuation.definition.parameters.begin, punctuation.definition.parameters.end, meta.brace.round#4A95B8
keyword.control.java, storage.modifier.java, storage.type.primitive.java#FF7777
storage.type.java, entity.name.type.class.java, support.class.java#4A95B8
entity.name.function.java, meta.method-call.java#206383
storage.type.annotation.java, punctuation.definition.annotation.java#DFAF79
variable.parameter.java#F1DABF
entity.name.tag.yaml, entity.name.tag, meta.object-literal.key.yaml#206383
string.unquoted.plain.out.yaml, string.quoted.single.yaml, string.quoted.double.yaml#F1DABF
punctuation.separator.key-value.yaml, punctuation.definition.block.sequence.item.yaml#FF6666
constant.other.reference.link.yaml#DFAF79
EKKL3S1A Themes by ekkl3s1a - VS Code Theme