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#3ef9d0
  • activityBar.background#282b5e
  • activityBar.border#1b1f23
  • activityBar.foreground#b3b5cf
  • activityBar.inactiveForeground#7c7ea2
  • activityBarBadge.background#fc0373
  • activityBarBadge.foreground#ebecfc
  • badge.background#890022
  • badge.foreground#ffccff
  • breadcrumb.activeSelectionForeground#b3b5cf
  • breadcrumb.focusForeground#b3b5cf
  • breadcrumb.foreground#9799b8
  • breadcrumbPicker.background#282b5e
  • button.background#008c98
  • button.foreground#ffffff
  • button.hoverBackground#00919d
  • checkbox.background#60628b
  • checkbox.border#1b1f23
  • debugToolBar.background#000000
  • descriptionForeground#9799b8
  • diffEditor.insertedTextBackground#34d0584d
  • diffEditor.removedTextBackground#b2003166
  • dropdown.background#2e335f
  • dropdown.border#1b1f23
  • dropdown.foreground#b3b5cf
  • dropdown.listBackground#282b5e
  • editor.background#282b5e
  • editor.findMatchBackground#ffff8f
  • editor.findMatchHighlightBackground#ffdf5d4d
  • editor.focusedStackFrameHighlightBackground#947f00
  • editor.foldBackground#182049
  • editor.foreground#b3b5cf
  • editor.inactiveSelectionBackground#a600341a
  • editor.lineHighlightBackground#2e335f
  • editor.selectionBackground#89002233
  • editor.selectionHighlightBackground#ff95d2
  • editor.selectionHighlightBorder#fc037300
  • editor.stackFrameHighlightBackground#635300
  • editor.wordHighlightBackground#fc037300
  • editor.wordHighlightBorder#fc037399
  • editor.wordHighlightStrongBackground#fc037300
  • editor.wordHighlightStrongBorder#fc037380
  • editorBracketMatch.background#fc037366
  • editorBracketMatch.border#fc037300
  • editorCursor.foreground#e5ffff
  • editorGroup.border#1b1f23
  • editorGroupHeader.tabsBackground#23275a
  • editorGroupHeader.tabsBorder#282b5e
  • editorGutter.addedBackground#34d058
  • editorGutter.deletedBackground#ff7e87
  • editorGutter.modifiedBackground#71b7ff
  • editorIndentGuide.activeBackground#60628b
  • editorIndentGuide.background#2e335f
  • editorLineNumber.activeForeground#b3b5cf
  • editorLineNumber.foreground#60628b
  • editorOverviewRuler.border#1b1f23
  • editorWhitespace.foreground#60628b
  • editorWidget.background#23275a
  • errorForeground#ffb1b6
  • focusBorder#005ccb
  • foreground#b3b5cf
  • gitDecoration.addedResourceForeground#73ff88
  • gitDecoration.conflictingResourceForeground#ffe991
  • gitDecoration.deletedResourceForeground#ff7e87
  • gitDecoration.ignoredResourceForeground#7c7ea2
  • gitDecoration.modifiedResourceForeground#ace9ff
  • gitDecoration.submoduleResourceForeground#7c7ea2
  • gitDecoration.untrackedResourceForeground#73ff88
  • input.background#2e335f
  • input.border#1b1f23
  • input.foreground#b3b5cf
  • input.placeholderForeground#9799b8
  • list.activeSelectionBackground#2e335f
  • list.activeSelectionForeground#b3b5cf
  • list.focusBackground#890022
  • list.hoverBackground#2d2f62
  • list.hoverForeground#b3b5cf
  • list.inactiveFocusBackground#23275a
  • list.inactiveSelectionBackground#282b5e
  • list.inactiveSelectionForeground#b3b5cf
  • notificationCenterHeader.background#282b5e
  • notificationCenterHeader.foreground#9799b8
  • notifications.background#2e335f
  • notifications.border#1b1f23
  • notifications.foreground#b3b5cf
  • notificationsErrorIcon.foreground#ff7e87
  • notificationsInfoIcon.foreground#ace9ff
  • notificationsWarningIcon.foreground#ffe991
  • panel.background#23275a
  • panel.border#1b1f23
  • panelInput.border#2e335f
  • panelTitle.activeBorder#3ef9d0
  • panelTitle.activeForeground#b3b5cf
  • panelTitle.inactiveForeground#9799b8
  • peekViewEditor.background#282b5e99
  • peekViewEditor.matchHighlightBackground#ffffc1
  • peekViewResult.background#282b5e
  • peekViewResult.matchHighlightBackground#ffffc1
  • pickerGroup.border#60628b
  • pickerGroup.foreground#b3b5cf
  • progressBar.background#fc0373
  • quickInput.background#282b5e
  • quickInput.foreground#b3b5cf
  • scrollbar.shadow#2e335f
  • scrollbarSlider.activeBackground#9799b899
  • scrollbarSlider.background#9799b833
  • scrollbarSlider.hoverBackground#9799b840
  • settings.headerForeground#b3b5cf
  • settings.modifiedItemIndicator#2188ff
  • sideBar.background#23275a
  • sideBar.border#1b1f23
  • sideBar.foreground#b3b5cf
  • sideBarSectionHeader.background#23275a
  • sideBarSectionHeader.border#1b1f23
  • sideBarSectionHeader.foreground#b3b5cf
  • sideBarTitle.foreground#b3b5cf
  • statusBar.background#282b5e
  • statusBar.border#1b1f23
  • statusBar.debuggingBackground#ffffff
  • statusBar.debuggingForeground#ebecfc
  • statusBar.foreground#b3b5cf
  • statusBar.noFolderBackground#282b5e
  • tab.activeBackground#282b5e
  • tab.activeBorder#282b5e
  • tab.activeBorderTop#3ef9d0
  • tab.activeForeground#b3b5cf
  • tab.border#1b1f23
  • tab.hoverBackground#282b5e
  • tab.inactiveBackground#23275a
  • tab.inactiveForeground#9799b8
  • tab.unfocusedActiveBorder#282b5e
  • tab.unfocusedActiveBorderTop#282b5e
  • tab.unfocusedHoverBackground#282b5e
  • terminal.foreground#b3b5cf
  • textBlockQuote.background#282b5e
  • textBlockQuote.border#60628b
  • textCodeBlock.background#2e335f
  • textLink.activeForeground#e5ffff
  • textLink.foreground#ace9ff
  • textPreformat.foreground#b3b5cf
  • textSeparator.foreground#60628b
  • titleBar.activeBackground#282b5e
  • titleBar.activeForeground#b3b5cf
  • titleBar.border#1b1f23
  • titleBar.inactiveBackground#23275a
  • titleBar.inactiveForeground#9799b8
  • tree.indentGuidesStroke#2e335f
  • welcomePage.buttonBackground#2e335f
  • welcomePage.buttonHoverBackground#60628b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#7c7ea2
