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#3B8B6E22
- activityBar.background#1B1B1B
- activityBar.border#212121
- activityBar.foreground#3B8B6E
- activityBar.inactiveForeground#7A7A7A
- activityBarBadge.background#8A8A8A
- activityBarBadge.foreground#1B1B1B
- badge.background#7A7A7A
- badge.foreground#1B1B1B
- banner.background#272727
- banner.foreground#8A8A8A
- banner.iconForeground#8A8A8A
- breadcrumb.activeSelectionForeground#8A8A8A
- breadcrumb.background#0F0F0F
- breadcrumb.focusForeground#8A8A8A
- breadcrumb.foreground#7A7A7A
- button.background#3B8B6E
- button.foreground#0F0F0F
- button.hoverBackground#4FA678
- button.secondaryBackground#8A8A8A
- button.secondaryForeground#0F0F0F
- button.secondaryHoverBackground#7F7F7F
- checkbox.background#212121
- checkbox.border#272727
- checkbox.foreground#8A8A8A
- debugExceptionWidget.background#161616
- debugExceptionWidget.border#272727
- debugToolBar.background#1B1B1B
- debugToolBar.border#272727
- diffEditor.border#272727
- diffEditor.insertedTextBackground#3B8B6E25
- diffEditor.removedTextBackground#993A3625
- dropdown.background#212121
- dropdown.border#272727
- dropdown.foreground#8A8A8A
- editor.background#0F0F0F
- editor.findMatchBackground#3B8B6E55
- editor.findMatchBorder#3B8B6E88
- editor.findMatchHighlightBackground#4FA67822
- editor.findMatchHighlightBorder#4FA67866
- editor.findRangeHighlightBackground#4FA67822
- editor.findRangeHighlightBorder#4FA67800
- editor.foldBackground#121212
- editor.hoverHighlightBackground#3B8B6E55
- editor.inactiveSelectionBackground#3B8B6E55
- editor.lineHighlightBackground#21212184
- editor.lineHighlightBorder#21212100
- editor.rangeHighlightBackground#21212144
- editor.rangeHighlightBorder#ffffff00
- editor.selectionBackground#3B8B6E55
- editor.selectionHighlightBackground#4FA67822
- editor.selectionHighlightBorder#4FA67866
- editor.wordHighlightBackground#3B8B6E55
- editor.wordHighlightStrongBackground#3B8B6E55
- editorBracketHighlight.foreground1#438F8F
- editorBracketHighlight.foreground2#438F8F
- editorBracketHighlight.foreground3#438F8F
- editorBracketHighlight.unexpectedBracket.foreground#993A36
- editorBracketMatch.background#1B1B1B
- editorBracketMatch.border#212121
- editorCodeLens.foreground#7F7F7F
- editorCursor.background#438F8F
- editorCursor.foreground#438F8F
- editorError.background#993A3600
- editorError.border#ffffff00
- editorError.foreground#993A36
- editorGroup.border#272727
- editorGroup.dropBackground#4FA67822
- editorGroup.emptyBackground#0F0F0F
- editorGroupHeader.tabsBackground#161616
- editorGroupHeader.tabsBorder#212121
- editorGutter.addedBackground#3B8B6E
- editorGutter.background#0F0F0F
- editorGutter.commentRangeForeground#7F7F7F
- editorGutter.deletedBackground#993A36
- editorGutter.foldingControlForeground#6E5E53
- editorGutter.modifiedBackground#438F8F
- editorHoverWidget.background#161616
- editorHoverWidget.border#212121
- editorHoverWidget.foreground#8A8A8A
- editorIndentGuide.activeBackground#272727
- editorIndentGuide.background#1B1B1B
- editorInfo.background#6DA8F300
- editorInfo.border#ffffff00
- editorInfo.foreground#6DA8F3
- editorLineNumber.activeForeground#7A7A7A
- editorLineNumber.foreground#272727
- editorLink.activeForeground#8A8A8A
- editorMarkerNavigation.background#1B1B1B
- editorMarkerNavigationError.background#993A36
- editorMarkerNavigationInfo.background#6D85C6
- editorMarkerNavigationWarning.background#A77455
- editorOverviewRuler.background#121212
- editorOverviewRuler.border#212121
- editorOverviewRuler.findMatchForeground#4FA678
- editorRuler.foreground#212121
- editorSuggestWidget.background#161616
- editorSuggestWidget.border#212121
- editorSuggestWidget.foreground#8A8A8A
- editorSuggestWidget.highlightForeground#4FA678
- editorSuggestWidget.selectedBackground#3B8B6E50
- editorWarning.background#A7745500
- editorWarning.border#ffffff00
- editorWarning.foreground#A77455
- editorWhitespace.foreground#212121
- editorWidget.background#161616
- editorWidget.foreground#8A8A8A
- editorWidget.resizeBorder#272727
- focusBorder#272727
- foreground#8A8A8A
- gitDecoration.addedResourceForeground#3B8B6E
- gitDecoration.conflictingResourceForeground#E2C79E
- gitDecoration.deletedResourceForeground#993A36
- gitDecoration.ignoredResourceForeground#7A7A7A
- gitDecoration.modifiedResourceForeground#438F8F
- gitDecoration.stageDeletedResourceForeground#993A36
- gitDecoration.stageModifiedResourceForeground#A77455
- gitDecoration.submoduleResourceForeground#E2C79E
- gitDecoration.untrackedResourceForeground#7A7A7A
- icon.foreground#8A8A8A
- input.background#0F0F0F
- input.border#212121
- input.foreground#8A8A8A
- input.placeholderForeground#7A7A7A
- inputOption.activeBackground#4FA67866
- inputOption.activeBorder#4FA678
- inputOption.activeForeground#8A8A8A
- list.activeSelectionBackground#212121
- list.activeSelectionForeground#8A8A8A
- list.dropBackground#121212
- list.focusBackground#3B8B6E24
- list.focusForeground#8A8A8A
- list.highlightForeground#4FA678
- list.hoverBackground#212121
- list.hoverForeground#8A8A8A
- list.inactiveSelectionBackground#1B1B1B
- list.inactiveSelectionForeground#8A8A8A
- listFilterWidget.background#1B1B1B
- listFilterWidget.noMatchesOutline#993A36
- listFilterWidget.outline#00000000
- menu.background#1B1B1B
- menu.border#272727
- menu.foreground#8A8A8A
- menu.selectionBackground#212121
- menu.selectionBorder#27272700
- menu.selectionForeground#8A8A8A
- menu.separatorBackground#272727
- menubar.selectionBackground#212121
- menubar.selectionBorder#272727
- menubar.selectionForeground#8A8A8A
- merge.commonContentBackground#121212
- merge.commonHeaderBackground#1B1B1B
- merge.currentContentBackground#3B8B6E25
- merge.currentHeaderBackground#3B8B6E75
- merge.incomingContentBackground#6DA8F325
- merge.incomingHeaderBackground#6DA8F375
- minimap.background#161616
- minimap.errorHighlight#993A36
- minimap.findMatchHighlight#4FA67866
- minimap.selectionHighlight#6DA8F344
- minimap.warningHighlight#A77455
- minimapGutter.addedBackground#3B8B6E
- minimapGutter.deletedBackground#993A36
- minimapGutter.modifiedBackground#438F8F
- notificationCenter.border#272727
- notificationCenterHeader.background#212121
- notificationCenterHeader.foreground#8A8A8A
- notifications.background#1B1B1B
- notifications.border#212121
- notifications.foreground#8A8A8A
- notificationsErrorIcon.foreground#993A36
- notificationsInfoIcon.foreground#6D85C6
- notificationsWarningIcon.foreground#A77455
- notificationToast.border#272727
- panel.background#121212
- panel.border#212121
- panelSection.border#212121
- panelTitle.activeBorder#4FA678
- panelTitle.activeForeground#8A8A8A
- panelTitle.inactiveForeground#7A7A7A
- peekView.border#272727
- peekViewEditor.background#121212
- peekViewEditor.matchHighlightBackground#4FA67822
- peekViewEditor.matchHighlightBorder#4FA67866
- peekViewEditorGutter.background#161616
- peekViewResult.background#161616
- peekViewResult.fileForeground#8A8A8A
- peekViewResult.lineForeground#8A8A8A
- peekViewResult.matchHighlightBackground#4FA67822
- peekViewResult.selectionBackground#3B8B6E55
- peekViewResult.selectionForeground#8A8A8A
- peekViewTitle.background#1B1B1B
- peekViewTitleDescription.foreground#7A7A7A
- peekViewTitleLabel.foreground#8A8A8A
- pickerGroup.border#212121
- pickerGroup.foreground#6D85C6
- progressBar.background#4FA678
- scrollbar.shadow#27272788
- scrollbarSlider.activeBackground#6E5E5388
- scrollbarSlider.background#21212188
- scrollbarSlider.hoverBackground#27272788
- selection.background#4FA67866
- settings.focusedRowBackground#21212184
- settings.headerForeground#8A8A8A
- sideBar.background#161616
- sideBar.border#212121
- sideBar.dropBackground#121212
- sideBar.foreground#8A8A8A
- sideBarSectionHeader.background#1B1B1B
- sideBarSectionHeader.border#212121
- sideBarSectionHeader.foreground#8A8A8A
- sideBarTitle.foreground#8A8A8A
- statusBar.background#1B1B1B
- statusBar.border#212121
- statusBar.debuggingBackground#A77455
- statusBar.debuggingForeground#0F0F0F
- statusBar.foreground#8A8A8A
- statusBar.noFolderBackground#1B1B1B
- statusBar.noFolderForeground#8A8A8A
- statusBarItem.activeBackground#FFFFFF25
- statusBarItem.errorBackground#B03C3A
- statusBarItem.errorForeground#8A8A8A
- statusBarItem.errorHoverBackground#993A36
- statusBarItem.hoverBackground#212121
- statusBarItem.remoteBackground#3B8B6E
- statusBarItem.remoteForeground#0F0F0F
- statusBarItem.remoteHoverBackground#4FA678
- statusBarItem.remoteHoverForeground#0F0F0F
- tab.activeBackground#0F0F0F
- tab.activeBorder#00000000
- tab.activeBorderTop#4FA678
- tab.activeForeground#8A8A8A
- tab.border#212121
- tab.inactiveBackground#121212
- tab.inactiveForeground#7A7A7A
- terminal.ansiBlack#000000
- terminal.ansiBlue#6D85C6
- terminal.ansiBrightBlack#1C1C1C
- terminal.ansiBrightBlue#6DA8F3
- terminal.ansiBrightCyan#5DA9B0
- terminal.ansiBrightGreen#4FA678
- terminal.ansiBrightMagenta#D38FBF
- terminal.ansiBrightRed#FF4F4F
- terminal.ansiBrightWhite#F5F5F5
- terminal.ansiBrightYellow#C19A66
- terminal.ansiCyan#438F8F
- terminal.ansiGreen#3B8B6E
- terminal.ansiMagenta#9F7C8F
- terminal.ansiRed#B03C3A
- terminal.ansiWhite#FFFFFF
- terminal.ansiYellow#8B6A4D
- terminal.border#212121
- terminal.foreground#8A8A8A
- terminal.selectionBackground#7F6F9642
- terminalCursor.background#438F8F
- terminalCursor.foreground#438F8F
- textLink.activeForeground#3B8B6E
- textLink.foreground#6D85C6
- titleBar.activeBackground#1B1B1B
- titleBar.activeForeground#8A8A8A
- titleBar.border#212121
- titleBar.inactiveBackground#1B1B1B
- titleBar.inactiveForeground#7A7A7A
- tree.indentGuidesStroke#1B1B1B
- walkThrough.embeddedEditorBackground#121212
- widget.shadow#27272748
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| accent | #6D85C6 | — |
| beginning.punctuation | #438F8F | — |
| block.scope | #438F8F | — |
| comment | #7F7F7F | italic |
| constant, constant.character, constant.keyword, constant.other | #438F8F | — |
| constant.language | #9F7C8F | italic |
| constant.numeric | #9F7C8F | — |
| control.elements | #438F8F | — |
| emphasis md | #86759F | — |
| entity.global, entity.name.variable | #9F7C8F | — |
| entity.name, entity.other.alias | #86759F | — |
| entity.name.type.ts | #847A5F | — |
| entity.name.type, entity.name.type.cpp, entity.other.inherited-class | #847A5F | — |
| entity.name.function.operator.cpp, entity.name.function.operator.member.cpp, entity.name.type.class.templated.cpp, entity.name.namespace.cpp | #6D85C6 | — |
| entity.name.section, entity.other.attribute-name | #438F8F | — |
| function.brace | #438F8F | — |
| function.parameter | #9B7656 | — |
| import.storage.java | #9F7C8F | — |
| inline-color-decoration rgb-value | #9F7C8F | — |
| invalid, invalid.broken, invalid.deprecated, invalid.illegal, invalid.unimplemented | #993A36 | — |
| keyword, keyword.control, keyword.operator, keyword.other | #6D85C6 | — |
| keyword.operator.expression, keyword.operator.new, keyword.operator.optional | #6D85C6 | italic |
| keyword.other.documentation | #7F7F7F | italic |
| keyword.other.unit | #438F8F | — |
| less rgb-value | #9F7C8F | — |
| markup | #438F8F | — |
| markup.changed.diff | #A77455 | — |
| markup.deleted.diff | #993A36 | — |
| markup.heading.setext, markup.italic | #86759F | — |
| markup.inserted.diff | #3B8B6E | — |
| markup.quote.markdown | #9F7C8F | — |
| meta.arguments, meta.property, meta.scope, meta.symbol | #847A5F | — |
| meta.object-literal.key, meta.scope | #9B7656 | — |
| 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 | #438F8F | — |
| meta.function | #438F8F | — |
| meta.template | #9F7C8F | — |
| punctuation.bracket.angle, punctuation.section.angle-brackets | #847A5F | — |
| punctuation.bracket, punctuation.definition, punctuation.operator, punctuation.parenthesis, punctuation.section, punctuation.separator, punctuation.terminator | #438F8F | — |
| punctuation.definition.directive | #6D85C6 | — |
| punctuation.definition.comment | #7F7F7F | italic |
| punctuation.definition.string | #9F7C8F | — |
| rgb-value | #438F8F | — |
| selector | #438F8F | — |
| source | #438F8F | — |
| source.json meta.structure.array.json > constant.language.json, source.json meta.structure.dictionary.json > constant.language.json | #9F7C8F | 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 | #9F7C8F | — |
| storage, storage.modifier, storage.type.function, storage.type.ts | #6D85C6 | — |
| storage.type, support.type | #847A5F | — |
| punctuation.definition.annotation, storage.type.annotation | #9B7656 | — |
| punctuation.definition.block.tag.jsdoc, storage.type.class.jsdoc, source.embedded.ts | #7F7F7F | italic |
| string | #9F7C8F | — |
| string.quoted.docstring | #7F7F7F | italic |
| support.class, support.function, support.module.node, support.other, support.token.decorator.python | #9B7656 | — |
| support.function.builtin.python | #86759F | — |
| support.constant | #6D85C6 | — |
| support.type.property-name, support.type.vendored.property-name.css | #438F8F | — |
| support.variable | #86759F | — |
| text | #438F8F | — |
| todo | #A77455 | — |
| token.debug-token | #9B7656 | — |
| token.error-token | #993A36 | — |
| token.info-token, token.storage | #6D85C6 | — |
| token.package | #86759F | — |
| token.variable | #438F8F | — |
| token.warn-token | #A77455 | — |
| variable | #438F8F | — |
| variable.function, variable.other | #86759F | — |
| variable.language | #6D85C6 | italic |
| variable.other | #438F8F | — |
| variable.parameter | #438F8F | — |
| wikiword.xi | #6D85C6 | — |