Chromatic
Publisher: cakerayThemes in package: 3
A trio of harmonious themes meant for all day use: Dawn, Dusk, and Eclipse.
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#6BBF8922
- activityBar.background#5C4E44
- activityBar.border#6F5F53
- activityBar.foreground#6BBF89
- activityBar.inactiveForeground#B0B0B0
- activityBarBadge.background#E0E0E0
- activityBarBadge.foreground#5C4E44
- badge.background#B0B0B0
- badge.foreground#5C4E44
- banner.background#7F6F66
- banner.foreground#E0E0E0
- banner.iconForeground#E0E0E0
- breadcrumb.activeSelectionForeground#E0E0E0
- breadcrumb.background#2D2620
- breadcrumb.focusForeground#E0E0E0
- breadcrumb.foreground#B0B0B0
- button.background#569E75
- button.foreground#2D2620
- button.hoverBackground#6BBF89
- button.secondaryBackground#8C7A6D
- button.secondaryForeground#2D2620
- button.secondaryHoverBackground#7F6F66
- checkbox.background#6F5F53
- checkbox.border#7F6F66
- checkbox.foreground#E0E0E0
- debugExceptionWidget.background#4A3C34
- debugExceptionWidget.border#7F6F66
- debugToolBar.background#5C4E44
- debugToolBar.border#7F6F66
- diffEditor.border#7F6F66
- diffEditor.insertedTextBackground#569E7525
- diffEditor.removedTextBackground#CC4A4525
- dropdown.background#6F5F53
- dropdown.border#7F6F66
- dropdown.foreground#E0E0E0
- editor.background#2D2620
- editor.findMatchBackground#569E7566
- editor.findMatchBorder#569E7599
- editor.findMatchHighlightBackground#6BBF8922
- editor.findMatchHighlightBorder#6BBF8988
- editor.findRangeHighlightBackground#6BBF8922
- editor.findRangeHighlightBorder#6BBF8900
- editor.foldBackground#3A322B
- editor.hoverHighlightBackground#569E7544
- editor.inactiveSelectionBackground#569E7522
- editor.lineHighlightBackground#6F5F5384
- editor.lineHighlightBorder#6F5F5300
- editor.rangeHighlightBackground#6F5F5344
- editor.rangeHighlightBorder#ffffff00
- editor.selectionBackground#569E7566
- editor.selectionHighlightBackground#6BBF8944
- editor.selectionHighlightBorder#6BBF8988
- editor.wordHighlightBackground#569E7544
- editor.wordHighlightStrongBackground#569E7544
- editorBracketHighlight.foreground1#98CDD6
- editorBracketHighlight.foreground2#98CDD6
- editorBracketHighlight.foreground3#98CDD6
- editorBracketHighlight.unexpectedBracket.foreground#CC4A45
- editorBracketMatch.background#5C4E44
- editorBracketMatch.border#6F5F53
- editorCodeLens.foreground#B3B3B3
- editorCursor.background#98CDD6
- editorCursor.foreground#98CDD6
- editorError.background#CC4A4500
- editorError.border#ffffff00
- editorError.foreground#CC4A45
- editorGroup.border#7F6F66
- editorGroup.dropBackground#6BBF8944
- editorGroup.emptyBackground#2D2620
- editorGroupHeader.tabsBackground#4A3C34
- editorGroupHeader.tabsBorder#6F5F53
- editorGutter.addedBackground#569E75
- editorGutter.background#2D2620
- editorGutter.commentRangeForeground#B3B3B3
- editorGutter.deletedBackground#CC4A45
- editorGutter.foldingControlForeground#8C7A6D
- editorGutter.modifiedBackground#98CDD6
- editorHoverWidget.background#4A3C34
- editorHoverWidget.border#6F5F53
- editorHoverWidget.foreground#E0E0E0
- editorIndentGuide.activeBackground#7F6F66
- editorIndentGuide.background#5C4E44
- editorInfo.background#6DA8F300
- editorInfo.border#ffffff00
- editorInfo.foreground#6DA8F3
- editorLineNumber.activeForeground#8C7A6D
- editorLineNumber.foreground#5C4E44
- editorLink.activeForeground#E0E0E0
- editorMarkerNavigation.background#5C4E44
- editorMarkerNavigationError.background#CC4A45
- editorMarkerNavigationInfo.background#84AFE0
- editorMarkerNavigationWarning.background#D99B75
- editorOverviewRuler.background#3A322B
- editorOverviewRuler.border#6F5F53
- editorOverviewRuler.findMatchForeground#6BBF89
- editorRuler.foreground#6F5F53
- editorSuggestWidget.background#4A3C34
- editorSuggestWidget.border#6F5F53
- editorSuggestWidget.foreground#E0E0E0
- editorSuggestWidget.highlightForeground#6BBF89
- editorSuggestWidget.selectedBackground#569E7550
- editorWarning.background#D99B7500
- editorWarning.border#ffffff00
- editorWarning.foreground#D99B75
- editorWhitespace.foreground#6F5F53
- editorWidget.background#4A3C34
- editorWidget.foreground#E0E0E0
- editorWidget.resizeBorder#7F6F66
- focusBorder#7F6F66
- foreground#E0E0E0
- gitDecoration.addedResourceForeground#569E75
- gitDecoration.conflictingResourceForeground#E2C79E
- gitDecoration.deletedResourceForeground#CC4A45
- gitDecoration.ignoredResourceForeground#B0B0B0
- gitDecoration.modifiedResourceForeground#98CDD6
- gitDecoration.stageDeletedResourceForeground#CC4A45
- gitDecoration.stageModifiedResourceForeground#D99B75
- gitDecoration.submoduleResourceForeground#E2C79E
- gitDecoration.untrackedResourceForeground#B0B0B0
- icon.foreground#E0E0E0
- input.background#2D2620
- input.border#6F5F53
- input.foreground#E0E0E0
- input.placeholderForeground#B0B0B0
- inputOption.activeBackground#6BBF8988
- inputOption.activeBorder#6BBF89
- inputOption.activeForeground#E0E0E0
- list.activeSelectionBackground#6F5F53
- list.activeSelectionForeground#E0E0E0
- list.dropBackground#3A322B
- list.focusBackground#569E7524
- list.focusForeground#E0E0E0
- list.highlightForeground#6BBF89
- list.hoverBackground#6F5F53
- list.hoverForeground#E0E0E0
- list.inactiveSelectionBackground#5C4E44
- list.inactiveSelectionForeground#E0E0E0
- listFilterWidget.background#5C4E44
- listFilterWidget.noMatchesOutline#CC4A45
- listFilterWidget.outline#00000000
- menu.background#5C4E44
- menu.border#7F6F66
- menu.foreground#E0E0E0
- menu.selectionBackground#6F5F53
- menu.selectionBorder#7F6F6600
- menu.selectionForeground#E0E0E0
- menu.separatorBackground#7F6F66
- menubar.selectionBackground#6F5F53
- menubar.selectionBorder#7F6F66
- menubar.selectionForeground#E0E0E0
- merge.commonContentBackground#3A322B
- merge.commonHeaderBackground#5C4E44
- merge.currentContentBackground#569E7525
- merge.currentHeaderBackground#569E7575
- merge.incomingContentBackground#6DA8F325
- merge.incomingHeaderBackground#6DA8F375
- minimap.background#4A3C34
- minimap.errorHighlight#CC4A45
- minimap.findMatchHighlight#6BBF8988
- minimap.selectionHighlight#6DA8F344
- minimap.warningHighlight#D99B75
- minimapGutter.addedBackground#569E75
- minimapGutter.deletedBackground#CC4A45
- minimapGutter.modifiedBackground#98CDD6
- notificationCenter.border#7F6F66
- notificationCenterHeader.background#6F5F53
- notificationCenterHeader.foreground#E0E0E0
- notifications.background#5C4E44
- notifications.border#6F5F53
- notifications.foreground#E0E0E0
- notificationsErrorIcon.foreground#CC4A45
- notificationsInfoIcon.foreground#84AFE0
- notificationsWarningIcon.foreground#D99B75
- notificationToast.border#7F6F66
- panel.background#3A322B
- panel.border#6F5F53
- panelSection.border#6F5F53
- panelTitle.activeBorder#6BBF89
- panelTitle.activeForeground#E0E0E0
- panelTitle.inactiveForeground#B0B0B0
- peekView.border#7F6F66
- peekViewEditor.background#3A322B
- peekViewEditor.matchHighlightBackground#6BBF8944
- peekViewEditor.matchHighlightBorder#6BBF8988
- peekViewEditorGutter.background#4A3C34
- peekViewResult.background#4A3C34
- peekViewResult.fileForeground#E0E0E0
- peekViewResult.lineForeground#E0E0E0
- peekViewResult.matchHighlightBackground#6BBF8944
- peekViewResult.selectionBackground#569E7566
- peekViewResult.selectionForeground#E0E0E0
- peekViewTitle.background#5C4E44
- peekViewTitleDescription.foreground#B0B0B0
- peekViewTitleLabel.foreground#E0E0E0
- pickerGroup.border#6F5F53
- pickerGroup.foreground#84AFE0
- progressBar.background#6BBF89
- scrollbar.shadow#7F6F6688
- scrollbarSlider.activeBackground#8C7A6D88
- scrollbarSlider.background#6F5F5388
- scrollbarSlider.hoverBackground#7F6F6688
- selection.background#6BBF8988
- settings.focusedRowBackground#6F5F5384
- settings.headerForeground#E0E0E0
- sideBar.background#4A3C34
- sideBar.border#6F5F53
- sideBar.dropBackground#3A322B
- sideBar.foreground#E0E0E0
- sideBarSectionHeader.background#5C4E44
- sideBarSectionHeader.border#6F5F53
- sideBarSectionHeader.foreground#E0E0E0
- sideBarTitle.foreground#E0E0E0
- statusBar.background#5C4E44
- statusBar.border#6F5F53
- statusBar.debuggingBackground#D99B75
- statusBar.debuggingForeground#2D2620
- statusBar.foreground#E0E0E0
- statusBar.noFolderBackground#5C4E44
- statusBar.noFolderForeground#E0E0E0
- statusBarItem.activeBackground#FFFFFF25
- statusBarItem.errorBackground#B03C3A
- statusBarItem.errorForeground#E0E0E0
- statusBarItem.errorHoverBackground#CC4A45
- statusBarItem.hoverBackground#6F5F53
- statusBarItem.remoteBackground#569E75
- statusBarItem.remoteForeground#2D2620
- statusBarItem.remoteHoverBackground#6BBF89
- statusBarItem.remoteHoverForeground#2D2620
- tab.activeBackground#2D2620
- tab.activeBorder#00000000
- tab.activeBorderTop#6BBF89
- tab.activeForeground#E0E0E0
- tab.border#6F5F53
- tab.inactiveBackground#3A322B
- tab.inactiveForeground#B0B0B0
- terminal.ansiBlack#202020
- terminal.ansiBlue#84AFE0
- terminal.ansiBrightBlack#404040
- terminal.ansiBrightBlue#6DA8F3
- terminal.ansiBrightCyan#61A7D1
- terminal.ansiBrightGreen#569E75
- terminal.ansiBrightMagenta#9C3A58
- terminal.ansiBrightRed#CC4A45
- terminal.ansiBrightWhite#B0B0B0
- terminal.ansiBrightYellow#E2C79E
- terminal.ansiCyan#98CDD6
- terminal.ansiGreen#6BBF89
- terminal.ansiMagenta#E0A4B4
- terminal.ansiRed#B03C3A
- terminal.ansiWhite#E0E0E0
- terminal.ansiYellow#CBA477
- terminal.border#6F5F53
- terminal.foreground#E0E0E0
- terminal.selectionBackground#B6A6E042
- terminalCursor.background#98CDD6
- terminalCursor.foreground#98CDD6
- textLink.activeForeground#6BBF89
- textLink.foreground#84AFE0
- titleBar.activeBackground#5C4E44
- titleBar.activeForeground#E0E0E0
- titleBar.border#6F5F53
- titleBar.inactiveBackground#5C4E44
- titleBar.inactiveForeground#B0B0B0
- tree.indentGuidesStroke#7F6F66
- walkThrough.embeddedEditorBackground#3A322B
- widget.shadow#7F6F6648
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| accent | #84AFE0 | — |
| beginning.punctuation | #88B8C0 | — |
| block.scope | #88B8C0 | — |
| comment | #B3B3B3 | italic |
| constant, constant.character, constant.keyword, constant.other | #88B8C0 | — |
| constant.language | #D79DAC | italic |
| constant.numeric | #D79DAC | — |
| control.elements | #88B8C0 | — |
| emphasis md | #B6A6E0 | — |
| entity.global, entity.name.variable | #D79DAC | — |
| entity.name, entity.other.alias | #B6A6E0 | — |
| entity.name.type.ts | #B29F86 | — |
| entity.name.type, entity.name.type.cpp, entity.other.inherited-class | #B29F86 | — |
| entity.name.function.operator.cpp, entity.name.function.operator.member.cpp, entity.name.type.class.templated.cpp, entity.name.namespace.cpp | #84AFE0 | — |
| entity.name.section, entity.other.attribute-name | #88B8C0 | — |
| function.brace | #88B8C0 | — |
| function.parameter | #CBA477 | — |
| import.storage.java | #D79DAC | — |
| inline-color-decoration rgb-value | #D79DAC | — |
| invalid, invalid.broken, invalid.deprecated, invalid.illegal, invalid.unimplemented | #CC4A45 | — |
| keyword, keyword.control, keyword.operator, keyword.other | #84AFE0 | — |
| keyword.operator.expression, keyword.operator.new, keyword.operator.optional | #84AFE0 | italic |
| keyword.other.documentation | #B3B3B3 | italic |
| keyword.other.unit | #88B8C0 | — |
| less rgb-value | #D79DAC | — |
| markup | #88B8C0 | — |
| markup.changed.diff | #D99B75 | — |
| markup.deleted.diff | #CC4A45 | — |
| markup.heading.setext, markup.italic | #B6A6E0 | — |
| markup.inserted.diff | #569E75 | — |
| markup.quote.markdown | #D79DAC | — |
| meta.arguments, meta.property, meta.symbol | #B29F86 | — |
| meta.object-literal.key, meta.scope | #CBA477 | — |
| meta.body.function.definition.cpp, meta.definition.class, meta.definition.variable, meta.function-call, meta.interface, meta.method, meta.method.java, meta.method-call, meta.require, meta.selector | #88B8C0 | — |
| meta.function | #88B8C0 | — |
| meta.template | #D79DAC | — |
| punctuation.bracket.angle, punctuation.section.angle-brackets | #B29F86 | — |
| punctuation.bracket, punctuation.definition, punctuation.operator, punctuation.parenthesis, punctuation.section, punctuation.separator, punctuation.terminator | #88B8C0 | — |
| punctuation.definition.directive | #84AFE0 | — |
| punctuation.definition.comment | #B3B3B3 | italic |
| punctuation.definition.string | #D79DAC | — |
| rgb-value | #88B8C0 | — |
| selector | #88B8C0 | — |
| source | #88B8C0 | — |
| source.json meta.structure.array.json > constant.language.json, source.json meta.structure.dictionary.json > constant.language.json | #D79DAC | italic |
| source.json meta.structure.array.json > value.json > string.quoted.json, source.json meta.structure.dictionary.json > string.quoted.json, source.json meta.structure.dictionary.json > value.json > string.quoted.json | #D79DAC | — |
| storage, storage.modifier, storage.type.function, storage.type.ts | #84AFE0 | — |
| storage.type, support.type | #B29F86 | — |
| punctuation.definition.annotation, storage.type.annotation | #CBA477 | — |
| punctuation.definition.block.tag.jsdoc, storage.type.class.jsdoc, source.embedded.ts | #B3B3B3 | italic |
| string | #D79DAC | — |
| string.quoted.docstring | #B3B3B3 | italic |
| support.class, support.function, support.module.node, support.other, support.token.decorator.python | #CBA477 | — |
| support.function.builtin.python | #B6A6E0 | — |
| support.constant | #84AFE0 | — |
| support.type.property-name, support.type.vendored.property-name.css | #88B8C0 | — |
| support.variable | #B6A6E0 | — |
| text | #88B8C0 | — |
| todo | #D99B75 | — |
| token.debug-token | #CBA477 | — |
| token.error-token | #CC4A45 | — |
| token.info-token, token.storage | #84AFE0 | — |
| token.package | #B6A6E0 | — |
| token.variable | #88B8C0 | — |
| token.warn-token | #D99B75 | — |
| variable | #88B8C0 | — |
| variable.function, variable.other | #B6A6E0 | — |
| variable.language | #84AFE0 | italic |
| variable.other | #88B8C0 | — |
| variable.parameter | #88B8C0 | — |
| wikiword.xi | #84AFE0 | — |