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#1F2430
  • activityBar.background#1F2430
  • activityBar.border#1F2430
  • activityBar.foreground#68B57B
  • activityBar.inactiveForeground#ffffff35
  • activityBarBadge.background#68B57B
  • activityBarBadge.foreground#232837
  • breadcrumb.activeSelectionForeground#68B57B95
  • breadcrumb.background#1F2430
  • breadcrumb.focusForeground#68B57B90
  • breadcrumb.foreground#cbd0d6CC
  • breadcrumbPicker.background#1F2430
  • button.background#68B57B85
  • button.foreground#dff2e7
  • button.hoverBackground#68B57B95
  • button.secondaryBackground#68B57B85
  • button.secondaryHoverBackground#68B57B95
  • debugIcon.breakpointConditionalForeground#cbd0d6CC
  • debugIcon.breakpointDisabledForeground#ffffff50
  • debugIcon.breakpointForeground#cbd0d6CC
  • debugIcon.breakpointLogpointForeground#cbd0d6CC
  • debugIcon.breakpointUnverifiedForeground#ffffff50
  • debugIcon.continueForeground#cbd0d6CC
  • debugIcon.currentFrameForeground#cbd0d6CC
  • debugIcon.disconnectForeground#d18f8f
  • debugIcon.inactiveForeground#ffffff50
  • debugIcon.pauseForeground#cbd0d6CC
  • debugIcon.restartForeground#cbd0d6CC
  • debugIcon.startForeground#cbd0d6CC
  • debugIcon.stepBackForeground#cbd0d6CC
  • debugIcon.stepIntoForeground#cbd0d6CC
  • debugIcon.stepOutForeground#cbd0d6CC
  • debugIcon.stepOverForeground#cbd0d6CC
  • debugIcon.stopForeground#d18f8f
  • debugToolbar.background#1F2430
  • debugToolbar.border#1F2430
  • diffEditor.insertedTextBackground#68B57B22
  • diffEditor.removedTextBackground#d18f8f22
  • editor.background#1F2430
  • editor.findMatchBackground#68B57B60
  • editor.findMatchHighlightBackground#68B57B30
  • editor.foreground#cbd0d6CC
  • editor.selectionBackground#68B57B40
  • editor.selectionHighlightBackground#68B57B30
  • editor.wordHighlightBackground#68B57B25
  • editor.wordHighlightStrongBackground#68B57B35
  • editorBracketHighlight.foreground1#68B57B
  • editorBracketHighlight.foreground2#d7a180
  • editorBracketHighlight.foreground3#b1ffcf
  • editorBracketMatch.background#ffffff10
  • editorBracketMatch.border#68B57B
  • editorCodeLens.foreground#ffffff50
  • editorGroup.border#1D222E
  • editorGroupHeader.border#1F2430
  • editorGroupHeader.dropBackground#242424
  • editorGroupHeader.noTabsBackground#1F2430
  • editorGroupHeader.tabsBackground#1F2430
  • editorGroupHeader.tabsBorder#242424
  • editorGutter.addedBackground#68B57B55
  • editorGutter.background#1F2430
  • editorGutter.deletedBackground#d18f8f55
  • editorGutter.modifiedBackground#68B57B75
  • editorInlayHint.background#242424
  • editorInlayHint.foreground#cbd0d6CC
  • editorLightBulb.foreground#cbd0d6CC
  • editorLineNumber.activeForeground#68B57B75
  • editorLineNumber.foreground#ffffff35
  • editorOverviewRuler.background#1F2430
  • editorOverviewRuler.border#1F2430
  • editorWhitespace.foreground#222734
  • editorWidget.background#1F2430
  • editorWidget.foreground#cbd0d6CC
  • editorWidget.resizeBorder#1F2430
  • focusBorder#1F2430
  • gitDecoration.addedResourceForeground#b1ffcf90
  • gitDecoration.deletedResourceForeground#d18f8f
  • gitDecoration.modifiedResourceForeground#b1ffcf90
  • gitDecoration.renamedResourceForeground#68B57B90
  • gitDecoration.untrackedResourceForeground#b1ffcf90
  • icon.foreground#cbd0d6CC
  • input.background#232837
  • input.border#181b23
  • input.foreground#cbd0d6CC
  • list.activeSelectionBackground#68B57B95
  • list.activeSelectionForeground#cde2d6
  • list.activeSelectionIconForeground#cde2d6
  • list.dropBackground#1F2430
  • list.focusBackground#1F2430
  • list.focusForeground#cbd0d6CC
  • list.highlightForeground#68B57B
  • list.hoverBackground#232837
  • list.hoverForeground#68B57B
  • list.inactiveSelectionBackground#68B57B85
  • list.inactiveSelectionForeground#cde2d6
  • list.inactiveSelectionIconForeground#cde2d6
  • menu.background#1F2430
  • menu.foreground#cbd0d6CC
  • menu.selectionBackground#68B57B
  • menu.selectionForeground#232837
  • menu.separatorBackground#68B57B
  • menubar.background#1F2430
  • menubar.foreground#cbd0d6CC
  • menubar.selectionBackground#68B57B
  • menubar.selectionBorder#68B57B
  • menubar.selectionForeground#232837
  • minimap.selectionHighlight#68B57B55
  • notification.background#1F2430
  • notification.buttonBackground#68B57B
  • notification.buttonForeground#232837
  • notification.buttonHoverBackground#68B57B90
  • notification.foreground#cbd0d6CC
  • panel.background#1F2430
  • panel.border#1F2430
  • panelTitle.activeForeground#68B57B
  • panelTitle.inactiveForeground#ffffff35
  • peekViewEditor.background#1F2430
  • peekViewEditor.matchHighlightBackground#68B57B
  • peekViewResult.background#1F2430
  • peekViewResult.matchHighlightBackground#68B57B
  • pickerGroup.border#00000000
  • pickerGroup.foreground#68B57B
  • problemsErrorIcon.foreground#d18f8f
  • problemsInfoIcon.foreground#cbd0d6CC
  • problemsWarningIcon.foreground#d4af73
  • progressBar.background#68B57B55
  • quickInputList.focusForeground#dff2e7
  • quickInputList.focusIconForeground#dff2e7
  • scrollbar.shadow#1F2430
  • scrollbarSlider.activeBackground#68B57B55
  • scrollbarSlider.background#68B57B55
  • scrollbarSlider.hoverBackground#68B57B55
  • selection.background#68B57B
  • sideBar.background#1F2430
  • sideBar.border#1D222E
  • sideBar.foreground#cbd0d6CC
  • sideBarSectionHeader.background#1F2430
  • sideBarSectionHeader.foreground#cbd0d6CC
  • sideBarTitle.foreground#cbd0d6CC
  • sideBySideEditor.horizontalBorderColor#1F2430
  • sideBySideEditor.verticalBorder#1F2430
  • statusBar.background#1F2430
  • statusBar.debuggingBackground#457057
  • statusBar.debuggingForeground#b3cabd
  • statusBar.foreground#ffffff35
  • statusBar.noFolderBackground#1F2430
  • statusBarItem.hoverForeground#b3cabd
  • statusBarItem.remoteBackground#1F2430
  • statusBarItem.remoteForeground#b1ffcf
  • tab.activeBackground#1F2430
  • tab.activeBorder#68B57B45
  • tab.activeForeground#cbd0d6CC
  • tab.border#1F2430
  • tab.inactiveBackground#1F2430
  • tab.inactiveForeground#ffffff35
  • tab.unfocusedActiveBorder#68B57B45
  • tab.unfocusedActiveForeground#cbd0d6CC
  • tab.unfocusedForeground#ffffff50
  • terminal.ansiBlack#1F2430
  • terminal.ansiBlue#72c6e8
  • terminal.ansiBrightBlack#546E7A
  • terminal.ansiBrightBlue#82AAFF
  • terminal.ansiBrightCyan#89DDFF
  • terminal.ansiBrightGreen#b1ffcf
  • terminal.ansiBrightMagenta#C792EA
  • terminal.ansiBrightRed#FF5370
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#e5c07b
  • terminal.ansiCyan#89DDFF
  • terminal.ansiGreen#68B57B
  • terminal.ansiMagenta#c96eea
  • terminal.ansiRed#e06c75
  • terminal.ansiWhite#cbd0d6CC
  • terminal.ansiYellow#d4af73
  • terminal.background#1F2430
  • terminal.foreground#cbd0d6CC
  • terminalCursor.foreground#68B57B
  • textLink.activeForeground#d7a180
  • textLink.foreground#b1ffcf90
  • titleBar.activeBackground#1F2430
  • titleBar.activeForeground#cbd0d6CC
  • titleBar.border#00000000
  • toolbar.hoverBackground#68B57B55
  • tree.indentGuidesStroke#68B57B55
  • welcomePage.background#1F2430
  • widget.border#00000000
  • window.activeBorder#1F2430
  • window.inactiveBorder#1F2430

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5c6370italic
keyword, storage.type, storage.modifier#c96eea
support.type, entity.name.type, entity.name.type.interface, entity.name.type.struct#e5c07b
entity.name.function, meta.function-call, variable.function, support.function#72c6e8italic
variable, identifier, variable.parameter#e9d7a6
constant.numeric, constant.language, support.constant, constant.character, constant.boolean#d19a66
string, constant.other.symbol#98C379
support.function, support.class, support.other.package#e5c07b
keyword.operator, punctuation#56b6c2
variable.other.field#e9d7a6
invalid, invalid.illegal#e06c75
entity.name.tag#e06c75
entity.other.attribute-name#c96eeaitalic
entity.other.attribute-name, JSXAttribute, meta.jsx.attribute, meta.tsx.attribute#E5C07Bitalic
entity.name.type.class.jsx, entity.name.type.class.tsx, support.class.component.jsx, support.class.component.tsx#E5C07Bitalic
entity.other.attribute-name.class.css, entity.other.attribute-name.class.scss#c96eea
support.constant.property-value.css, support.constant.property-value.scss#FFB454
support.type.property-name.css, support.type.property-name.scss#72c6e8italic
text.html.derivative#ffffff85italic
punctuation.definition.heading.markdown, markup.heading.markdown, markup.italic.markdown, markup.inline.raw.markdown#e06c75italic
entity.name.section.markdown#98C379
variable.language.this.tsx, variable.language.this.jsx, variable.language.this.ts, variable.language.this.js, punctuation.accessor.tsx, punctuation.accessor.jsx, punctuation.accessor.ts, punctuation.accessor.js#98C379