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#7DD5F4
  • activityBar.background#252a33
  • activityBar.border#20252e
  • activityBar.foreground#7DD5F4
  • activityBar.inactiveForeground#a2adc37a
  • activityBarBadge.background#7DD5F4
  • activityBarBadge.foreground#2a2f38
  • badge.background#7DD5F4
  • badge.foreground#2a2f38
  • breadcrumb.activeSelectionForeground#cccccc
  • breadcrumb.focusForeground#cccccc
  • breadcrumb.foreground#71767f
  • button.background#393e47
  • button.secondaryBackground#393e47
  • checkbox.border#434851
  • debugConsole.errorForeground#fa6780
  • debugConsole.infoForeground#7DD5F4
  • debugConsole.warningForeground#FDB772
  • debugIcon.breakpointForeground#fa6780
  • debugIcon.pauseForeground#7DD5F4
  • debugIcon.restartForeground#FDCF79
  • debugIcon.stopForeground#fa6780
  • debugToolBar.background#252a33
  • descriptionForeground#CCCCCC
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#252a33
  • dropdown.border#393e47
  • editor.background#2a2f38
  • editor.findMatchBackground#96668770
  • editor.findMatchHighlightBackground#56678660
  • editor.findRangeHighlightBackground#56678660
  • editor.foreground#CCCCCC
  • editor.lineHighlightBackground#343942
  • editor.rangeHighlightBackground#343942
  • editor.selectionBackground#37435f
  • editor.wordHighlightBackground#56678634
  • editor.wordHighlightStrongBackground#56678660
  • editorBracketMatch.background#4d525b
  • editorBracketMatch.border#4d525b
  • editorCursor.background#ffffffc9
  • editorCursor.foreground#cccccc
  • editorError.foreground#fa6780
  • editorGroup.border#20252e
  • editorGroup.dropBackground#4d525b62
  • editorGroupHeader.tabsBackground#252a33
  • editorGutter.addedBackground#FDCF79
  • editorGutter.deletedBackground#fa6780
  • editorGutter.modifiedBackground#7DD5F4
  • editorHoverWidget.background#252a33
  • editorHoverWidget.border#434851
  • editorHoverWidget.highlightForeground#FDCF79
  • editorIndentGuide.activeBackground#393e47
  • editorIndentGuide.background#393e47
  • editorInfo.foreground#7DD5F4
  • editorInlayHint.background#393e47
  • editorInlayHint.foreground#CCCCCC
  • editorLineNumber.activeForeground#CCCCCC
  • editorLineNumber.foreground#495162
  • editorMarkerNavigation.background#2a2f38
  • editorRuler.foreground#CCCCCC26
  • editorSuggestWidget.background#252a33
  • editorSuggestWidget.border#434851
  • editorSuggestWidget.selectedBackground#393e47
  • editorWarning.foreground#F5A86D
  • editorWhitespace.foreground#393e47
  • editorWidget.background#252a33
  • editorWidget.resizeBorder#434851
  • errorForeground#fa6780
  • extensionButton.background#7DD5F4
  • extensionButton.foreground#202226
  • extensionButton.hoverBackground#28c6ff
  • extensionButton.prominentBackground#7DD5F4
  • extensionButton.prominentForeground#2a2f38
  • extensionButton.prominentHoverBackground#7DD5F4
  • extensionButton.separator#323438
  • extensionIcon.preReleaseForeground#C3A6FD
  • extensionIcon.starForeground#FDCF79
  • extensionIcon.verifiedForeground#7DD5F4
  • focusBorder#4d525b
  • gitDecoration.addedResourceForeground#FDCF79
  • gitDecoration.conflictingResourceForeground#FFB266
  • gitDecoration.deletedResourceForeground#fa6780
  • gitDecoration.ignoredResourceForeground#71767f
  • gitDecoration.modifiedResourceForeground#7DD5F4
  • gitDecoration.renamedResourceForeground#a4d676
  • gitDecoration.stageDeletedResourceForeground#fa6780
  • gitDecoration.stageModifiedResourceForeground#7DD5F4
  • gitDecoration.submoduleResourceForeground#C3A6FD
  • gitDecoration.untrackedResourceForeground#73C991
  • input.background#2f343d
  • input.border#434851
  • inputOption.activeBackground#252a33
  • inputOption.activeBorder#434851
  • inputOption.hoverBackground#252a33
  • inputValidation.errorBackground#252a33
  • inputValidation.errorBorder#fa6780
  • inputValidation.errorForeground#fa6780
  • inputValidation.infoBackground#252a33
  • inputValidation.infoBorder#7DD5F4
  • inputValidation.infoForeground#7DD5F4
  • inputValidation.warningBackground#252a33
  • inputValidation.warningBorder#FFB266
  • inputValidation.warningForeground#FFB266
  • list.activeSelectionBackground#2f343d
  • list.activeSelectionForeground#fff
  • list.dropBackground#4d525b62
  • list.focusBackground#2f343d
  • list.focusForeground#fff
  • list.highlightForeground#7DD5F4
  • list.hoverBackground#2f343d
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#2f343d
  • list.inactiveSelectionForeground#fff
  • list.warningForeground#FFB266
  • menu.foreground#CCCCCC
  • menu.separatorBackground#20252e
  • minimap.selectionHighlight#4d525b
  • minimapGutter.addedBackground#FDCF79
  • minimapGutter.deletedBackground#fa6780
  • minimapGutter.modifiedBackground#7DD5F4
  • notificationCenter.border#434851
  • notificationCenterHeader.background#363b44
  • notifications.background#252a33
  • notifications.border#434851
  • notificationToast.border#434851
  • panelSection.dropBackground#4d525b62
  • panelSectionHeader.background#2a2f38
  • panelTitle.activeBorder#7DD5F4
  • peekView.border#7DD5F4
  • peekViewEditor.background#2a2f38
  • peekViewEditor.matchHighlightBackground#56678660
  • peekViewResult.background#2a2f38
  • peekViewResult.fileForeground#CCCCCC
  • peekViewResult.lineForeground#BBBBBB
  • peekViewResult.matchHighlightBackground#434851
  • peekViewResult.selectionBackground#252a33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#252a33
  • peekViewTitleLabel.foreground#7DD5F4
  • pickerGroup.border#434851
  • pickerGroup.foreground#7DD5F4
  • progressBar.background#7DD5F4
  • quickInput.background#252a33
  • quickInput.foreground#cccccc
  • scrollbar.shadow#2a2f38
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566660
  • scrollbarSlider.hoverBackground#5a637580
  • selection.background#37435f
  • settings.dropdownBackground#252a33
  • settings.dropdownBorder#434851
  • settings.focusedRowBackground#2f343d
  • settings.focusedRowBorder#434851
  • settings.headerForeground#ffffff
  • settings.modifiedItemIndicator#7DD5F4
  • settings.numberInputBackground#252a33
  • settings.rowHoverBackground#2f343d
  • settings.textInputBackground#252a33
  • sideBar.background#252a33
  • sideBar.border#20252e
  • sideBar.dropBackground#4d525b62
  • sideBar.foreground#CCCCCC
  • sideBarSectionHeader.background#2f343d
  • sideBarSectionHeader.border#434851
  • sideBarSectionHeader.foreground#7DD5F4
  • sideBarTitle.foreground#CCCCCC
  • statusBar.background#252a33
  • statusBar.border#20252e
  • statusBar.debuggingBackground#BC3A3A
  • statusBar.debuggingBorder#20252e
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#9da2ab
  • statusBar.noFolderBackground#393e47
  • statusBarItem.activeBackground#343942
  • statusBarItem.hoverBackground#2f343d
  • statusBarItem.remoteBackground#39a350
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#2a2f38
  • tab.activeBorderTop#7DD5F4
  • tab.activeForeground#dcdcdc
  • tab.border#20252e
  • tab.hoverBackground#2a2f38
  • tab.inactiveBackground#252a33
  • tab.inactiveForeground#91969f
  • tab.unfocusedHoverBackground#2a2f38
  • terminal.ansiBlack#2a2f38
  • terminal.ansiBlue#FDB772
  • terminal.ansiBrightBlack#2a2f38
  • terminal.ansiBrightBlue#FDB772
  • terminal.ansiBrightCyan#7DD5F4
  • terminal.ansiBrightGreen#9DD56E
  • terminal.ansiBrightMagenta#D9BDF8
  • terminal.ansiBrightRed#fa6780
  • terminal.ansiBrightWhite#cccccc
  • terminal.ansiBrightYellow#a4d676
  • terminal.ansiCyan#7DD5F4
  • terminal.ansiGreen#9DD56E
  • terminal.ansiMagenta#D9BDF8
  • terminal.ansiRed#fa6780
  • terminal.ansiWhite#cccccc
  • terminal.ansiYellow#a4d676
  • terminal.background#2a2f38
  • terminal.border#434851
  • terminal.dropBackground#4d525b62
  • terminal.foreground#CCCCCC
  • terminal.selectionBackground#37435f
  • textBlockQuote.background#393e47
  • textBlockQuote.border#4d525b
  • textLink.activeForeground#7DD5F4
  • textLink.foreground#7DD5F4
  • textPreformat.foreground#a4d677
  • titleBar.activeBackground#252a33
  • titleBar.activeForeground#b9bec7
  • titleBar.border#20252e
  • titleBar.inactiveBackground#252a33
  • titleBar.inactiveForeground#91969f
  • toolbar.hoverBackground#393e47
  • tree.indentGuidesStroke#434851
  • walkThrough.embeddedEditorBackground#393e47

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#CCCCCC
emphasisitalic
strongbold
comment#788494
constant.language#EE96D7
constant.numeric, keyword.operator.plus.exponent, keyword.operator.minus.exponent, entity.other.keyframe-offset.percentage.css#EE96D7
keyword.other.unit#EE96D7
constant.regexp#84ACFC
entity.name.tag#BB9CF7
entity.other.attribute-name#85DAFB
entity.other.attribute-name.html, entity.other.attribute-name.id.htmlitalic
meta.attribute.href.html string
entity.name.tag.css#BB9CF7
entity.other.attribute-name.parent-selector.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#EE96D7
entity.other.attribute-name.class.mixin.css#9DD274
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#F3A56A
entity.other.attribute-name.class.css, meta.attribute.class.html string#9DD274
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, entity.name.tag.custom.css#85DAFB
keyword.other.important.css, keyword.other.default.scss, keyword.other.important.scss#FF7A90
Invalid#fa6780
markup.underline, markup.underline.link.markdown#85DAFB
string.other.link.title.markdown, string.other.link.description.markdown, constant.other.reference.link.markdown#BB9CF7
markup.bold#FF7A90bold
markup.italic#F3A56Aitalic
markup.bold.markdown markup.italic.markdown#F3A56Aitalic bold
heading.1.markdown#37e2b2bold
markup.heading#9DD274bold
markup.inserted#EE96D7
markup.deleted#EDCB66
markup.changed#BB9CF7
punctuation.definition.quote.begin.markdown, markup.quote.markdown#89ADD0italic
punctuation.definition.list.begin.markdown#85DAFB
markup.inline.raw#EDCB66
fenced_code.block.language.markdown, fenced_code.block.language#EE96D7bold italic
markup.fenced_code.block.markdown#cccccc
punctuation.definition.tag#95A4B7
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#b0b0b0
entity.name.function.preprocessor, entity.name.function.macro#33C89F
keyword.preprocessor, meta.preprocessor punctuation.separator.hash, keyword.control.directive#84ACFC
entity.other.attribute-name.pragma#CCCCCC
meta.preprocessor.string#EDCB66
meta.preprocessor.numeric#EE96D7
meta.structure.dictionary.key.python#CCCCCC
meta.diff.header#BB9CF7
storage#BB9CF7
storage.type#BB9CF7
storage.modifier, keyword.operator.noexcept#BB9CF7
string, meta.embedded.assembly#EDCB66
string.tag#EDCB66
string.value#EDCB66
string.regexp#F3A56A
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#BB9CF7
meta.template.expression#CCCCCC
support.type.vendored.property-name, support.type.property-name, source.coffee.embedded#aebbcc
variable.argument.css, variable.css, variable.scss, variable.other.less#cccccc
keyword#BB9CF7
keyword.operator#9bbad4
keyword.operator.assignment
variable.other.constant, variable.other.enummember, support.constant, constant.other#84ACFC
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#BB9CF7
punctuation.definition.arrow.php, storage.type.function.arrow#BB9CF7
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#BB9CF7
support.function.git-rebase#CCCCCC
constant.sha.git-rebase#EE96D7
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#CCCCCC
variable.language, variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python#BB9CF7
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal, meta.function-call.generic#9DD274
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#85DAFB
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#85DAFB
support.class.component#33C89F
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#FF7A90
keyword.control.at-rule.media#BB9CF7
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#cccccc
support.variable.magic.python#33C89F
variable.parameter, entity.name.variable.parameter#F3A56A
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#EDCB66
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#CCCCCC
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#F3A56A
keyword.operator.or.regexp, keyword.control.anchor.regexp#FF7A90
keyword.operator.quantifier.regexp#9DD274
constant.character#BB9CF7
constant.character.escape#9DD274
entity.name.label#CCCCCC
variable.other.object.property, meta.object-literal.key, variable.other.property#B5C9ED

Shiki preview

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

Loading...

Adonis Theme - Coding Theme