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#C5C8BB00
- activityBar.activeBorder#8FBF8F00
- activityBar.background#30372D
- activityBar.border#41493D
- activityBar.foreground#8FBF8F
- activityBar.inactiveForeground#AEB7A884
- activityBarBadge.background#8FBF8F
- activityBarBadge.foreground#30372D
- badge.background#8FBF8F
- badge.foreground#30372D
- banner.background#262E23
- banner.foreground#657A62
- banner.iconForeground#8FBF8F
- breadcrumb.activeSelectionForeground#657A62
- breadcrumb.background#262E23
- breadcrumb.focusForeground#AEB6A7
- breadcrumb.foreground#AEB6A7
- button.background#8FBF8F
- button.foreground#30372D
- button.hoverBackground#657A62
- button.secondaryBackground#30372D
- button.secondaryForeground#AEB7A8
- button.secondaryHoverBackground#526553
- checkbox.background#30372D
- checkbox.border#41493D
- checkbox.foreground#8FBF8F
- debugExceptionWidget.background#30372D
- debugExceptionWidget.border#B45F67
- debugToolBar.background#30372D
- debugToolBar.border#41493D
- diffEditor.border#41493D
- diffEditor.insertedTextBackground#7EBB7133
- diffEditor.removedTextBackground#A64F5833
- dropdown.background#30372D
- dropdown.border#41493D
- dropdown.foreground#AEB7A8
- editor.background#262E23
- editor.findMatchBackground#E8B84A48
- editor.findMatchBorder#E8B84A
- editor.findMatchHighlightBackground#41493D80
- editor.findMatchHighlightBorder#41493DC0
- editor.findRangeHighlightBackground#41493D84
- editor.hoverHighlightBackground#41493D88
- editor.inactiveSelectionBackground#41493D50
- editor.lineHighlightBackground#30372D
- editor.lineHighlightBorder#00000000
- editor.rangeHighlightBackground#41493DA0
- editor.rangeHighlightBorder#00000000
- editor.selectionBackground#41493DA5
- editor.selectionHighlightBackground#41493D40
- editor.wordHighlightBackground#41493D55
- editor.wordHighlightStrongBackground#41493D85
- editorBracketHighlight.foreground1#8FBF8F
- editorBracketHighlight.foreground2#4B6F99
- editorBracketHighlight.foreground3#B45F67
- editorBracketHighlight.unexpectedBracket.foreground#B45F67
- editorBracketMatch.background#30372D
- editorBracketMatch.border#8FBF8F
- editorCodeLens.foreground#8A8F87
- editorCursor.background#C3CBBF
- editorCursor.foreground#C3CBBF
- editorError.background#E8D5D700
- editorError.border#B45F6700
- editorError.foreground#A64F58
- editorGroup.border#41493D
- editorGroup.dropBackground#8FBF8F33
- editorGroup.emptyBackground#262E23
- editorGroupHeader.tabsBackground#30372D
- editorGroupHeader.tabsBorder#41493D
- editorGutter.addedBackground#76957F
- editorGutter.background#262E23
- editorGutter.commentRangeForeground#8A8F87
- editorGutter.deletedBackground#B45F67
- editorGutter.foldingControlForeground#858A82
- editorGutter.modifiedBackground#7187A5
- editorHoverWidget.background#30372D
- editorHoverWidget.border#41493D
- editorHoverWidget.foreground#AEB6A7
- editorIndentGuide.activeBackground#8FBF8F84
- editorIndentGuide.background#41493D84
- editorInfo.background#D3DFDC00
- editorInfo.border#8FBF8F00
- editorInfo.foreground#8FBF8F
- editorLineNumber.activeForeground#AEB6A7
- editorLineNumber.foreground#8A8F87
- editorLink.activeForeground#8FBF8F
- editorMarkerNavigation.background#30372D
- editorMarkerNavigationError.background#B45F67
- editorMarkerNavigationInfo.background#8FBF8F
- editorMarkerNavigationWarning.background#9A8050
- editorOverviewRuler.background#262E23
- editorOverviewRuler.border#41493D
- editorOverviewRuler.findMatchForeground#E8B84A
- editorRuler.foreground#C0C3B8
- editorStickyScrollHover.background#30372D
- editorSuggestWidget.background#30372D
- editorSuggestWidget.border#AEB2A6
- editorSuggestWidget.foreground#AEB6A7
- editorSuggestWidget.highlightForeground#8FBF8F
- editorSuggestWidget.selectedBackground#41493D
- editorWarning.background#E7DFCE00
- editorWarning.border#9A805000
- editorWarning.foreground#806A3F
- editorWhitespace.foreground#41493D
- editorWidget.background#30372D
- editorWidget.foreground#AEB6A7
- editorWidget.resizeBorder#41493D
- focusBorder#8FBF8F
- foreground#AEB6A7
- gitDecoration.addedResourceForeground#7EBB71
- gitDecoration.conflictingResourceForeground#D48078
- gitDecoration.deletedResourceForeground#A64F58
- gitDecoration.ignoredResourceForeground#6D736A
- gitDecoration.modifiedResourceForeground#6B8FBE
- gitDecoration.stageDeletedResourceForeground#8A4148
- gitDecoration.stageModifiedResourceForeground#3D5A7D
- gitDecoration.submoduleResourceForeground#3A9A8E
- gitDecoration.untrackedResourceForeground#5F9455
- icon.foreground#AEB6A7
- input.background#262E23
- input.border#657A62
- input.foreground#AEB6A7
- input.placeholderForeground#6D736A
- inputOption.activeBackground#8FBF8F33
- inputOption.activeBorder#8FBF8F
- inputOption.activeForeground#AEB7A8
- list.activeSelectionBackground#41493D
- list.activeSelectionForeground#AEB6A7
- list.dropBackground#20261D
- list.focusBackground#41493D
- list.focusForeground#AEB6A7
- list.highlightForeground#8FBF8F
- list.hoverBackground#41493D
- list.hoverForeground#AEB6A7
- list.inactiveSelectionBackground#41493D
- list.inactiveSelectionForeground#AEB6A7
- listFilterWidget.background#30372D
- listFilterWidget.noMatchesOutline#B45F67
- listFilterWidget.outline#8FBF8F
- menu.background#30372D
- menu.border#AEB2A6
- menu.foreground#AEB6A7
- menu.selectionBackground#41493D
- menu.selectionBorder#41493D00
- menu.selectionForeground#AEB6A7
- menu.separatorBackground#41493D
- menubar.selectionBackground#41493D
- menubar.selectionBorder#41493D
- menubar.selectionForeground#AEB6A7
- merge.commonContentBackground#30372D
- merge.commonHeaderBackground#41493D
- merge.currentContentBackground#5F806A33
- merge.currentHeaderBackground#5F806A66
- merge.incomingContentBackground#4B6F9933
- merge.incomingHeaderBackground#4B6F9966
- minimap.background#262E23
- minimap.errorHighlight#B45F67
- minimap.findMatchHighlight#E8B84A66
- minimap.selectionHighlight#8FBF8F44
- minimapGutter.addedBackground#76957F
- minimapGutter.deletedBackground#B45F67
- minimapGutter.modifiedBackground#7187A5
- notificationCenter.border#41493D
- notificationCenterHeader.background#30372D
- notificationCenterHeader.foreground#AEB2A6
- notifications.background#30372D
- notifications.border#41493D
- notifications.foreground#AEB2A6
- notificationsErrorIcon.foreground#B45F67
- notificationsInfoIcon.foreground#8FBF8F
- notificationsWarningIcon.foreground#9A8050
- notificationToast.border#41493D
- panel.background#30372D
- panel.border#41493D
- panelSection.border#41493D
- panelTitle.activeBorder#8FBF8F
- panelTitle.activeForeground#AEB6A7
- panelTitle.inactiveForeground#AEB6A7
- peekView.border#AEB2A6
- peekViewEditor.background#30372D
- peekViewEditor.matchHighlightBackground#E8B84A33
- peekViewEditor.matchHighlightBorder#E8B84A66
- peekViewEditorGutter.background#262E23
- peekViewResult.background#30372D
- peekViewResult.fileForeground#657A62
- peekViewResult.lineForeground#AEB6A7
- peekViewResult.matchHighlightBackground#E8B84A33
- peekViewResult.selectionBackground#41493D
- peekViewResult.selectionForeground#AEB6A7
- peekViewTitle.background#30372D
- peekViewTitleDescription.foreground#AEB6A7
- peekViewTitleLabel.foreground#657A62
- pickerGroup.border#AEB2A6
- pickerGroup.foreground#8FBF8F
- progressBar.background#8FBF8F
- scrollbar.shadow#00000018
- scrollbarSlider.activeBackground#9EA49A99
- scrollbarSlider.background#AEB2A666
- scrollbarSlider.hoverBackground#9EA49A88
- selection.background#41493D
- settings.focusedRowBackground#30372D84
- settings.headerForeground#657A62
- sideBar.background#30372D
- sideBar.border#41493D
- sideBar.dropBackground#C7CAC0
- sideBar.foreground#AEB7A8
- sideBarSectionHeader.background#262E23
- sideBarSectionHeader.border#2E372A
- sideBarSectionHeader.foreground#AEB7A8
- sideBarTitle.foreground#AEB7A8
- statusBar.background#30372D
- statusBar.border#41493D
- statusBar.debuggingBackground#5F806A
- statusBar.debuggingForeground#657A62
- statusBar.foreground#AEB7A8
- statusBar.noFolderBackground#30372D
- statusBar.noFolderForeground#AEB7A8
- statusBarItem.activeBackground#FFFFFF25
- statusBarItem.errorBackground#A64F58
- statusBarItem.errorForeground#A64F58
- statusBarItem.errorHoverBackground#B45F67
- statusBarItem.hoverBackground#41493D
- statusBarItem.hoverForeground#8FBF8F
- statusBarItem.remoteBackground#8FBF8F
- statusBarItem.remoteForeground#262E23
- statusBarItem.remoteHoverBackground#3A9A8E
- statusBarItem.remoteHoverForeground#262E23
- tab.activeBackground#262E23
- tab.activeBorder#41493D
- tab.activeBorderTop#8FBF8F
- tab.activeForeground#AEB7A8
- tab.border#41493D
- tab.inactiveBackground#30372D
- tab.inactiveForeground#7F897D
- terminal.ansiBlack#141810
- terminal.ansiBlue#6B8FBE
- terminal.ansiBrightBlack#657A62
- terminal.ansiBrightBlue#6889B2
- terminal.ansiBrightCyan#438D85
- terminal.ansiBrightGreen#9ED191
- terminal.ansiBrightMagenta#9A6C76
- terminal.ansiBrightRed#B45F67
- terminal.ansiBrightWhite#F0F1EA
- terminal.ansiBrightYellow#9A8050
- terminal.ansiCyan#287A73
- terminal.ansiGreen#7EBB71
- terminal.ansiMagenta#895B66
- terminal.ansiRed#A64F58
- terminal.ansiWhite#AEB7A8
- terminal.ansiYellow#806A3F
- terminal.border#41493D
- terminal.foreground#657A62
- terminal.selectionBackground#BFCBC5
- terminalCursor.background#657A62
- terminalCursor.foreground#657A62
- textCodeBlock.background#30372D
- textLink.activeForeground#657A62
- textLink.foreground#8FBF8F
- titleBar.activeBackground#30372D
- titleBar.activeForeground#AEB6A7
- titleBar.border#41493D
- titleBar.inactiveBackground#30372D
- titleBar.inactiveForeground#AEB6A7
- tree.indentGuidesStroke#41493D
- walkThrough.embeddedEditorBackground#262E23
- 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 | #CC8C94 | — |
| 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 | #B3BAAE | — |
| comment, keyword.other.documentation, punctuation.definition.comment, punctuation.definition.block.tag.jsdoc, storage.type.class.jsdoc, source.embedded.ts, string.quoted.docstring | #8D9689 | 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 | #6DADAD | — |
| emphasis md, entity.name.function, entity.other.alias, markup.heading.setext, markup.quote.markdown, support.function.builtin.python, support.variable, token.package, variable.function | #B095C7 | — |
| 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 | #85A3C7 | — |
| invalid, markup.deleted.diff, token.error-token | #EB6259 | — |
| markup.changed.diff, markup.italic, todo, token.warn-token | #CC937A | — |
| markup.inserted.diff, markup.underline.link | #8FBF8F | — |