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.activeBorder#0084C6
  • activityBar.background#FAFAFA
  • activityBar.border#eaeaea
  • activityBar.foreground#0084C6
  • activityBar.inactiveForeground#56627f94
  • activityBarBadge.background#0084C6
  • activityBarBadge.foreground#F7F7F7
  • badge.background#0084C6
  • badge.foreground#F7F7F7
  • breadcrumb.activeSelectionForeground#444444
  • breadcrumb.focusForeground#444444
  • breadcrumb.foreground#717171
  • button.background#0084C6
  • button.secondaryBackground#50990b
  • checkbox.border#DBDBDB
  • debugConsole.errorForeground#E92148
  • debugConsole.infoForeground#0084C6
  • debugConsole.warningForeground#EB6606
  • debugIcon.breakpointForeground#E92148
  • debugIcon.pauseForeground#0084C6
  • debugIcon.restartForeground#EB6606
  • debugIcon.stopForeground#E92148
  • debugToolBar.background#FAFAFA
  • descriptionForeground#444444
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#FAFAFA
  • dropdown.border#E6E6E6
  • editor.background#ffffff
  • editor.findMatchBackground#ce8bb970
  • editor.findMatchHighlightBackground#abbad760
  • editor.findRangeHighlightBackground#abbad760
  • editor.foreground#444444
  • editor.lineHighlightBackground#f0f2f4
  • editor.rangeHighlightBackground#f0f2f4
  • editor.selectionBackground#DBE9F9
  • editor.wordHighlightBackground#56678634
  • editor.wordHighlightStrongBackground#abbad760
  • editorBracketMatch.background#dedede
  • editorBracketMatch.border#d4d4d4
  • editorCursor.background#333333c9
  • editorCursor.foreground#444444
  • editorError.foreground#E92148
  • editorGroup.border#ffffff
  • editorGroup.dropBackground#d4d4d462
  • editorGroupHeader.tabsBackground#FAFAFA
  • editorGutter.addedBackground#EB6606
  • editorGutter.deletedBackground#E92148
  • editorGutter.modifiedBackground#0084C6
  • editorHoverWidget.background#FAFAFA
  • editorHoverWidget.border#DBDBDB
  • editorHoverWidget.highlightForeground#EB6606
  • editorIndentGuide.activeBackground#E6E6E6
  • editorIndentGuide.background#E6E6E6
  • editorInfo.foreground#0084C6
  • editorInlayHint.background#E6E6E6
  • editorInlayHint.foreground#444444
  • editorLineNumber.activeForeground#444444
  • editorLineNumber.foreground#a8a8a8
  • editorMarkerNavigation.background#F7F7F7
  • editorRuler.foreground#44444426
  • editorSuggestWidget.background#FAFAFA
  • editorSuggestWidget.border#DBDBDB
  • editorSuggestWidget.selectedBackground#E6E6E6
  • editorWarning.foreground#EB6606
  • editorWhitespace.foreground#E6E6E6
  • editorWidget.background#FAFAFA
  • editorWidget.resizeBorder#DBDBDB
  • errorForeground#E92148
  • extensionButton.prominentBackground#0084C6
  • extensionButton.prominentForeground#F7F7F7
  • extensionButton.prominentHoverBackground#0084C6
  • extensionIcon.preReleaseForeground#6F42C1
  • extensionIcon.starForeground#EE9A16
  • extensionIcon.verifiedForeground#0084C6
  • focusBorder#d4d4d4
  • gitDecoration.addedResourceForeground#EB6606
  • gitDecoration.conflictingResourceForeground#EB6606
  • gitDecoration.deletedResourceForeground#E92148
  • gitDecoration.ignoredResourceForeground#717171
  • gitDecoration.modifiedResourceForeground#0084C6
  • gitDecoration.renamedResourceForeground#50990B
  • gitDecoration.stageDeletedResourceForeground#E92148
  • gitDecoration.stageModifiedResourceForeground#0084C6
  • gitDecoration.submoduleResourceForeground#6F42C1
  • gitDecoration.untrackedResourceForeground#73C991
  • input.background#F0F0F0
  • input.border#DBDBDB
  • inputOption.activeBackground#FAFAFA
  • inputOption.activeBorder#DBDBDB
  • inputOption.hoverBackground#FAFAFA
  • inputValidation.errorBackground#FAFAFA
  • inputValidation.errorBorder#E92148
  • inputValidation.errorForeground#E92148
  • inputValidation.infoBackground#FAFAFA
  • inputValidation.infoBorder#0084C6
  • inputValidation.infoForeground#0084C6
  • inputValidation.warningBackground#FAFAFA
  • inputValidation.warningBorder#EB6606
  • inputValidation.warningForeground#EB6606
  • list.activeSelectionBackground#F0F0F0
  • list.activeSelectionForeground#333
  • list.dropBackground#d4d4d462
  • list.focusBackground#F0F0F0
  • list.focusForeground#333
  • list.highlightForeground#0084C6
  • list.hoverBackground#F0F0F0
  • list.hoverForeground#333333
  • list.inactiveSelectionBackground#F0F0F0
  • list.inactiveSelectionForeground#333
  • list.warningForeground#EB6606
  • menu.foreground#444444
  • menu.separatorBackground#eaeaea
  • minimap.selectionHighlight#e6e6e6
  • minimapGutter.addedBackground#EB6606
  • minimapGutter.deletedBackground#E92148
  • minimapGutter.modifiedBackground#0084C6
  • notificationCenter.border#DBDBDB
  • notificationCenterHeader.background#FAFAFA
  • notifications.background#FAFAFA
  • notifications.border#DBDBDB
  • notificationToast.border#DBDBDB
  • panelSection.dropBackground#d4d4d462
  • panelSectionHeader.background#F7F7F7
  • panelTitle.activeBorder#0084C6
  • peekView.border#0084C6
  • peekViewEditor.background#F7F7F7
  • peekViewEditor.matchHighlightBackground#abbad760
  • peekViewResult.background#F7F7F7
  • peekViewResult.fileForeground#444444
  • peekViewResult.lineForeground#BBBBBB
  • peekViewResult.matchHighlightBackground#DBDBDB
  • peekViewResult.selectionBackground#FAFAFA
  • peekViewResult.selectionForeground#333333
  • peekViewTitle.background#FAFAFA
  • peekViewTitleLabel.foreground#0084C6
  • pickerGroup.border#DBDBDB
  • pickerGroup.foreground#0084C6
  • progressBar.background#0084C6
  • quickInput.background#FAFAFA
  • quickInput.foreground#444444
  • scrollbar.shadow#6a737d33
  • scrollbarSlider.activeBackground#959da588
  • scrollbarSlider.background#959da533
  • scrollbarSlider.hoverBackground#959da544
  • selection.background#DBE9F9
  • settings.dropdownBackground#FAFAFA
  • settings.dropdownBorder#DBDBDB
  • settings.focusedRowBackground#F0F0F0
  • settings.focusedRowBorder#DBDBDB
  • settings.headerForeground#333333
  • settings.modifiedItemIndicator#0084C6
  • settings.numberInputBackground#FAFAFA
  • settings.rowHoverBackground#F0F0F0
  • settings.textInputBackground#FAFAFA
  • sideBar.background#FAFAFA
  • sideBar.border#eaeaea
  • sideBar.dropBackground#d4d4d462
  • sideBar.foreground#444444
  • sideBarSectionHeader.background#efefef
  • sideBarSectionHeader.border#ececec
  • sideBarSectionHeader.foreground#0084C6
  • sideBarTitle.foreground#444444
  • statusBar.background#FAFAFA
  • statusBar.border#eaeaea
  • statusBar.debuggingBackground#BC3A3A
  • statusBar.debuggingBorder#ffffff
  • statusBar.debuggingForeground#333333
  • statusBar.foreground#777777
  • statusBar.noFolderBackground#FAFAFA
  • statusBarItem.activeBackground#ddd
  • statusBarItem.hoverBackground#F0F0F0
  • statusBarItem.remoteBackground#39a350
  • statusBarItem.remoteForeground#333333
  • tab.activeBackground#ffffff
  • tab.activeBorderTop#0084C6
  • tab.activeForeground#333333
  • tab.border#eaeaea
  • tab.hoverBackground#f0f0f0
  • tab.inactiveBackground#f7f6f6
  • tab.inactiveForeground#888888
  • tab.unfocusedHoverBackground#F7F7F7
  • terminal.ansiBlack#F7F7F7
  • terminal.ansiBlue#EB6606
  • terminal.ansiBrightBlack#F7F7F7
  • terminal.ansiBrightBlue#EB6606
  • terminal.ansiBrightCyan#0084C6
  • terminal.ansiBrightGreen#50990B
  • terminal.ansiBrightMagenta#6F42C1
  • terminal.ansiBrightRed#E92148
  • terminal.ansiBrightWhite#444444
  • terminal.ansiBrightYellow#50990B
  • terminal.ansiCyan#0084C6
  • terminal.ansiGreen#50990B
  • terminal.ansiMagenta#6F42C1
  • terminal.ansiRed#E92148
  • terminal.ansiWhite#444444
  • terminal.ansiYellow#50990B
  • terminal.background#f9f9f9
  • terminal.border#DBDBDB
  • terminal.dropBackground#d4d4d462
  • terminal.foreground#444444
  • terminal.selectionBackground#DBE9F9
  • terminal.tab.activeBorder#0084C6
  • textBlockQuote.background#E6E6E6
  • textBlockQuote.border#d4d4d4
  • textLink.activeForeground#0084C6
  • textLink.foreground#0084C6
  • textPreformat.foreground#50990b
  • titleBar.activeBackground#FAFAFA
  • titleBar.activeForeground#444444
  • titleBar.border#eaeaea
  • titleBar.inactiveBackground#FAFAFA
  • titleBar.inactiveForeground#919191
  • toolbar.hoverBackground#E6E6E6
  • tree.indentGuidesStroke#DBDBDB
  • walkThrough.embeddedEditorBackground#E6E6E6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#444444
