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#e5e5e6
  • activityBar.border#a0a1a7
  • activityBar.foreground#383a42
  • activityBarBadge.background#268bd2
  • activityBarBadge.foreground#f6f8fb
  • badge.background#268bd2
  • badge.foreground#f6f8fb
  • button.background#268bd2
  • button.foreground#f2f3f7
  • button.hoverBackground#3c9be0
  • chat.requestBackground#b9c0c7
  • dropdown.background#f2f3f7
  • dropdown.border#a0a1a7
  • dropdown.foreground#383a42
  • editor.background#f2f3f7
  • editor.foreground#383a42
  • editor.lineHighlightBackground#e5e5e650
  • editor.selectionBackground#e5e5e6
  • editor.selectionHighlightBackground#e5e5e680
  • editorCursor.foreground#383a42
  • editorGroup.border#93a1a1
  • editorGroupHeader.tabsBackground#e5e5e6
  • editorGroupHeader.tabsBorder#93a1a1
  • editorHoverWidget.background#f2f3f7
  • editorHoverWidget.border#93a1a1
  • editorLineNumber.activeForeground#383a42
  • editorLineNumber.foreground#a0a1a7
  • editorWidget.background#f2f3f7
  • editorWidget.border#93a1a1
  • gitDecoration.conflictingResourceForeground#d33682
  • gitDecoration.deletedResourceForeground#dc322f
  • gitDecoration.ignoredResourceForeground#93a1a1
  • gitDecoration.modifiedResourceForeground#b58900
  • gitDecoration.untrackedResourceForeground#859900
  • input.background#f2f3f7
  • input.border#a0a1a7
  • input.foreground#383a42
  • input.placeholderForeground#a0a1a7
  • inputOption.activeBorder#268bd2
  • list.activeSelectionBackground#ccd2d8
  • list.activeSelectionForeground#1e1f21
  • list.focusBackground#f2f3f7
  • list.hoverBackground#f2f3f780
  • list.inactiveSelectionBackground#f2f3f7
  • list.inactiveSelectionForeground#657b83
  • menu.background#f2f3f7
  • menu.foreground#383a42
  • menu.selectionBackground#e5e5e6
  • menu.selectionForeground#383a42
  • menubar.selectionBackground#93a1a1
  • menubar.selectionForeground#002b36
  • merge.currentContentBackground#85990020
  • merge.currentHeaderBackground#85990050
  • merge.incomingContentBackground#268bd220
  • merge.incomingHeaderBackground#268bd250
  • minimap.background#f2f3f7
  • minimapSlider.activeBackground#93a1a190
  • minimapSlider.background#93a1a150
  • minimapSlider.hoverBackground#93a1a170
  • panel.background#f2f3f7
  • panel.border#93a1a1
  • panelTitle.activeForeground#657b83
  • panelTitle.inactiveForeground#93a1a1
  • peekView.border#268bd2
  • peekViewEditor.background#f6f8fb
  • peekViewResult.background#f2f3f7
  • peekViewTitle.background#93a1a1
  • progressBar.background#268bd2
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#93a1a190
  • scrollbarSlider.background#93a1a150
  • scrollbarSlider.hoverBackground#93a1a170
  • sideBar.background#e5e5e6
  • sideBar.border#a0a1a7
  • sideBar.foreground#383a42
  • sideBarSectionHeader.background#e5e5e6
  • sideBarSectionHeader.foreground#383a42
  • sideBarTitle.foreground#383a42
  • statusBar.background#e5e5e6
  • statusBar.border#839496
  • statusBar.foreground#002b36
  • statusBar.noFolderBackground#e5e5e6
  • statusBarItem.hoverBackground#839496
  • tab.activeBackground#f6f8fb
  • tab.activeBorder#268bd2
  • tab.activeForeground#657b83
  • tab.border#93a1a1
  • tab.inactiveBackground#e5e5e6
  • tab.inactiveForeground#93a1a1
  • terminal.ansiBlack#002b36
  • terminal.ansiBlue#268bd2
  • terminal.ansiBrightBlack#073642
  • terminal.ansiBrightBlue#839496
  • terminal.ansiBrightCyan#93a1a1
  • terminal.ansiBrightGreen#586e75
  • terminal.ansiBrightMagenta#6c71c4
  • terminal.ansiBrightRed#cb4b16
  • terminal.ansiBrightWhite#f6f8fb
  • terminal.ansiBrightYellow#657b83
  • terminal.ansiCyan#2aa198
  • terminal.ansiGreen#859900
  • terminal.ansiMagenta#d33682
  • terminal.ansiRed#dc322f
  • terminal.ansiWhite#f2f3f7
  • terminal.ansiYellow#b58900
  • terminal.background#f6f8fb
  • terminal.foreground#657b83
  • titleBar.activeBackground#e5e5e6
  • titleBar.activeForeground#383a42
  • titleBar.border#a0a1a7
  • titleBar.inactiveBackground#e5e5e6
  • titleBar.inactiveForeground#a0a1a7

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#a0a1a7italic
keyword, storage.type, storage.modifier#ae26a4
string, punctuation.definition.string#50a14f
constant.numeric#ea7249
constant.language.boolean#ea7249
constant.language.null#ea7249
constant.language.undefined#ea7249
variable, support.variable#383a42
variable.parameter#6A7E8A
entity.name.function, support.function#4078f3
entity.name.class, support.class, entity.name.type#b17202
entity.name.function.member#4078f3
variable.other.property, support.variable.property#383a42
keyword.operator#ae26a4
punctuation#586e75
entity.name.tag#268bd2
entity.other.attribute-name#b58900
support.type.property-name.css#268bd2
support.constant.property-value.css, constant.other.color.rgb-value.css#2aa198
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#268bd2
support.type.property-name.json#268bd2
string.quoted.double.json#2aa198
markup.heading#268bd2
markup.bold#b58900
markup.italic#d33682italic
markup.inline.raw, markup.fenced_code#2aa198
markup.underline.link#268bd2underline
invalid, invalid.illegal#dc322f
invalid.deprecated#cb4b16
constant, support.constant#ea7249
support#6c71c4
support.function#4078f3
support.class#c18401
entity.name.namespace, entity.name.scope-resolution#2a7a98

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Atom One Cyan - Coding Theme