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#2D7A4F00
- activityBar.activeBorder#2D7A4F00
- activityBar.background#D5D8C7
- activityBar.border#B8BDA6
- activityBar.foreground#2D7A4F
- activityBar.inactiveForeground#3A423484
- activityBarBadge.background#2D7A4F
- activityBarBadge.foreground#D5D8C7
- badge.background#2D7A4F
- badge.foreground#D5D8C7
- banner.background#E3E5D8
- banner.foreground#3A4234
- banner.iconForeground#3A4234
- breadcrumb.activeSelectionForeground#3A4234
- breadcrumb.background#F0F1E8
- breadcrumb.focusForeground#3A4234
- breadcrumb.foreground#6B7364
- button.background#2D7A4F
- button.foreground#D5D8C7
- button.hoverBackground#256B44
- button.secondaryBackground#D5D8C7
- button.secondaryForeground#3A4234
- button.secondaryHoverBackground#D5D8C7
- checkbox.background#D5D8C7
- checkbox.border#B8BDA6
- checkbox.foreground#2D7A4F
- debugExceptionWidget.background#D5D8C7
- debugExceptionWidget.border#B8BDA6
- debugExceptionWidget.foreground#3A4234
- debugToolBar.background#D5D8C7
- debugToolBar.border#B8BDA6
- diffEditor.border#B8BDA6
- diffEditor.insertedTextBackground#1E605833
- diffEditor.removedTextBackground#A64F5833
- dropdown.background#D5D8C7
- dropdown.border#B8BDA6
- dropdown.foreground#3A4234
- editor.background#F0F1E8
- editor.findMatchBackground#96700F48
- editor.findMatchBorder#96700F
- editor.findMatchHighlightBackground#B8BDA680
- editor.findMatchHighlightBorder#B8BDA6C0
- editor.findRangeHighlightBackground#B8BDA648
- editor.foldBackground#E3E5D880
- editor.hoverHighlightBackground#D5D8C7A0
- editor.inactiveSelectionBackground#B8BDA650
- editor.lineHighlightBackground#D5D8C7A0
- editor.lineHighlightBorder#00000000
- editor.rangeHighlightBackground#B8BDA684
- editor.rangeHighlightBorder#00000000
- editor.selectionBackground#B8BDA670
- editor.selectionHighlightBackground#B8BDA640
- editor.wordHighlightBackground#B8BDA655
- editor.wordHighlightStrongBackground#B8BDA685
- editorBracketHighlight.foreground1#1E6058
- editorBracketHighlight.foreground2#1F5FA0
- editorBracketHighlight.foreground3#6B4A9E
- editorBracketHighlight.unexpectedBracket.foreground#A64F58
- editorBracketMatch.background#D5D8C7
- editorBracketMatch.border#B8BDA6
- editorCodeLens.foreground#6B7364
- editorCursor.background#3A4234
- editorCursor.foreground#3A4234
- editorError.background#00000000
- editorError.border#00000000
- editorError.foreground#A64F58
- editorGroup.border#B8BDA6
- editorGroup.dropBackground#2D7A4F22
- editorGroup.emptyBackground#F0F1E8
- editorGroupHeader.tabsBackground#D5D8C7
- editorGroupHeader.tabsBorder#B8BDA6
- editorGutter.addedBackground#2D7A4F
- editorGutter.background#F0F1E8
- editorGutter.commentRangeForeground#B8BDA6
- editorGutter.deletedBackground#A64F58
- editorGutter.foldingControlForeground#6B7364
- editorGutter.modifiedBackground#1F5FA0
- editorHoverWidget.background#D5D8C7
- editorHoverWidget.border#B8BDA6
- editorHoverWidget.foreground#3A4234
- editorIndentGuide.activeBackground#2D7A4F84
- editorIndentGuide.background#B8BDA684
- editorInfo.background#00000000
- editorInfo.border#00000000
- editorInfo.foreground#1F5FA0
- editorLineNumber.activeForeground#3A4234
- editorLineNumber.foreground#6B7364
- editorLink.activeForeground#256B44
- editorMarkerNavigation.background#D5D8C7
- editorMarkerNavigationError.background#A64F58
- editorMarkerNavigationInfo.background#1F5FA0
- editorMarkerNavigationWarning.background#806A3F
- editorOverviewRuler.background#F0F1E8
- editorOverviewRuler.border#B8BDA6
- editorOverviewRuler.findMatchForeground#96700F
- editorRuler.foreground#B8BDA6
- editorStickyScrollHover.background#D5D8C7A0
- editorSuggestWidget.background#D5D8C7
- editorSuggestWidget.border#B8BDA6
- editorSuggestWidget.foreground#3A4234
- editorSuggestWidget.highlightForeground#2D7A4F
- editorSuggestWidget.selectedBackground#B8BDA650
- editorWarning.background#00000000
- editorWarning.border#00000000
- editorWarning.foreground#806A3F
- editorWhitespace.foreground#B8BDA6A0
- editorWidget.background#D5D8C7
- editorWidget.foreground#3A4234
- editorWidget.resizeBorder#B8BDA6
- focusBorder#2D7A4F
- foreground#3A4234
- gitDecoration.addedResourceForeground#2D7A4F
- gitDecoration.conflictingResourceForeground#B45F67
- gitDecoration.deletedResourceForeground#A64F58
- gitDecoration.ignoredResourceForeground#6B7364
- gitDecoration.modifiedResourceForeground#1F5FA0
- gitDecoration.stageDeletedResourceForeground#8A4148
- gitDecoration.stageModifiedResourceForeground#164A80
- gitDecoration.submoduleResourceForeground#6B4A9E
- gitDecoration.untrackedResourceForeground#1E6058
- icon.foreground#3A4234
- input.background#F0F1E8
- input.border#2D7A4F
- input.foreground#3A4234
- input.placeholderForeground#6B7364
- inputOption.activeBackground#2D7A4F22
- inputOption.activeBorder#2D7A4F
- inputOption.activeForeground#3A4234
- list.activeSelectionBackground#B8BDA6
- list.activeSelectionForeground#3A4234
- list.dropBackground#E3E5D8
- list.focusBackground#2D7A4F24
- list.focusForeground#3A4234
- list.highlightForeground#2D7A4F
- list.hoverBackground#B8BDA6
- list.hoverForeground#3A4234
- list.inactiveSelectionBackground#B8BDA6
- list.inactiveSelectionForeground#3A4234
- listFilterWidget.background#D5D8C7
- listFilterWidget.noMatchesOutline#A64F58
- listFilterWidget.outline#2D7A4F
- menu.background#D5D8C7
- menu.border#B8BDA6
- menu.foreground#3A4234
- menu.selectionBackground#B8BDA6
- menu.selectionBorder#B8BDA600
- menu.selectionForeground#3A4234
- menu.separatorBackground#B8BDA6
- menubar.selectionBackground#B8BDA6
- menubar.selectionBorder#B8BDA6
- menubar.selectionForeground#3A4234
- merge.commonContentBackground#D5D8C7
- merge.commonHeaderBackground#D5D8C7
- merge.currentContentBackground#2D7A4F25
- merge.currentHeaderBackground#2D7A4F75
- merge.incomingContentBackground#1F5FA025
- merge.incomingHeaderBackground#1F5FA075
- minimap.background#F0F1E8
- minimap.errorHighlight#A64F58
- minimap.findMatchHighlight#96700F66
- minimap.selectionHighlight#B8BDA644
- minimap.warningHighlight#806A3F
- minimapGutter.addedBackground#2D7A4F
- minimapGutter.deletedBackground#A64F58
- minimapGutter.modifiedBackground#1F5FA0
- notificationCenter.border#B8BDA6
- notificationCenterHeader.background#D5D8C7
- notificationCenterHeader.foreground#3A4234
- notifications.background#D5D8C7
- notifications.border#B8BDA6
- notifications.foreground#3A4234
- notificationsErrorIcon.foreground#A64F58
- notificationsInfoIcon.foreground#1F5FA0
- notificationsWarningIcon.foreground#806A3F
- notificationToast.border#B8BDA6
- panel.background#D5D8C7
- panel.border#B8BDA6
- panelSection.border#B8BDA6
- panelTitle.activeBorder#2D7A4F
- panelTitle.activeForeground#3A4234
- panelTitle.inactiveForeground#3A4234
- peekView.border#B8BDA6
- peekViewEditor.background#D5D8C7
- peekViewEditor.matchHighlightBackground#96700F33
- peekViewEditor.matchHighlightBorder#96700F66
- peekViewEditorGutter.background#E3E5D8
- peekViewResult.background#D5D8C7
- peekViewResult.fileForeground#3A4234
- peekViewResult.lineForeground#3A4234
- peekViewResult.matchHighlightBackground#96700F33
- peekViewResult.selectionBackground#B8BDA6
- peekViewResult.selectionForeground#3A4234
- peekViewTitle.background#D5D8C7
- peekViewTitleDescription.foreground#6B7364
- peekViewTitleLabel.foreground#3A4234
- pickerGroup.border#B8BDA6
- pickerGroup.foreground#1F5FA0
- progressBar.background#2D7A4F
- scrollbar.shadow#B8BDA688
- scrollbarSlider.activeBackground#2D7A4F66
- scrollbarSlider.background#B8BDA666
- scrollbarSlider.hoverBackground#B8BDA699
- selection.background#B8BDA670
- settings.focusedRowBackground#D5D8C784
- settings.headerForeground#3A4234
- sideBar.background#D5D8C7
- sideBar.border#B8BDA6
- sideBar.dropBackground#E3E5D8
- sideBar.foreground#3A4234
- sideBarSectionHeader.background#E3E5D8
- sideBarSectionHeader.border#B8BDA6
- sideBarSectionHeader.foreground#3A4234
- sideBarTitle.foreground#3A4234
- statusBar.background#D5D8C7
- statusBar.border#B8BDA6
- statusBar.debuggingBackground#806A3F
- statusBar.debuggingForeground#F0F1E8
- statusBar.foreground#3A4234
- statusBar.noFolderBackground#D5D8C7
- statusBar.noFolderForeground#3A4234
- statusBarItem.activeBackground#00000025
- statusBarItem.errorBackground#A64F58
- statusBarItem.errorForeground#F0F1E8
- statusBarItem.errorHoverBackground#B45F67
- statusBarItem.hoverBackground#B8BDA6
- statusBarItem.remoteBackground#2D7A4F
- statusBarItem.remoteForeground#F0F1E8
- statusBarItem.remoteHoverBackground#256B44
- statusBarItem.remoteHoverForeground#F0F1E8
- tab.activeBackground#F0F1E8
- tab.activeBorder#B8BDA6
- tab.activeBorderTop#2D7A4F
- tab.activeForeground#3A4234
- tab.border#B8BDA6
- tab.inactiveBackground#D5D8C7
- tab.inactiveForeground#6B7364
- terminal.ansiBlack#3A4234
- terminal.ansiBlue#1F5FA0
- terminal.ansiBrightBlack#6B7364
- terminal.ansiBrightBlue#4079B8
- terminal.ansiBrightCyan#3D7D74
- terminal.ansiBrightGreen#4F9D6E
- terminal.ansiBrightMagenta#8768B8
- terminal.ansiBrightRed#C46B70
- terminal.ansiBrightWhite#F0F1E8
- terminal.ansiBrightYellow#A08654
- terminal.ansiCyan#1E6058
- terminal.ansiGreen#2D7A4F
- terminal.ansiMagenta#6B4A9E
- terminal.ansiRed#A64F58
- terminal.ansiWhite#B8BDA6
- terminal.ansiYellow#806A3F
- terminal.border#B8BDA6
- terminal.foreground#3A4234
- terminal.selectionBackground#B8BDA670
- terminalCursor.background#3A4234
- terminalCursor.foreground#3A4234
- textCodeBlock.background#E3E5D8
- textLink.activeForeground#2D7A4F
- textLink.foreground#256B44
- titleBar.activeBackground#D5D8C7
- titleBar.activeForeground#3A4234
- titleBar.border#B8BDA6
- titleBar.inactiveBackground#D5D8C7
- titleBar.inactiveForeground#6B7364
- tree.indentGuidesStroke#D5D8C7
- walkThrough.embeddedEditorBackground#E3E5D8
- 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.operator.logical.python, markup.bold.markdown, punctuation.definition.directive, storage, storage.type.class.python, storage.type.function.ts, storage.type.rust, storage.type.ts, storage.type.tsx, support.constant, token.info-token, token.storage, wikiword.xi | #A8305C | — |
| beginning.punctuation, block.scope, constant, control.elements, entity.name.section, entity.name.annotationMember, entity.other.attribute-name, function.brace, keyword.operator, keyword.control.new, keyword.control.ternary, markup, meta.body.function.definition.cpp, meta.definition, meta.function, meta.function-call, meta.interface, meta.method, meta.method-call, meta.require, meta.selector, punctuation, rgb-value, selector, source, storage.modifier.import, storage.modifier.reference.cpp, storage.type.annotation, storage.type.function, support.type.property-name, text, token.variable, variable | #3A4234 | — |
| comment, keyword.other.documentation, punctuation.definition.comment, punctuation.definition.block.tag.jsdoc, storage.type.class.jsdoc, source.embedded.ts, string.quoted.docstring | #6B7364 | italic |
| constant.language, constant.numeric, entity.global, entity.name.variable, import.storage.java, inline-color-decoration rgb-value, less rgb-value, markup.quote.markdown, string | #266666 | — |
| emphasis md, entity.name.function, entity.other.alias, markup.heading.setext, markup.quote.markdown, support.function.builtin.python, support.variable, token.package, variable.function | #6B4A9E | — |
| entity.name, 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, token.debug-token | #1F5FA0 | — |
| invalid, markup.deleted.diff, token.error-token | #A64F58 | — |
| markup.changed.diff, markup.italic, todo, token.warn-token | #806A3F | — |
| markup.inserted.diff, markup.underline.link | #2D7A4F | — |