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#263b4c
  • activityBarBadge.background#7f9f7f
  • activityBarBadge.foreground#313633
  • badge.foreground#313633
  • breadcrumb.focusForeground#9e8f68
  • breadcrumbPicker.background#162b3c
  • button.background#566b7c
  • button.foreground#162b3c
  • checkbox.background#162b3c
  • dropdown.background#162b3c
  • editor.background#061b2c
  • editor.foreground#dedede
  • editor.lineHighlightBackground#162b3c
  • editor.selectionBackground#263b4c
  • editor.wordHighlightBackground#465b6ca0
  • editorBracketHighlight.foreground1#cc9393
  • editorBracketHighlight.foreground2#8cd0d3
  • editorBracketHighlight.foreground3#f0dfaf
  • editorCursor.foreground#8cd0d3
  • editorError.foreground#cc9393
  • editorGroupHeader.tabsBackground#061b2c
  • editorGutter.addedBackground#87ae86
  • editorGutter.deletedBackground#cc9393
  • editorGutter.modifiedBackground#e7c4a1
  • editorInfo.foreground#8cd0d388
  • editorLineNumber.activeForeground#9e8f68
  • editorLineNumber.foreground#90907e
  • editorSuggestWidget.background#162b3c
  • editorSuggestWidget.focusHighlightForeground#87ae86
  • editorSuggestWidget.foreground#dedede
  • editorSuggestWidget.highlightForeground#8cd0d3
  • editorSuggestWidget.selectedBackground#263b4c
  • editorSuggestWidget.selectedForeground#dedede
  • editorSuggestWidget.selectedIconForeground#87ae86
  • editorSuggestWidgetStatus.foreground#dedede
  • editorWarning.foreground#e7c4a1
  • editorWhitespace.foreground#a5a5a552
  • editorWidget.background#263b4c
  • editorWidget.border#263b4c
  • focusBorder#8cd0d344
  • gitDecoration.addedResourceForeground#87ae86
  • gitDecoration.conflictingResourceForeground#cc9393
  • gitDecoration.deletedResourceForeground#cc9393
  • gitDecoration.ignoredResourceForeground#7f9f7f
  • gitDecoration.modifiedResourceForeground#e7c4a1
  • gitDecoration.submoduleResourceForeground#e7c4a1
  • gitDecoration.untrackedResourceForeground#87ae86
  • input.background#162b3c
  • list.activeSelectionBackground#263b4c
  • list.highlightForeground#87ae86
  • list.hoverBackground#061b2c
  • list.inactiveSelectionBackground#263b4c
  • multiDiffEditor.headerBackground#263b4c
  • quickInput.background#162b3c
  • quickInput.foreground#dedede
  • quickInputList.focusBackground#263b4c
  • quickInputList.focusForeground#dedede
  • quickInputList.focusIconForeground#3f3f3f
  • selection.background#8383839c
  • sideBar.background#162b3c
  • statusBar.background#566b7c
  • statusBar.foreground#061b2c
  • statusBar.noFolderBackground#566b7c
  • statusBarItem.remoteBackground#061b2c
  • statusBarItem.remoteForeground#566b7c
  • tab.activeForeground#dcdccc
  • tab.inactiveBackground#263b4c
  • terminal.ansiBlue#8cd0d3
  • terminal.ansiBrightBlue#8cd0d3
  • terminal.ansiBrightCyan#8cd0d3
  • terminal.ansiBrightGreen#7f9f7f
  • terminal.ansiBrightMagenta#dca3a3
  • terminal.ansiBrightRed#ecbcbc
  • terminal.ansiBrightYellow#f0dfaf
  • terminal.ansiCyan#8cd0d3
  • terminal.ansiGreen#7f9f7f
  • terminal.ansiMagenta#dca3a3
  • terminal.ansiRed#ecbcbc
  • terminal.ansiYellow#f0dfaf
  • terminal.foreground#dcdccc
  • terminal.selectionBackground#686868aa
  • textLink.activeForeground#82a282
  • textLink.foreground#8cd0d3
  • titleBar.activeBackground#263b4c
  • titleBar.inactiveBackground#263b4c

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.boldbold
markup.italicitalic
meta.link.inline.description.markdownunderline
markup.italic markup.bold | markup.bold markup.italicbold italic
markup.underline markup.bold | markup.bold markup.underlinebold underline
markup.underline markup.italic | markup.italic markup.underlineitalic 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.boldbold italic underline
meta.diff, meta.diff.header#E3CEAB
markup.deleted#CFBFAF
markup.inserted#EFDCBCbold
markup.changed#FFCFAF
message.error#CC9393
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6