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#191919
  • activityBar.foreground#FF6A86
  • activityBar.inactiveForeground#5D5D5D
  • activityBarBadge.background#DD2F4F
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF5977
  • badge.foreground#FFFFFF
  • breadcrumb.foreground#B0B0B0
  • button.background#FF2950
  • button.hoverBackground#FF4B6C
  • debugIcon.breakpointCurrentStackframeForeground#79b8ff
  • debugIcon.breakpointDisabledForeground#848484
  • debugIcon.breakpointForeground#FF7A84
  • debugIcon.breakpointStackframeForeground#79b8ff
  • debugIcon.breakpointUnverifiedForeground#848484
  • debugIcon.continueForeground#FF7A84
  • debugIcon.disconnectForeground#FF7A84
  • debugIcon.pauseForeground#FF7A84
  • debugIcon.restartForeground#79b8ff
  • debugIcon.startForeground#79b8ff
  • debugIcon.stepBackForeground#FF7A84
  • debugIcon.stepIntoForeground#FF7A84
  • debugIcon.stepOutForeground#FF7A84
  • debugIcon.stepOverForeground#FF7A84
  • debugIcon.stopForeground#79b8ff
  • diffEditor.insertedTextBackground#3a632a4b
  • diffEditor.removedTextBackground#88063852
  • editor.background#202020
  • editor.findMatchHighlightBorder#ffffff30
  • editor.lineHighlightBackground#00000050
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#343434
  • editorCursor.foreground#FF6A86
  • editorGroupHeader.tabsBackground#191919
  • editorGroupHeader.tabsBorder#191919
  • editorIndentGuide.activeBackground#383838
  • editorIndentGuide.activeBackground1#d9b97470
  • editorIndentGuide.background#4c4c4c
  • editorIndentGuide.background1#42424270
  • editorLineNumber.activeForeground#ffffffdd
  • editorLineNumber.foreground#5B5B5B
  • editorRuler.foreground#2A2A2A
  • editorSuggestWidget.background#191919
  • editorSuggestWidget.selectedBackground#2A2A2A
  • focusBorder#404040
  • foreground#E1E1E1
  • gitDecoration.ignoredResourceForeground#848484
  • input.border#ffffff10
  • input.foreground#E1E1E1
  • inputOption.activeBackground#3A3A3A
  • inputOption.activeBorder#eeffff30
  • list.activeSelectionBackground#242424
  • list.activeSelectionForeground#F3F3F3
  • list.focusBackground#1A1A1A
  • list.highlightForeground#EAEAEA
  • list.hoverBackground#252525
  • list.hoverForeground#F3F3F3
  • list.inactiveSelectionBackground#202020
  • list.inactiveSelectionForeground#F3F3F3
  • menu.background#212121
  • menu.foreground#999999
  • menu.selectionBackground#2A2A2A
  • menu.separatorBackground#ffffff25
  • menubar.selectionForeground#F3F3F3
  • panelTitle.activeBorder#FFB3C1
  • panelTitle.activeForeground#F5F5F5
  • panelTitle.inactiveForeground#858585
  • peekView.border#444
  • peekViewEditor.background#ffffff10
  • peekViewResult.background#ffffff10
  • pickerGroup.border#363636
  • pickerGroup.foreground#EAEAEA
  • progressBar.background#FFB3C1
  • quickInput.foreground#999999
  • quickInputList.focusBackground#1A1A1A
  • scrollbar.shadow#1f1f1f
  • scrollbarSlider.activeBackground#4E4E4E
  • scrollbarSlider.background#eeffff20
  • selection.background#535353
  • settings.headerForeground#F3F3F3
  • settings.modifiedItemIndicator#FF8097
  • sideBar.background#1A1A1A
  • sideBar.foreground#9F9F9F
  • sideBarSectionHeader.background#202020
  • statusBar.background#191919
  • statusBar.debuggingBackground#1A1A1A
  • statusBar.foreground#B0B0B0
  • statusBar.noFolderBackground#1A1A1A
  • statusBarItem.prominentBackground#fafafa1a
  • statusBarItem.remoteBackground#DD2F4F
  • statusBarItem.remoteForeground#FFFFFF
  • symbolIcon.classForeground#FF9800
  • symbolIcon.constructorForeground#b392f0
  • symbolIcon.enumeratorForeground#FF9800
  • symbolIcon.enumeratorMemberForeground#79b8ff
  • symbolIcon.eventForeground#FF9800
  • symbolIcon.fieldForeground#79b8ff
  • symbolIcon.functionForeground#b392f0
  • symbolIcon.interfaceForeground#79b8ff
  • symbolIcon.methodForeground#b392f0
  • symbolIcon.variableForeground#79b8ff
  • tab.activeBackground#ffffff12
  • tab.activeBorder#E1E1E1
  • tab.activeForeground#F3F3F3
  • tab.activeModifiedBorder#676767
  • tab.border#212121
  • tab.hoverForeground#D3D3D3
  • tab.inactiveBackground#1A1A1A
  • tab.inactiveForeground#767676
  • terminal.ansiBlack#FFFFFF
  • terminal.ansiBlue#2472C8
  • terminal.ansiBrightBlack#FFFFFF
  • terminal.ansiBrightBlue#3B8EEA
  • terminal.ansiBrightCyan#26BFE6
  • terminal.ansiBrightGreen#23D68F
  • terminal.ansiBrightMagenta#D670D6
  • terminal.ansiBrightRed#FC5050
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#F8F848
  • terminal.ansiCyan#16ABD0
  • terminal.ansiGreen#0DBC79
  • terminal.ansiMagenta#AC38AC
  • terminal.ansiRed#C62D2D
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#EBEB13
  • terminalCursor.background#FFFFFF
  • terminalCursor.foreground#B32942
  • textLink.activeForeground#fafafa
  • textLink.foreground#5690d3
  • titleBar.activeBackground#1A1A1A
  • titleBar.activeForeground#ffffff80
  • titleBar.border#00000000
  • widget.border#ffffff09

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source.c, meta.block.c, meta.block.kotlin, source.python, source.ruby, source.rust, source.scala, source.sql#E6E6E6—
text.html.derivative#E6E6E6—
entity.name.tag#FF6A86—
entity.other.attribute-name#D495FF—
variable.css, support.constant.property-value, meta.property-value#E6E6E6—
keyword, keyword.control, keyword.other, storage, storage.type, storage.modifier, storage.control, keyword.declaration, keyword.operator.new#FF6A86—
string, string.quoted, string.template, string.regexp#A6E567—
constant.numeric, constant.other#FBCF68—
constant.language, constant.language.null, constant.language.nil#50E7A9—
entity.name.type, entity.name.class, support.type, support.class#D495FF—
entity.name.function, entity.name.function.member, support.function, entity.global, entity.other.attribute, entity.name.scope-resolution, meta.function-call.generic#D495FF—
variable.other.constant, variable.other.readwrite, variable.other.assignment, variable.other.definition.java, variable.other.definition.cs, variable.other.readwrite.python, variable.other.readwrite.ruby, variable.other.readwrite.java, variable.other.readwrite.cs, variable.other.object.java, variable.other.object.cs, meta.method.body, meta.body.class, entity.name.variable.local, entity.name.variable.parameter, variable.other.value, meta.body.function.definition, variable.other.object.access, variable.volatile.declaration, variable.other.rust, variable.other.go, variable.other.object.js, variable.other.php, variable.other.lua, support.constant.core, meta.symbol#E6E6E6—
punctuation.terminator.expression, punctuation.section.embedded.begin, punctuation.separator.key-value, punctuation.terminator.expression, punctuation.terminator.statement, punctuation.terminator.statement, punctuation.separator.delimiter, meta.member.access, punctuation.brackets.angle, punctuation.comma, punctuation.semi, punctuation.section.function.begin, punctuation.separator.parameters, punctuation.terminator, punctuation.separator.period, punctuation.separator.element, punctuation.separator.dict, punctuation.definition.tag.begin, punctuation.definition.tag.end#BBBBBB—
constant.keyword, variable.other.property, variable.other.member, variable.other.object.property, entity.name.variable.field, entity.name.variable.property, support.variable.property, variable.other.field.java, variable.other.field.cs, variable.other.readwrite.instance, variable.other.readwrite.class.ruby, meta.attribute.python, support.variable.magic.python, variable.language.self, meta.object.member, support.function.misc#6ABAFF—
variable.parameter, variable.parameter.python, variable.parameter.js, variable.parameter.ts, variable.parameter.java, variable.parameter.cs, variable.parameter.go, entity.name.variable.receiver.go#FFA375—
variable.language.this, variable.language.this.js, variable.language.this.java, variable.language.self.ruby, variable.language.special.self.python#D495FF—
variable.other.property.go, variable.other.member.go, entity.name.struct.field.go#6ABAFF—
constant.language.nil.go, constant.language.null.go#50E7A9—
comment, string.quoted.docstring.multi#838589—
meta.paragraph.markdown#E6E6E6—
markup.underline.link.image, markup.underline.link#8DCAFF—
entity.name.section#FBCF68—
markup.bold.markdown#FFB895—
markup.italic.markdown#DFB0FF—
punctuation.definition.link.description.begin, punctuation.definition.link.description.end, punctuation.definition.metadata, punctuation.definition.link.title.begin, punctuation.definition.link.title.end#BBBBBB—
emphasis, markup.italic.markdown—italic