Skip to main content
Coding Theme

ChromaBlend - Dynamic Dark & Light Theme

Publisher: Bama Charan ChhandogiThemes in package: 2

A vibrant VS Code theme that dynamically blends green, pink, and blue for a unique coding experience. Available in dark and light modes.

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#ffffffcf
  • activityBar.border#ffffff
  • activityBar.foreground#000000
  • activityBarBadge.background#d73a49
  • button.background#d73a49
  • button.foreground#ffffff
  • dropdown.background#ffffff
  • dropdown.border#b2b2b2
  • dropdown.listBackground#ffffff
  • editor.background#ffffff54
  • editor.foreground#000000
  • editor.lineHighlightBackground#fffbdf
  • editor.lineHighlightBorder#fffbdf
  • editor.selectionBackground#0fbcec
  • editorGroup.border#ffffff
  • editorGroupHeader.noTabsBackground#ffffff
  • editorGroupHeader.tabsBackground#ffffff
  • editorGroupHeader.tabsBorder#ffffff
  • editorLineNumber.activeForeground#000000
  • editorLineNumber.foreground#babbbc
  • editorSuggestWidget.highlightForeground#d73a49
  • editorSuggestWidget.selectedBackground#f0f0f0
  • editorWidget.background#ffffff
  • editorWidget.border#000000
  • focusBorder#ffffff00
  • foreground#000000
  • input.background#ffffff
  • input.border#b2b2b2
  • inputOption.activeBorder#000000
  • inputOption.activeForeground#000000
  • list.activeSelectionBackground#eeeeee
  • list.activeSelectionForeground#d73a49
  • list.focusBackground#eeeeee
  • list.focusForeground#d73a49
  • list.highlightForeground#d73a49
  • list.hoverBackground#eeeeee
  • list.hoverForeground#d73a49
  • list.inactiveSelectionBackground#eeeeee
  • list.inactiveSelectionForeground#d73a49
  • notificationCenter.border#ffffff
  • notificationCenterHeader.background#ffffff
  • notifications.background#ffffff
  • notifications.border#ffffff
  • notificationToast.border#ffffff
  • panel.border#f50f26
  • scrollbar.shadow#ffffff
  • sideBar.background#ffffffd6
  • sideBar.border#ffffff
  • sideBar.foreground#000000
  • sideBarSectionHeader.background#ffffff
  • statusBar.background#ffffff
  • statusBar.border#ffffff
  • statusBar.debuggingBackground#ffffff
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#ffffff
  • statusBar.noFolderForeground#000000
  • tab.activeBackground#ffffff
  • tab.activeBorder#d73a49
  • tab.border#ffffff
  • tab.inactiveBackground#ffffff
  • terminal.background#fdfcfc
  • terminal.foreground#0b0101
  • titleBar.activeBackground#ffffff
  • titleBar.activeForeground#000000
  • titleBar.border#ffffff
  • titleBar.inactiveBackground#ffffff
  • titleBar.inactiveForeground#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#757e88
constant, entity.name.constant, variable.other.constant, variable.language#0668d8
keyword.operator.symbole, keyword.other.mark#000000f0
entity, entity.name#6d3fc2
variable.parameter.function#000000
entity.name.tag#35c857e0
keyword#d83041
storage, storage.type#e33345
storage.modifier.package, storage.modifier.import, storage.type.java#000000
string, punctuation.definition.string, string punctuation.section.embedded source#0952a6
string.unquoted.import.ada
support#0965cd
meta.property-name#005cc5
variable#e36209
variable.other#000000
invalid.broken#b31d28bold italic underline
invalid.deprecated#b31d28bold italic underline
invalid.illegal#b31d28italic underline
carriage-return#d73a49italic underline
invalid.unimplemented#b31d28bold italic underline
message.error#b31d28
string source#000000
string variable#005cc5
source.regexp, string.regexp#032f62
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#032f62
string.regexp constant.character.escape#22863abold
support.constant#005cc5
support.variable#005cc5
meta.module-reference#005cc5
markup.list#816712
markup.heading, markup.heading entity.name#005cc5bold
markup.quote#22863a
markup.italic#000000italic
markup.bold#000000bold
markup.raw#005cc5
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#b31d28
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#22863a
markup.changed, punctuation.definition.changed#ea670f
markup.ignored, markup.untracked#005cc5
meta.diff.range#6f42c1bold
meta.diff.header#005cc5
meta.separator#005cc5bold
meta.output#005cc5
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#586069
brackethighlighter.unmatched#b31d28
sublimelinter.mark.error#b31d28
sublimelinter.mark.warning#e36209
sublimelinter.gutter-mark#959da5
constant.other.reference.link, string.other.link#032f62underline
meta.function-call support.function, meta.function-call entity.name.function#005cc5
keyword.operator#000000

Shiki preview

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

Loading...