emphasisitalic
strongbold
comment#999999
constant.language#d443ad
constant.numeric, keyword.operator.plus.exponent, keyword.operator.minus.exponent, entity.other.keyframe-offset.percentage.css#d443ad
keyword.other.unit#d443ad
constant.regexp#004ca9
entity.name.tag#6F42C1
entity.other.attribute-name#0084c6
entity.other.attribute-name.html, entity.other.attribute-name.id.htmlitalic
meta.attribute.href.html string
entity.name.tag.css#6F42C1
entity.other.attribute-name.parent-selector.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#d443ad
entity.other.attribute-name.class.mixin.css#50990b
entity.other.attribute-name.id.css, meta.attribute.id.html string, meta.attribute-with-value.id.html, meta.toc-list.id.html, meta.attribute-with-value.id.html punctuation.definition.string#EB6606
entity.other.attribute-name.class.css, meta.attribute.class.html string#50990b
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, entity.name.tag.custom.css#0084c6
keyword.other.important.css, keyword.other.default.scss, keyword.other.important.scss#E92148
Invalid#E92148
markup.underline, markup.underline.link.markdown#0084c6
string.other.link.title.markdown, string.other.link.description.markdown, constant.other.reference.link.markdown#6F42C1
markup.bold#E92148bold
markup.italic#EB6606italic
markup.bold.markdown markup.italic.markdown#EB6606italic bold
heading.1.markdown#1bbb8ebold
markup.heading#50990bbold
markup.inserted#d443ad
markup.deleted#EE9A16
markup.changed#6F42C1
punctuation.definition.quote.begin.markdown, markup.quote.markdown#6695c2italic
punctuation.definition.list.begin.markdown#0084c6
markup.inline.raw#EE9A16
fenced_code.block.language.markdown, fenced_code.block.language#d443adbold italic
markup.fenced_code.block.markdown#444444
punctuation.definition.tag#7387a0
punctuation.parenthesis, punctuation.accessor, punctuation.definition.interpolation, punctuation.separator.key-value, punctuation.section.parens, punctuation.definition.parameters, punctuation.definition.block, meta.brace.round, meta.brace.square, punctuation.separator.comma, punctuation.terminator.statement, punctuation.definition.bracket, punctuation.definition.begin.bracket, punctuation.definition.end.bracket, punctuation.other.comma, punctuation.separator, punctuation.bracket.round, punctuation.brackets, punctuation.section, punctuation.definition.arguments, punctuation.definition.list, punctuation.semi, punctuation.definition.attribute, text.html.vue-html meta.tag.block.any.html#444444
entity.name.function.preprocessor, entity.name.function.macro#2cab88
keyword.preprocessor, meta.preprocessor punctuation.separator.hash, keyword.control.directive#004ca9
entity.other.attribute-name.pragma#444444
meta.preprocessor.string#EE9A16
meta.preprocessor.numeric#d443ad
meta.structure.dictionary.key.python#444444
meta.diff.header#6F42C1
storage#6F42C1
storage.type#6F42C1
storage.modifier, keyword.operator.noexcept#6F42C1
string, meta.embedded.assembly#EE9A16
string.tag#EE9A16
string.value#EE9A16
string.regexp#EB6606
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#6F42C1
meta.template.expression#444444
support.type.vendored.property-name, support.type.property-name, source.coffee.embedded#4a6486
variable.argument.css, variable.css, variable.scss, variable.other.less#444444
keyword#6F42C1
keyword.operator#5c7db3
keyword.operator.assignment
variable.other.constant, variable.other.enummember, support.constant, constant.other#004ca9
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike#6F42C1
punctuation.definition.arrow.php, storage.type.function.arrow#6F42C1
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#6F42C1
support.function.git-rebase#444444
constant.sha.git-rebase#d443ad
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#444444
variable.language, variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python#6F42C1
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal, meta.function-call.generic#50990b
meta.return-type, support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#0084c6
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#0084c6
support.class.component#2cab88
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#E92148
keyword.control.at-rule.media#6F42C1
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#444444
support.variable.magic.python#2cab88
variable.parameter, entity.name.variable.parameter#EB6606
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#EE9A16
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#444444
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#EB6606
keyword.operator.or.regexp, keyword.control.anchor.regexp#E92148
keyword.operator.quantifier.regexp#50990b
constant.character#6F42C1
constant.character.escape#50990b
entity.name.label#444444
meta.object-literal.key, variable.other.property#4F6B92

Shiki preview

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

Loading...

Adonis Theme - Coding Theme