constant, entity.name.constant, variable.other.constant, variable.language#71b7ff
entity, entity.name#bd92ff
variable.parameter.function#b3b5cf
entity.name.tag#73ff88
keyword#ff7e87
storage, storage.type#ff7e87
storage.modifier.package, storage.modifier.import, storage.type.java#b3b5cf
string, punctuation.definition.string, string punctuation.section.embedded source#71b7ff
support#71b7ff
meta.property-name#71b7ff
variable#ffb661
variable.other#b3b5cf
invalid.broken#ff979e
invalid.deprecated#ff979e
invalid.illegal#ff979e
invalid.unimplemented#ff979e
carriage-return#ffffff
message.error#ff979e
string source#b3b5cf
string variable#71b7ff
source.regexp, string.regexp#ace9ff
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#ace9ff
string.regexp constant.character.escape#73ff88
support.constant#71b7ff
support.variable#71b7ff
meta.module-reference#71b7ff
punctuation.definition.list.begin.markdown#ffb661
markup.heading, markup.heading entity.name#71b7ff
markup.quote#73ff88
markup.italic#b3b5cf
markup.bold#b3b5cf
markup.raw#71b7ff
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#ff979e
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#73ff88
markup.changed, punctuation.definition.changed#ffb661
markup.ignored, markup.untracked#2e335f
meta.diff.range#bd92ff
meta.diff.header#71b7ff
meta.separator#71b7ff
meta.output#71b7ff
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#b3b5cf
brackethighlighter.unmatched#ff979e
constant.other.reference.link, string.other.link#ace9ff

Shiki preview

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

Loading...

Bluevery - Coding Theme