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#D9D3CA
- activityBar.border#C7BFB8
- activityBar.foreground#3B8B6E
- activityBar.inactiveForeground#766A63
- activityBarBadge.background#484848
- activityBarBadge.foreground#D9D3CA
- badge.background#484848
- badge.foreground#D9D3CA
- banner.background#766A63
- banner.foreground#F7F1E6
- banner.iconForeground#F7F1E6
- breadcrumb.activeSelectionForeground#121212
- breadcrumb.background#F7F1E6
- breadcrumb.focusForeground#121212
- breadcrumb.foreground#484848
- button.background#3B8B6E
- button.foreground#F7F1E6
- button.hoverBackground#00b050
- button.secondaryBackground#5E534D
- button.secondaryForeground#F7F1E6
- button.secondaryHoverBackground#766A63
- checkbox.background#C7BFB8
- checkbox.border#766A63
- checkbox.foreground#121212
- debugExceptionWidget.background#E6E0D5
- debugExceptionWidget.border#766A63
- debugToolBar.background#D9D3CA
- debugToolBar.border#766A63
- diffEditor.border#766A63
- diffEditor.insertedTextBackground#28A36425
- diffEditor.removedTextBackground#E0303025
- dropdown.background#C7BFB8
- dropdown.border#766A63
- dropdown.foreground#121212
- editor.background#F7F1E6
- editor.findMatchBackground#28A36466
- editor.findMatchBorder#28A36488
- editor.findMatchHighlightBackground#3B8B6E44
- editor.findMatchHighlightBorder#3B8B6E88
- editor.findRangeHighlightBackground#3B8B6E22
- editor.findRangeHighlightBorder#3B8B6E00
- editor.foldBackground#F1E8DE
- editor.hoverHighlightBackground#28A36444
- editor.inactiveSelectionBackground#28A36422
- editor.lineHighlightBackground#C7BFB884
- editor.lineHighlightBorder#C7BFB800
- editor.rangeHighlightBackground#C7BFB844
- editor.rangeHighlightBorder#ffffff00
- editor.selectionBackground#28A36466
- editor.selectionHighlightBackground#3B8B6E44
- editor.selectionHighlightBorder#3B8B6E88
- editor.wordHighlightBackground#28A36444
- editor.wordHighlightStrongBackground#28A36444
- editorBracketHighlight.foreground1#256F73
- editorBracketHighlight.foreground2#256F73
- editorBracketHighlight.foreground3#256F73
- editorBracketHighlight.unexpectedBracket.foreground#E03030
- editorBracketMatch.background#D9D3CA
- editorBracketMatch.border#C7BFB8
- editorCodeLens.foreground#848484
- editorCursor.background#256F73
- editorCursor.foreground#256F73
- editorError.background#E0303000
- editorError.border#ffffff00
- editorError.foreground#E03030
- editorGroup.border#766A63
- editorGroup.dropBackground#3B8B6E44
- editorGroup.emptyBackground#F7F1E6
- editorGroupHeader.tabsBackground#E6E0D5
- editorGroupHeader.tabsBorder#C7BFB8
- editorGutter.addedBackground#28A364
- editorGutter.background#F7F1E6
- editorGutter.commentRangeForeground#636363
- editorGutter.deletedBackground#E03030
- editorGutter.foldingControlForeground#5E534D
- editorGutter.modifiedBackground#256F73
- editorHoverWidget.background#E6E0D5
- editorHoverWidget.border#C7BFB8
- editorHoverWidget.foreground#121212
- editorIndentGuide.activeBackground#766A63
- editorIndentGuide.background#D9D3CA
- editorInfo.background#0099FF00
- editorInfo.border#ffffff00
- editorInfo.foreground#0099FF
- editorLineNumber.activeForeground#5E534D
- editorLineNumber.foreground#C7BFB8
- editorLink.activeForeground#121212
- editorMarkerNavigation.background#D9D3CA
- editorMarkerNavigationError.background#E03030
- editorMarkerNavigationInfo.background#0064C2
- editorMarkerNavigationWarning.background#CC6633
- editorOverviewRuler.background#F1E8DE
- editorOverviewRuler.border#C7BFB8
- editorOverviewRuler.findMatchForeground#3B8B6E
- editorRuler.foreground#C7BFB8
- editorSuggestWidget.background#E6E0D5
- editorSuggestWidget.border#C7BFB8
- editorSuggestWidget.foreground#121212
- editorSuggestWidget.highlightForeground#3B8B6E
- editorSuggestWidget.selectedBackground#28A36448
- editorWarning.background#CC663300
- editorWarning.border#ffffff00
- editorWarning.foreground#CC6633
- editorWhitespace.foreground#C7BFB8
- editorWidget.background#E6E0D5
- editorWidget.foreground#121212
- editorWidget.resizeBorder#766A63
- focusBorder#766A63
- foreground#121212
- gitDecoration.addedResourceForeground#28A364
- gitDecoration.conflictingResourceForeground#FF6699
- gitDecoration.deletedResourceForeground#E03030
- gitDecoration.ignoredResourceForeground#484848
- gitDecoration.modifiedResourceForeground#256F73
- gitDecoration.stageDeletedResourceForeground#E03030
- gitDecoration.stageModifiedResourceForeground#CC6633
- gitDecoration.submoduleResourceForeground#FF6699
- gitDecoration.untrackedResourceForeground#484848
- icon.foreground#121212
- input.background#F7F1E6
- input.border#C7BFB8
- input.foreground#121212
- input.placeholderForeground#484848
- inputOption.activeBackground#3B8B6E88
- inputOption.activeBorder#3B8B6E
- inputOption.activeForeground#121212
- list.activeSelectionBackground#C7BFB8
- list.activeSelectionForeground#121212
- list.dropBackground#F1E8DE
- list.focusBackground#28A36424
- list.focusForeground#121212
- list.highlightForeground#3B8B6E
- list.hoverBackground#C7BFB8
- list.hoverForeground#121212
- list.inactiveSelectionBackground#D9D3CA
- list.inactiveSelectionForeground#121212
- listFilterWidget.background#D9D3CA
- listFilterWidget.noMatchesOutline#E03030
- listFilterWidget.outline#00000000
- menu.background#D9D3CA
- menu.border#766A63
- menu.foreground#121212
- menu.selectionBackground#C7BFB8
- menu.selectionBorder#766A6300
- menu.selectionForeground#121212
- menu.separatorBackground#766A63
- menubar.selectionBackground#C7BFB8
- menubar.selectionBorder#766A63
- menubar.selectionForeground#121212
- merge.commonContentBackground#F1E8DE
- merge.commonHeaderBackground#D9D3CA
- merge.currentContentBackground#28A36425
- merge.currentHeaderBackground#28A36475
- merge.incomingContentBackground#0099FF25
- merge.incomingHeaderBackground#0099FF75
- minimap.background#E6E0D5
- minimap.errorHighlight#E03030
- minimap.findMatchHighlight#3B8B6E88
- minimap.selectionHighlight#0099FF44
- minimap.warningHighlight#CC6633
- minimapGutter.addedBackground#28A364
- minimapGutter.deletedBackground#E03030
- minimapGutter.modifiedBackground#256F73
- notificationCenter.border#766A63
- notificationCenterHeader.background#C7BFB8
- notificationCenterHeader.foreground#121212
- notifications.background#D9D3CA
- notifications.border#C7BFB8
- notifications.foreground#121212
- notificationsErrorIcon.foreground#E03030
- notificationsInfoIcon.foreground#0064C2
- notificationsWarningIcon.foreground#CC6633
- notificationToast.border#766A63
- panel.background#F1E8DE
- panel.border#C7BFB8
- panelSection.border#C7BFB8
- panelTitle.activeBorder#3B8B6E
- panelTitle.activeForeground#121212
- panelTitle.inactiveForeground#484848
- peekView.border#766A63
- peekViewEditor.background#F1E8DE
- peekViewEditor.matchHighlightBackground#3B8B6E44
- peekViewEditor.matchHighlightBorder#3B8B6E88
- peekViewEditorGutter.background#E6E0D5
- peekViewResult.background#E6E0D5
- peekViewResult.fileForeground#121212
- peekViewResult.lineForeground#121212
- peekViewResult.matchHighlightBackground#3B8B6E44
- peekViewResult.selectionBackground#28A36466
- peekViewResult.selectionForeground#121212
- peekViewTitle.background#D9D3CA
- peekViewTitleDescription.foreground#484848
- peekViewTitleLabel.foreground#121212
- pickerGroup.border#C7BFB8
- pickerGroup.foreground#0064C2
- progressBar.background#3B8B6E
- scrollbar.shadow#766A6388
- scrollbarSlider.activeBackground#5E534D88
- scrollbarSlider.background#C7BFB888
- scrollbarSlider.hoverBackground#766A6388
- selection.background#3B8B6E88
- settings.focusedRowBackground#C7BFB884
- settings.headerForeground#121212
- sideBar.background#E6E0D5
- sideBar.border#C7BFB8
- sideBar.dropBackground#F1E8DE
- sideBar.foreground#121212
- sideBarSectionHeader.background#D9D3CA
- sideBarSectionHeader.border#C7BFB8
- sideBarSectionHeader.foreground#121212
- sideBarTitle.foreground#121212
- statusBar.background#D9D3CA
- statusBar.border#C7BFB8
- statusBar.debuggingBackground#CC6633
- statusBar.debuggingForeground#121212
- statusBar.foreground#121212
- statusBar.noFolderBackground#D9D3CA
- statusBar.noFolderForeground#121212
- statusBarItem.activeBackground#FFFFFF25
- statusBarItem.errorBackground#B54848
- statusBarItem.errorForeground#121212
- statusBarItem.errorHoverBackground#E03030
- statusBarItem.hoverBackground#C7BFB8
- statusBarItem.remoteBackground#3B8B6E
- statusBarItem.remoteForeground#F7F1E6
- statusBarItem.remoteHoverBackground#28A364
- statusBarItem.remoteHoverForeground#F7F1E6
- tab.activeBackground#F7F1E6
- tab.activeBorder#00000000
- tab.activeBorderTop#3B8B6E
- tab.activeForeground#121212
- tab.border#C7BFB8
- tab.inactiveBackground#F1E8DE
- tab.inactiveForeground#484848
- terminal.ansiBlack#484848
- terminal.ansiBlue#0064C2
- terminal.ansiBrightBlack#121212
- terminal.ansiBrightBlue#0099FF
- terminal.ansiBrightCyan#00A6D6
- terminal.ansiBrightGreen#28A364
- terminal.ansiBrightMagenta#F2679C
- terminal.ansiBrightRed#E03030
- terminal.ansiBrightWhite#C0C0C0
- terminal.ansiBrightYellow#A8623A
- terminal.ansiCyan#256F73
- terminal.ansiGreen#3B8B6E
- terminal.ansiMagenta#C35A85
- terminal.ansiRed#B54848
- terminal.ansiWhite#848484
- terminal.ansiYellow#885533
- terminal.border#C7BFB8
- terminal.foreground#121212
- terminal.selectionBackground#6B50C542
- terminalCursor.background#256F73
- terminalCursor.foreground#256F73
- textLink.activeForeground#3B8B6E
- textLink.foreground#0064C2
- titleBar.activeBackground#D9D3CA
- titleBar.activeForeground#121212
- titleBar.border#C7BFB8
- titleBar.inactiveBackground#D9D3CA
- titleBar.inactiveForeground#484848
- tree.indentGuidesStroke#766A63
- walkThrough.embeddedEditorBackground#F1E8DE
- widget.shadow#766A6348
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| accent | #0064C2 | — |
| beginning.punctuation | #256F73 | — |
| block.scope | #256F73 | — |
| comment | #636363 | italic |
| constant, constant.character, constant.keyword, constant.other | #256F73 | — |
| constant.language | #B3356B | italic |
| constant.numeric | #B3356B | — |
| control.elements | #256F73 | — |
| emphasis md | #6B50C5 | — |
| entity.global, entity.name.variable | #B3356B | — |
| entity.name, entity.other.alias | #6B50C5 | — |
| entity.name.type.ts | #83655D | — |
| entity.name.type, entity.name.type.cpp, entity.other.inherited-class | #83655D | — |
| entity.name.function.operator.cpp, entity.name.function.operator.member.cpp, entity.name.type.class.templated.cpp, entity.name.namespace.cpp | #0064C2 | — |
| entity.name.section, entity.other.attribute-name | #256F73 | — |
| function.brace | #256F73 | — |
| function.parameter | #8E5935 | — |
| import.storage.java | #B3356B | — |
| inline-color-decoration rgb-value | #B3356B | — |
| invalid, invalid.broken, invalid.deprecated, invalid.illegal, invalid.unimplemented | #B54848 | — |
| keyword, keyword.control, keyword.operator, keyword.other | #0064C2 | — |
| keyword.operator.expression, keyword.operator.new, keyword.operator.optional | #0064C2 | italic |
| keyword.other.documentation | #636363 | italic |
| keyword.other.unit | #256F73 | — |
| less rgb-value | #B3356B | — |
| markup | #256F73 | — |
| markup.changed.diff | #CC6633 | — |
| markup.deleted.diff | #B54848 | — |
| markup.heading.setext, markup.italic | #6B50C5 | — |
| markup.inserted.diff | #28A364 | — |
| markup.quote.markdown | #B3356B | — |
| meta.arguments, meta.property, meta.symbol | #83655D | — |
| meta.object-literal.key, meta.scope | #8E5935 | — |
| 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 | #256F73 | — |
| meta.function | #256F73 | — |
| meta.template | #B3356B | — |
| punctuation.bracket.angle, punctuation.section.angle-brackets | #83655D | — |
| punctuation.bracket, punctuation.definition, punctuation.operator, punctuation.parenthesis, punctuation.section, punctuation.separator, punctuation.terminator | #256F73 | — |
| punctuation.definition.directive | #0064C2 | — |
| punctuation.definition.comment | #636363 | italic |
| punctuation.definition.string | #B3356B | — |
| rgb-value | #256F73 | — |
| selector | #256F73 | — |
| source | #256F73 | — |
| source.json meta.structure.array.json > constant.language.json, source.json meta.structure.dictionary.json > constant.language.json | #B3356B | 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 | #B3356B | — |
| storage, storage.modifier, storage.type.function, storage.type.ts | #0064C2 | — |
| storage.type, support.type | #83655D | — |
| punctuation.definition.annotation, storage.type.annotation | #8E5935 | — |
| punctuation.definition.block.tag.jsdoc, storage.type.class.jsdoc, source.embedded.ts | #636363 | italic |
| string | #B3356B | — |
| string.quoted.docstring | #636363 | italic |
| support.class, support.function, support.module.node, support.other, support.token.decorator.python | #8E5935 | — |
| support.function.builtin.python | #6B50C5 | — |
| support.constant | #0064C2 | — |
| support.type.property-name, support.type.vendored.property-name.css | #256F73 | — |
| support.variable | #6B50C5 | — |
| text | #256F73 | — |
| todo | #CC6633 | — |
| token.debug-token | #8E5935 | — |
| token.error-token | #B54848 | — |
| token.info-token, token.storage | #0064C2 | — |
| token.package | #6B50C5 | — |
| token.variable | #256F73 | — |
| token.warn-token | #CC6633 | — |
| variable | #256F73 | — |
| variable.function, variable.other | #6B50C5 | — |
| variable.language | #0064C2 | italic |
| variable.other | #256F73 | — |
| variable.parameter | #256F73 | — |
| wikiword.xi | #0064C2 | — |