Chromatic
Publisher: cakerayThemes in package: 5
A collection of harmonious themes meant for all day use: Canyon, Cosmos, Dune, Forest, Meadow
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.activeBackground#1D5C8A00
- activityBar.activeBorder#1D5C8A00
- activityBar.background#D1C9BE
- activityBar.border#BFB3A6
- activityBar.foreground#1D5C8A
- activityBar.inactiveForeground#4A382684
- activityBarBadge.background#1D5C8A
- activityBarBadge.foreground#F7F1E6
- badge.background#1D5C8A
- badge.foreground#F7F1E6
- banner.background#8A7D70
- banner.foreground#F7F1E6
- banner.iconForeground#F7F1E6
- breadcrumb.activeSelectionForeground#4A3826
- breadcrumb.background#F7F1E6
- breadcrumb.focusForeground#4A3826
- breadcrumb.foreground#7A6F60
- button.background#1D5C8A
- button.foreground#F7F1E6
- button.hoverBackground#2A72A8
- button.secondaryBackground#5E534D
- button.secondaryForeground#F7F1E6
- button.secondaryHoverBackground#8A7D70
- checkbox.background#BFB3A6
- checkbox.border#8A7D70
- checkbox.foreground#4A3826
- debugExceptionWidget.background#DDD6CC
- debugExceptionWidget.border#8A7D70
- debugExceptionWidget.foreground#4A3826
- debugToolBar.background#D1C9BE
- debugToolBar.border#8A7D70
- diffEditor.border#8A7D70
- diffEditor.insertedTextBackground#366B2933
- diffEditor.removedTextBackground#C1571C33
- dropdown.background#BFB3A6
- dropdown.border#8A7D70
- dropdown.foreground#4A3826
- editor.background#F7F1E6
- editor.findMatchBackground#B8860F48
- editor.findMatchBorder#B8860F
- editor.findMatchHighlightBackground#BFB3A680
- editor.findMatchHighlightBorder#BFB3A6C0
- editor.findRangeHighlightBackground#BFB3A628
- editor.foldBackground#E7E1D880
- editor.hoverHighlightBackground#BFB3A640
- editor.inactiveSelectionBackground#BFB3A650
- editor.lineHighlightBackground#DDD6CCA0
- editor.lineHighlightBorder#00000000
- editor.rangeHighlightBackground#BFB3A628
- editor.rangeHighlightBorder#00000000
- editor.selectionBackground#BFB3A670
- editor.selectionHighlightBackground#BFB3A640
- editor.wordHighlightBackground#BFB3A655
- editor.wordHighlightStrongBackground#BFB3A685
- editorBracketHighlight.foreground1#1F6E68
- editorBracketHighlight.foreground2#2A5FA8
- editorBracketHighlight.foreground3#6A4B9E
- editorBracketHighlight.unexpectedBracket.foreground#C1571C
- editorBracketMatch.background#D1C9BE
- editorBracketMatch.border#BFB3A6
- editorCodeLens.foreground#6B6357
- editorCursor.background#5A5044
- editorCursor.foreground#5A5044
- editorError.background#00000000
- editorError.border#00000000
- editorError.foreground#C1571C
- editorGroup.border#8A7D70
- editorGroup.dropBackground#1D5C8A44
- editorGroup.emptyBackground#F7F1E6
- editorGroupHeader.tabsBackground#DDD6CC
- editorGroupHeader.tabsBorder#BFB3A6
- editorGutter.addedBackground#366B29
- editorGutter.background#F7F1E6
- editorGutter.commentRangeForeground#BFB3A6
- editorGutter.deletedBackground#C1571C
- editorGutter.foldingControlForeground#7A6F60
- editorGutter.modifiedBackground#805E2D
- editorHoverWidget.background#DDD6CC
- editorHoverWidget.border#BFB3A6
- editorHoverWidget.foreground#4A3826
- editorIndentGuide.activeBackground#1D5C8A84
- editorIndentGuide.background#BFB3A684
- editorInfo.background#00000000
- editorInfo.border#00000000
- editorInfo.foreground#2A5FA8
- editorLineNumber.activeForeground#4A3826
- editorLineNumber.foreground#6B6357
- editorLink.activeForeground#1D5C8A
- editorMarkerNavigation.background#D1C9BE
- editorMarkerNavigationError.background#C1571C
- editorMarkerNavigationInfo.background#2A5FA8
- editorMarkerNavigationWarning.background#8A7A28
- editorOverviewRuler.background#E7E1D8
- editorOverviewRuler.border#BFB3A6
- editorOverviewRuler.findMatchForeground#B8860F
- editorRuler.foreground#BFB3A6
- editorStickyScrollHover.background#DDD6CCA0
- editorSuggestWidget.background#DDD6CC
- editorSuggestWidget.border#BFB3A6
- editorSuggestWidget.foreground#4A3826
- editorSuggestWidget.highlightForeground#1D5C8A
- editorSuggestWidget.selectedBackground#1D5C8A48
- editorWarning.background#00000000
- editorWarning.border#00000000
- editorWarning.foreground#8A7A28
- editorWhitespace.foreground#BFB3A6A0
- editorWidget.background#DDD6CC
- editorWidget.foreground#4A3826
- editorWidget.resizeBorder#8A7D70
- focusBorder#2A72A8
- foreground#4A3826
- gitDecoration.addedResourceForeground#366B29
- gitDecoration.conflictingResourceForeground#B23B1F
- gitDecoration.deletedResourceForeground#C1571C
- gitDecoration.ignoredResourceForeground#6B6357
- gitDecoration.modifiedResourceForeground#805E2D
- gitDecoration.stageDeletedResourceForeground#7A2C11
- gitDecoration.stageModifiedResourceForeground#634822
- gitDecoration.submoduleResourceForeground#6B5F78
- gitDecoration.untrackedResourceForeground#1F6E68
- icon.foreground#4A3826
- input.background#F7F1E6
- input.border#2A72A8
- input.foreground#4A3826
- input.placeholderForeground#7A6F60
- inputOption.activeBackground#1D5C8A88
- inputOption.activeBorder#1D5C8A
- inputOption.activeForeground#4A3826
- list.activeSelectionBackground#BFB3A6
- list.activeSelectionForeground#4A3826
- list.dropBackground#E7E1D8
- list.focusBackground#1D5C8A24
- list.focusForeground#4A3826
- list.highlightForeground#1D5C8A
- list.hoverBackground#D4CCC0
- list.hoverForeground#4A3826
- list.inactiveSelectionBackground#D1C9BE
- list.inactiveSelectionForeground#4A3826
- listFilterWidget.background#D1C9BE
- listFilterWidget.noMatchesOutline#C1571C
- listFilterWidget.outline#1D5C8A
- menu.background#D1C9BE
- menu.border#8A7D70
- menu.foreground#4A3826
- menu.selectionBackground#BFB3A6
- menu.selectionBorder#8A7D7000
- menu.selectionForeground#4A3826
- menu.separatorBackground#8A7D70
- menubar.selectionBackground#BFB3A6
- menubar.selectionBorder#8A7D70
- menubar.selectionForeground#4A3826
- merge.commonContentBackground#E7E1D8
- merge.commonHeaderBackground#D1C9BE
- merge.currentContentBackground#366B2925
- merge.currentHeaderBackground#366B2975
- merge.incomingContentBackground#2A5FA825
- merge.incomingHeaderBackground#2A5FA875
- minimap.background#DDD6CC
- minimap.errorHighlight#C1571C
- minimap.findMatchHighlight#B8860F66
- minimap.selectionHighlight#BFB3A644
- minimap.warningHighlight#8A7A28
- minimapGutter.addedBackground#366B29
- minimapGutter.deletedBackground#C1571C
- minimapGutter.modifiedBackground#805E2D
- notificationCenter.border#BFB3A6
- notificationCenterHeader.background#D1C9BE
- notificationCenterHeader.foreground#4A3826
- notifications.background#D1C9BE
- notifications.border#BFB3A6
- notifications.foreground#4A3826
- notificationsErrorIcon.foreground#C1571C
- notificationsInfoIcon.foreground#2A5FA8
- notificationsWarningIcon.foreground#8A7A28
- notificationToast.border#BFB3A6
- panel.background#E7E1D8
- panel.border#BFB3A6
- panelSection.border#BFB3A6
- panelTitle.activeBorder#1D5C8A
- panelTitle.activeForeground#4A3826
- panelTitle.inactiveForeground#4A3826
- peekView.border#8A7D70
- peekViewEditor.background#E7E1D8
- peekViewEditor.matchHighlightBackground#B8860F33
- peekViewEditor.matchHighlightBorder#B8860F66
- peekViewEditorGutter.background#DDD6CC
- peekViewResult.background#DDD6CC
- peekViewResult.fileForeground#4A3826
- peekViewResult.lineForeground#4A3826
- peekViewResult.matchHighlightBackground#B8860F33
- peekViewResult.selectionBackground#1D5C8A66
- peekViewResult.selectionForeground#4A3826
- peekViewTitle.background#D1C9BE
- peekViewTitleDescription.foreground#6B6357
- peekViewTitleLabel.foreground#4A3826
- pickerGroup.border#BFB3A6
- pickerGroup.foreground#2A5FA8
- progressBar.background#1D5C8A
- scrollbar.shadow#8A7D7088
- scrollbarSlider.activeBackground#5E534D88
- scrollbarSlider.background#BFB3A688
- scrollbarSlider.hoverBackground#8A7D7088
- selection.background#BFB3A688
- settings.focusedRowBackground#BFB3A684
- settings.headerForeground#4A3826
- sideBar.background#DDD6CC
- sideBar.border#BFB3A6
- sideBar.dropBackground#E7E1D8
- sideBar.foreground#4A3826
- sideBarSectionHeader.background#D1C9BE
- sideBarSectionHeader.border#BFB3A6
- sideBarSectionHeader.foreground#4A3826
- sideBarTitle.foreground#4A3826
- statusBar.background#D1C9BE
- statusBar.border#BFB3A6
- statusBar.debuggingBackground#8A7A28
- statusBar.debuggingForeground#4A3826
- statusBar.foreground#4A3826
- statusBar.noFolderBackground#D1C9BE
- statusBar.noFolderForeground#4A3826
- statusBarItem.activeBackground#FFFFFF25
- statusBarItem.errorBackground#C1571C
- statusBarItem.errorForeground#F7F1E6
- statusBarItem.errorHoverBackground#D97B4A
- statusBarItem.hoverBackground#BFB3A6
- statusBarItem.remoteBackground#1D5C8A
- statusBarItem.remoteForeground#F7F1E6
- statusBarItem.remoteHoverBackground#2A72A8
- statusBarItem.remoteHoverForeground#F7F1E6
- tab.activeBackground#F7F1E6
- tab.activeBorder#00000000
- tab.activeBorderTop#1D5C8A
- tab.activeForeground#4A3826
- tab.border#BFB3A6
- tab.inactiveBackground#E7E1D8
- tab.inactiveForeground#6B6357
- terminal.ansiBlack#4A3826
- terminal.ansiBlue#2A5FA8
- terminal.ansiBrightBlack#6B6357
- terminal.ansiBrightBlue#4E7EC2
- terminal.ansiBrightCyan#3E9088
- terminal.ansiBrightGreen#6B9E58
- terminal.ansiBrightMagenta#8A68B8
- terminal.ansiBrightRed#DC7A45
- terminal.ansiBrightWhite#D2C6B3
- terminal.ansiBrightYellow#A9863F
- terminal.ansiCyan#1F6E68
- terminal.ansiGreen#4A7A3A
- terminal.ansiMagenta#6A4B9E
- terminal.ansiRed#C1571C
- terminal.ansiWhite#BFB3A6
- terminal.ansiYellow#805E2D
- terminal.border#BFB3A6
- terminal.foreground#4A3826
- terminal.selectionBackground#BFB3A688
- terminalCursor.background#4A3826
- terminalCursor.foreground#4A3826
- textCodeBlock.background#E7E1D8
- textLink.activeForeground#2A72A8
- textLink.foreground#1D5C8A
- titleBar.activeBackground#D1C9BE
- titleBar.activeForeground#4A3826
- titleBar.border#BFB3A6
- titleBar.inactiveBackground#D1C9BE
- titleBar.inactiveForeground#6B6357
- tree.indentGuidesStroke#8A7D70
- walkThrough.embeddedEditorBackground#E7E1D8
- widget.shadow#00000000
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| accent, entity.name.function.operator.cpp, entity.name.function.operator.member.cpp, entity.name.type.class.templated.cpp, entity.name.namespace.cpp, keyword, keyword.control, keyword.other, markup.bold.markdown, punctuation.definition.directive, storage, storage.modifier, storage.type.class.python, storage.type.function, storage.type.rust, storage.type.ts, storage.type.tsx, support.constant, token.info-token, token.storage, variable.language, wikiword.xi | #9A0E45 | — |
| keyword.operator, punctuation.bracket, punctuation.definition, punctuation.section, punctuation.separator, punctuation.terminator, text | #5A5044 | — |
| beginning.punctuation, block.scope, constant, constant.character, constant.keyword, constant.other, control.elements, entity.name.section, entity.name.annotationMember, entity.other.attribute-name, function.brace, markup.italic, meta.body.function.definition.cpp, meta.definition.class, meta.definition.variable, meta.function, meta.function-call, meta.interface, meta.method, meta.method.java, meta.method-call, meta.require, meta.selector, punctuation.definition.string, punctuation.operator, punctuation.parenthesis, rgb-value, selector, source, support.type.property-name, support.type.vendored.property-name.css, token.variable, variable, variable.other, variable.parameter | #326161 | — |
| comment, keyword.other.documentation, punctuation.definition.comment, punctuation.definition.block.tag.jsdoc, storage.type.class.jsdoc, source.embedded.ts, string.quoted.docstring | #5F584C | italic |
| constant.language, constant.numeric, markup.underline.link, meta.function.decorator.python, storage.type.annotation | #735817 | — |
| entity.global, entity.name.variable, import.storage.java, inline-color-decoration rgb-value, less rgb-value, meta.template, string | #99481F | — |
| emphasis md, entity.name.function, entity.other.alias, markup.quote.markdown, support.function.builtin.python, support.variable, token.package, variable.function | #5B33A3 | — |
| entity.name, entity.name.type, entity.name.section.markdown, entity.other.inherited-class, function.parameter, meta.arguments, meta.property, meta.symbol, meta.object-literal.key, meta.scope, storage.type, support.class, support.function, support.module.node, support.other, support.token.decorator.python, support.type, token.debug-token | #1848A0 | — |
| invalid, invalid.broken, invalid.deprecated, invalid.illegal, invalid.unimplemented, markup.deleted.diff, token.error-token | #B54848 | — |
| markup.changed.diff, todo, token.warn-token | #CC6633 | — |
| markup.inserted.diff | #28A364 | — |