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#434c5e
  • activityBar.foreground#dedede
  • activityBarBadge.background#7f9f7f
  • activityBarBadge.foreground#313633
  • badge.background#7f9f7f
  • badge.foreground#313633
  • breadcrumb.focusForeground#9e8f68
  • breadcrumbPicker.background#3b4252
  • button.background#566b7c
  • button.foreground#dedede
  • checkbox.background#3b4252
  • dropdown.background#3b4252
  • editor.background#2e3440
  • editor.foreground#dedede
  • editor.lineHighlightBackground#3b4252
  • editor.selectionBackground#8cd0d340
  • editor.wordHighlightBackground#465b6ca0
  • editorBracketHighlight.foreground1#cc9393
  • editorBracketHighlight.foreground2#8cd0d3
  • editorBracketHighlight.foreground3#f0dfaf
  • editorBracketHighlight.foreground4#87ae86
  • editorBracketHighlight.foreground5#dc8cc3
  • editorBracketHighlight.foreground6#dfaf8f
  • editorBracketHighlight.unexpectedBracket.foreground#e37170
  • editorCursor.foreground#8cd0d3
  • editorError.foreground#cc9393
  • editorGroupHeader.tabsBackground#2e3440
  • editorGutter.addedBackground#87ae86
  • editorGutter.deletedBackground#cc9393
  • editorGutter.modifiedBackground#e7c4a1
  • editorHoverWidget.background#3b4252
  • editorHoverWidget.border#434c5e
  • editorHoverWidget.foreground#dedede
  • editorInfo.foreground#8cd0d388
  • editorLineNumber.activeForeground#9e8f68
  • editorLineNumber.foreground#90907e
  • editorSuggestWidget.background#3b4252
  • editorSuggestWidget.focusHighlightForeground#87ae86
  • editorSuggestWidget.foreground#dedede
  • editorSuggestWidget.highlightForeground#8cd0d3
  • editorSuggestWidget.selectedBackground#434c5e
  • editorSuggestWidget.selectedForeground#dedede
  • editorSuggestWidget.selectedIconForeground#87ae86
  • editorSuggestWidgetStatus.foreground#dedede
  • editorWarning.foreground#e7c4a1
  • editorWhitespace.foreground#a5a5a552
  • editorWidget.background#434c5e
  • editorWidget.border#434c5e
  • focusBorder#8cd0d388
  • foreground#dedede
  • gitDecoration.addedResourceForeground#87ae86
  • gitDecoration.conflictingResourceForeground#cc9393
  • gitDecoration.deletedResourceForeground#cc9393
  • gitDecoration.ignoredResourceForeground#616e88
  • gitDecoration.modifiedResourceForeground#e7c4a1
  • gitDecoration.submoduleResourceForeground#e7c4a1
  • gitDecoration.untrackedResourceForeground#87ae86
  • input.background#3b4252
  • input.border#434c5e
  • input.foreground#dedede
  • input.placeholderForeground#616e88
  • list.activeSelectionBackground#434c5e
  • list.focusBackground#434c5e
  • list.highlightForeground#87ae86
  • list.hoverBackground#2e3440
  • list.inactiveSelectionBackground#434c5e
  • menu.background#3b4252
  • menu.border#434c5e
  • menu.foreground#dedede
  • menu.selectionBackground#434c5e
  • menu.selectionForeground#dedede
  • menu.separatorBackground#434c5e
  • multiDiffEditor.headerBackground#434c5e
  • notifications.background#3b4252
  • notifications.border#434c5e
  • notifications.foreground#dedede
  • notificationsErrorIcon.foreground#cc9393
  • notificationsInfoIcon.foreground#8cd0d3
  • notificationsWarningIcon.foreground#e7c4a1
  • panel.background#2e3440
  • panel.border#434c5e
  • panelTitle.activeForeground#dedede
  • panelTitle.inactiveForeground#616e88
  • quickInput.background#3b4252
  • quickInput.foreground#dedede
  • quickInputList.focusBackground#434c5e
  • quickInputList.focusForeground#dedede
  • quickInputList.focusIconForeground#3f3f3f
  • scrollbarSlider.activeBackground#4c566acc
  • scrollbarSlider.background#434c5e88
  • scrollbarSlider.hoverBackground#4c566aaa
  • selection.background#8383839c
  • sideBar.background#3b4252
  • sideBar.foreground#d8dee9
  • sideBarSectionHeader.background#434c5e
  • statusBar.background#4c566a
  • statusBar.foreground#d8dee9
  • statusBar.noFolderBackground#4c566a
  • statusBarItem.remoteBackground#d8dee9
  • statusBarItem.remoteForeground#4c566a
  • tab.activeBackground#2e3440
  • tab.activeBorderTop#7f9f7f
  • tab.activeForeground#dcdccc
  • tab.inactiveBackground#434c5e
  • terminal.ansiBlack#2e3440
  • terminal.ansiBlue#94bff3
  • terminal.ansiBrightBlack#4c566a
  • terminal.ansiBrightBlue#b0d0f0
  • terminal.ansiBrightCyan#93e0e3
  • terminal.ansiBrightGreen#87ae86
  • terminal.ansiBrightMagenta#ec93d3
  • terminal.ansiBrightRed#ecbcbc
  • terminal.ansiBrightWhite#f0efd0
  • terminal.ansiBrightYellow#efef8f
  • terminal.ansiCyan#8cd0d3
  • terminal.ansiGreen#7f9f7f
  • terminal.ansiMagenta#dc8cc3
  • terminal.ansiRed#cc9393
  • terminal.ansiWhite#dedede
  • terminal.ansiYellow#f0dfaf
  • terminal.foreground#dcdccc
  • terminal.selectionBackground#686868aa
  • textLink.activeForeground#82a282
  • textLink.foreground#8cd0d3
  • titleBar.activeBackground#2e3440
  • titleBar.activeForeground#d8dee9
  • titleBar.inactiveBackground#2e3440
  • titleBar.inactiveForeground#616e88
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7F9F7F—
constant.language, support.constant, constant.other.color, entity.name.type.variant.ocaml, source.rust variable.language.rust, support.type.rust, source.elixir constant.other.symbol.elixir, source.elixir constant.other.symbol.elixir punctuation.definition.constant.elixir, source.elixir variable.language.elixir, source.elixir constant.other.keywords.elixir, source.ruby constant.other.symbol, source.ruby punctuation.definition.constant#DCA3A3bold
string, punctuation.definition.string.begin, punctuation.definition.string.end#CC9393—
constant.character, source.scss keyword.operator.ampersand, source.css keyword.operator.ampersand#DCA3A3bold
constant.numeric, storage.type.numeric, source.scss keyword.other.unit, source.css keyword.other.unit#8CD0D3—
constant.language.boolean#DCA3A3—
meta.number.float.decimal constant.numeric, punctuation.separator.decimal, markup.underline.link#C0BED1—
source.scss variable.declaration, source.scss punctuation.definition.variable, source.css variable.declaration, source.css punctuation.definition.variable, support.class.js, keyword.operator.word.new.js, variable.other.php, variable.parameter.php, variable.language.php, meta.function.type-declaration.haskell entity.name.function.haskell, source.haskell meta.name.haskell, entity.name.type.fsharp, punctuation.definition.variable.ruby, variable.other.readwrite.instance.ruby#EFDCBC—
keyword.declaration.function, source.scss support.function, source.css support.function, entity.name.function.c, entity.name.function.preprocessor.c, entity.name.function.c++, entity.name.function.preprocessor.c++, entity.name.function.python, variable.function.python support.function.builtin.python, entity.name.class.python, variable.annotation.python, meta.class.js entity.name.function.constructor.js,support.function.classobj.php, storage.type.function.php, meta.function-call.php support.function, entity.name.function.cs, source.rust meta.function.rust entity.name.function.rust, support.function.rust, entity.name.function.clojure, entity.name.function.elm, source.elixir meta.function.public.elixir entity.name.function.public.elixir, source.java entity.name.function.java, source.sql support.function, source.ruby entity.name.function, meta.definition.method.ts entity.name.function.ts, meta.definition.method.js entity.name.function.js#EFEF8F—
keyword.control.conditional#F0DFAFbold
keyword.control.loop, source.scss keyword.control.flow.sass#FFD7A7bold
keyword.control.conditional.case, keyword.control.conditional.default, source.json meta.mapping.key.json string.quoted.double.json, source.json meta.mapping.key.json string.quoted.double.json punctuation.definition.string.begin.json, source.json meta.mapping.key.json string.quoted.double.json punctuation.definition.string.end.json#DFCFAF—
punctuation.definition, punctuation.section, punctuation.separator, punctuation.terminator - punctuation.definition.numeric.base - keyword.operator#F0EFD0—
keyword, constant.other.keyword.clojure - keyword.operator - keyword.operator.word - keyword.control.flow.return.js - keyword.operator.logical#F0DFAFbold
entity.name.tag, punctuation.definition.list_item, source.shell.bash support.function, keyword.control.flow.return.js, keyword.declaration.function.python, keyword.control.flow.assert.python, keyword.operator.new.cs - keyword.control.import, keyword.control.default, keyword.control.export, keyword.control.from, keyword.control.as, source.sql keyword.other, source.sql keyword.operator.assignment#E3CEABbold
keyword.control.exception.try, keyword.control.exception.catch, text.html.basic entity.name.tag.script, source.cs keyword.control.trycatch#C3BF9Fbold
source.scss entity.other.pseudo-class, source.shell.bash punctuation.definition.variable, source.shell.bash variable.other.readwrite, source.scss meta.function-call.sass variable.function.sass keyword.control.at-rule.sass, entity.other.pseudo-class.css, entity.other.pseudo-element.css, keyword.control.directive.css punctuation.definition.keyword.css, keyword.control.directive.css, comment.block.documentation.phpdoc.php keyword.other.phpdoc.php, source.haskell meta.preprocessor.c, source.haskell punctuation.definition.preprocessor.c, source.haskell meta.preprocessor.haskell#FFCFAF—
keyword.control.import.include, keyword.control.at-rule.import.scss, keyword.control.at-rule.import.scss punctuation.definition.keyword.scss, source.scss meta.function-call.sass variable.function.sass punctuation.definition.keyword.sass, keyword.control.import.js, keyword.control.default.js, keyword.control.export.js, keyword.control.from.js, keyword.control.as.js, keyword.control.import.python, keyword.control.import.from.python, keyword.other.use.php, meta.module-reference.ocaml, support.other.module.ocaml, entity.name.type.module.ocaml, keyword.control.import.haskell, namespace.open.fsharp keyword.fsharp, source.fsharp keyword.control.directive.fsharp, source.cs keyword.control.import.cs, source.go keyword.other.import.go, source.rust meta.path.rust, meta.declaration.module.elm keyword.other.elm, meta.import.elm keyword.other.elm, source.elm meta.import.elm keyword.import.elm, source.java meta.package-declaration.java keyword.other.package.java, source.java meta.import.java keyword.control.import.java#DFAF8Fbold
keyword.control.import.define, meta.preprocessor.macro.c entity.name.constant.preprocessor.c, meta.preprocessor.macro.c++ entity.name.constant.preprocessor.c++, storage.modifier.def.clojure, meta.module.elixir keyword.control.module.elixir, source.ruby keyword.declaration.class, source.ruby keyword.declaration.function, source.ruby keyword.control.block.end#FFCFAF—
support.macro.rust, source.ruby keyword.other.special-method#FFCFAFbold
keyword.control.import.c, meta.preprocessor.c, keyword.control.import.c++, meta.preprocessor.c++#DFAF8Fbold
entity.name.type, support.type, entity.other.attribute-name, storage.type, support.class.builtin, source.scss entity.other, constant.other.haskell, source.haskell meta.import.haskell support.other.module.haskell, source.haskell meta.declaration.module.haskell entity.name.namespace.haskell, abstract.definition.fsharp entity.name.type.fsharp, source.elixir entity.name.type, source.java support.class.java, entity.name.class.ruby, entity.other.inherited-class.ruby, support.class.ruby#DFDFBFbold
storage.modifier, support.type.property-name, abstract.definition.fsharp keyword.fsharp, keyword.declaration, storage.type.js, storage.type.ts#C3BF9Fbold
keyword.declaration.enum, keyword.declaration.struct, keyword.declaration.union, variable.language.this.js, keyword.declaration.type.haskell#EFEFAFbold
constant.character.escape, punctuation.section.interpolation, source.scss keyword.other.important, source.css keyword.other.important, source.scss support.type, source.css support.type, text.html.basic punctuation.definition.entity.html, text.html.basic constant.character.entity.named, text.html.basic punctuation.terminator.entity.html, entity.other.custom-property.css, variable.function.clojure#CFBFAF—
variable.annotation#82A282bold
markup.heading punctuation.definition.heading, punctuation.definition.raw.begin, punctuation.definition.raw.end, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#8F8F8F—
entity.name.section.markdown#EFEFEFbold
keyword.operator.logical#DEDEDEbold
constant.language.import-export-all.js#DEDEDE—
invalid#FFFFFF—
invalid.deprecated#FFFFFF—
markup.bold—bold
markup.italic—italic
meta.link.inline.description.markdown—underline
markup.italic markup.bold | markup.bold markup.italic—bold italic
markup.underline markup.bold | markup.bold markup.underline—bold underline
markup.underline markup.italic | markup.italic markup.underline—italic underline
markup.bold markup.italic markup.underline | markup.bold markup.underline markup.italic | markup.italic markup.bold markup.underline | markup.italic markup.underline markup.bold | markup.underline markup.bold markup.italic | markup.underline markup.italic markup.bold—bold italic underline
meta.diff, meta.diff.header#E3CEAB—
markup.deleted#CFBFAF—
markup.inserted#EFDCBCbold
markup.changed#FFCFAF—
message.error#CC9393—
token.info-token#8CD0D3—
token.warn-token#E7C4A1—
token.error-token#CC9393—
token.debug-token#DCA3A3—
Nordburn by Mark Petruska - VS Code Theme