Skip to main content
Coding Theme

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#ddd
  • activityBar.border#0003
  • activityBar.foreground#232731
  • activityBarBadge.foreground#eee
  • badge.background#aaa
  • contrastBorder#0003
  • editor.background#fff
  • editor.foreground#232731
  • editor.inactiveSelectionBackground#0003
  • editor.lineHighlightBackground#f9f9f9
  • editor.selectionBackground#e5e5e5
  • editor.selectionHighlightBackground#ea13
  • editorError.foreground#ff0000
  • editorGroup.border#0003
  • editorGroupHeader.noTabsBackground#f9f9f9
  • editorGroupHeader.tabsBackground#eee
  • editorGroupHeader.tabsBorder#0003
  • editorGutter.addedBackground#007c23
  • editorGutter.background#fff
  • editorGutter.deletedBackground#800
  • editorGutter.modifiedBackground#005faf
  • editorIndentGuide.activeBackground#0006
  • editorIndentGuide.background#0002
  • editorInfo.foreground#05a
  • editorLightBulb.foreground#cd9731
  • editorLightBulbAutoFix.foreground#cd9731
  • editorLineNumber.activeForeground#000
  • editorLineNumber.foreground#aaa
  • editorSuggestWidget.background#eee
  • editorWarning.foreground#cd9731
  • editorWidget.background#eee
  • editorWidget.border#0003
  • input.placeholderForeground#aaa
  • list.activeSelectionBackground#ddd
  • list.activeSelectionForeground#232731
  • list.focusBackground#ddd
  • list.highlightForeground#005faf
  • list.hoverBackground#0001
  • list.inactiveSelectionBackground#ddd
  • list.inactiveSelectionForeground#232731
  • list.invalidItemForeground#b89500
  • notificationsErrorIcon.foreground#ff0000
  • notificationsInfoIcon.foreground#cd9731
  • notificationsWarningIcon.foreground#05a
  • notificationToast.border#0003
  • panel.background#fff
  • peekViewEditor.background#eee
  • problemsErrorIcon.foreground#ff0000
  • problemsInfoIcon.foreground#05a
  • problemsWarningIcon.foreground#cd9731
  • quickInputList.focusBackground#0002
  • scrollbarSlider.background#0003
  • sideBar.background#eee
  • sideBar.border#0003
  • sideBarTitle.foreground#555
  • statusBar.background#ddd
  • statusBar.border#0003
  • statusBar.debuggingBackground#ea1
  • statusBar.debuggingForeground#642
  • statusBar.foreground#555
  • statusBar.noFolderBackground#f9f9f9
  • symbolIcon.classForeground#708
  • symbolIcon.constructorForeground#05a
  • symbolIcon.enumeratorForeground#05a
  • symbolIcon.enumeratorMemberForeground#05a
  • symbolIcon.fieldForeground#05a
  • symbolIcon.functionForeground#05a
  • symbolIcon.interfaceForeground#708
  • symbolIcon.keywordForeground#232731
  • symbolIcon.methodForeground#05a
  • symbolIcon.moduleForeground#708
  • symbolIcon.namespaceForeground#708
  • symbolIcon.referenceForeground#05a
  • symbolIcon.snippetForeground#232731
  • symbolIcon.unitForeground#232731
  • symbolIcon.variableForeground#05a
  • tab.activeBackground#fff
  • tab.activeForeground#333
  • tab.border#0003
  • tab.inactiveBackground#eee
  • terminal.ansiBlack#3b4252
  • terminal.ansiBlue#81a1c1
  • terminal.ansiBrightBlack#4c566a
  • terminal.ansiBrightBlue#81a1c1
  • terminal.ansiBrightCyan#8fbcbb
  • terminal.ansiBrightGreen#a3be8c
  • terminal.ansiBrightMagenta#b48ead
  • terminal.ansiBrightRed#bf616a
  • terminal.ansiBrightWhite#eceff4
  • terminal.ansiBrightYellow#ebcb8b
  • terminal.ansiCyan#88c0d0
  • terminal.ansiGreen#a3be8c
  • terminal.ansiMagenta#b48ead
  • terminal.ansiRed#bf616a
  • terminal.ansiWhite#e5e9f0
  • terminal.ansiYellow#ebcb8b
  • terminal.background#232731
  • terminal.foreground#d8dee9
  • titleBar.activeBackground#ddd
  • titleBar.activeForeground#333
  • titleBar.border#0003
  • titleBar.inactiveBackground#eee
  • titleBar.inactiveForeground#bbb
  • widget.shadow#0003

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#858585italic
comment.block.preprocessor#858585italic
comment.documentation, comment.block.documentation, string.quoted.docstring#858585italic
invalid#e24747strikethrough
invalid.deprecated#e24747strikethrough
invalid.illegal#e24747strikethrough
keyword.operator, punctuation.separator.pointer-access.c, punctuation.separator.pointer-access.cpp#232731bold
keyword.operator.expression.in, keyword.operator.expression.instanceof, keyword.operator.expression.of, keyword.operator.expression.typeof, keyword.operator.logical.python, keyword.operator.new, keyword, punctuation.separator.colon.python, storage.modifier, storage.type.function, storage.type#232731bold
punctuation.separator.key-value, punctuation.separator.dictionary#232731bold
storage.type.annotation.groovy, storage.type.annotation.java, storage.type.boolean.go, storage.type.byte.go, storage.type.cs, storage.type.generic.cs, storage.type.generic.groovy, storage.type.generic.java, storage.type.groovy, storage.type.java, storage.type.modifier.cs, storage.type.numeric.go, storage.type.object.array.groovy, storage.type.object.array.java, storage.type.parameters.groovy, storage.type.primitive.array.groovy, storage.type.primitive.array.java, storage.type.primitive.groovy, storage.type.primitive.java, storage.type.string.go, storage.type.token.java, storage.type.uintptr.go, storage.type.variable.cs#05a
meta.function.decoratoritalic
constant.language, support.constant, variable.language#085
variable, support.variable#232731
entity.name.function, meta.function-call, punctuation.decorator, support.function#708
entity.name.class, entity.name.type, entity.other.inherited-class, meta.return-type, support.class#708
entity.name.exception#800
entity.name.sectionbold
constant#085
constant.character, constant.numeric#085
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end, string#800
constant.character.escape#05a
constant.other.placeholder, meta.embedded.line#05a
string.regexp#AB6526
constant.other.symbol#AB6526
string source, text source
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#085
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#4d4d4d
entity.name.tag#085
entity.other.attribute-name.html, meta.tag entity.other.attribute-name#05a
constant.character.entity, punctuation.definition.entity#800
meta.object-literal.key, meta.property-name, punctuation.support.type.property-name, support.type.property-name#05a
meta.property-value, meta.property-value constant.other, support.constant.property-value#800
entity.name.tag.css, entity.other.attribute-name, meta.selector entity punctuation, meta.selector entity, meta.selector, punctuation.definition.entity.css#232731bold
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element#232731italic
keyword.other.unit.rem.css, keyword.other.unit.vh.css, keyword.other.unit.vw.css, keyword.other.unit.px.css, keyword.other.unit.em.css, keyword.other.unit.deg.css, keyword.other.unit.percentage.css, punctuation.definition.constant#085
keyword.other.importantbold
constant.other.color.rgb-value.hex#085
source.js string.template punctuation.definition.template-expression#05a
punctuation.definition.directive.c, punctuation.definition.directive.cpp#232731bold
markup.changed#000000
markup.deleted#000000
markup.italicitalic
markup.error#600
markup.inserted#000000
meta.link#05a
markup.output, markup.raw#777
markup.prompt#777
markup.heading, punctuation.definition.heading.markdown#800bold
markup.bold, punctuation.definition.bold.markdown#085bold
markup.traceback#600
markup.underlineunderline
markup.quote#7A3E9D
markup.list#232731
markup.italic, punctuation.definition.italic#05A
markup.inline.raw, punctuation.definition.raw.markdown#800
meta.diff.header.git#05a
meta.diff.range, meta.diff.index, meta.separator#232731bold
meta.diff.header.from-file#232731bold
meta.diff.header.to-file#232731bold
markup.deleted.diff, punctuation.definition.deleted#800
markup.inserted.diff, punctuation.definition.inserted#085
punctuation.definition.block.tag.jsdoc, punctuation.definition.inline.tag.jsdoc#05a
Nollåtta by Oleksii Shytikov - VS Code Theme