Kohle und Meer
Publisher: nassif.proThemes in package: 1
Charcoal and sea. Cool blue-grey dark theme with dusty teal accents and bone text.
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.background#272c32
- activityBar.border#272c32
- activityBar.foreground#7fb8b8
- activityBar.inactiveForeground#4a5058
- activityBarBadge.background#7fb8b8
- activityBarBadge.foreground#272c32
- badge.background#7fb8b8
- badge.foreground#272c32
- breadcrumb.activeSelectionForeground#b0a898
- breadcrumb.focusForeground#a09888
- breadcrumb.foreground#4a5058
- button.background#7fb8b8
- button.foreground#272c32
- button.hoverBackground#8fc8c8
- button.secondaryBackground#445060
- button.secondaryForeground#b0a898
- dropdown.background#343a42
- dropdown.border#445060
- dropdown.foreground#b0a898
- editor.background#2e3338
- editor.findMatchBackground#7fb8b860
- editor.findMatchHighlightBackground#7fb8b830
- editor.foreground#e8e0c8
- editor.inactiveSelectionBackground#384048
- editor.lineHighlightBackground#343940
- editor.selectionBackground#445060
- editor.selectionHighlightBackground#3a4550
- editor.wordHighlightBackground#384048
- editor.wordHighlightStrongBackground#404850
- editorBracketMatch.background#445060
- editorBracketMatch.border#7fb8b8
- editorCursor.foreground#7fb8b8
- editorError.foreground#c07030
- editorGroupHeader.tabsBackground#272c32
- editorGroupHeader.tabsBorder#272c32
- editorGutter.background#2e3338
- editorIndentGuide.activeBackground#4a5058
- editorIndentGuide.background#383e44
- editorInfo.foreground#7fb8b8
- editorLineNumber.activeForeground#7a8898
- editorLineNumber.foreground#4a5058
- editorWarning.foreground#c89030
- editorWhitespace.foreground#383e44
- focusBorder#7fb8b8
- gitDecoration.addedResourceForeground#7fb8b8
- gitDecoration.conflictingResourceForeground#9878a8
- gitDecoration.deletedResourceForeground#c07030
- gitDecoration.ignoredResourceForeground#4a5058
- gitDecoration.modifiedResourceForeground#c89030
- gitDecoration.untrackedResourceForeground#7fb8b8
- input.background#343a42
- input.border#445060
- input.foreground#b0a898
- input.placeholderForeground#4a5058
- inputOption.activeBackground#404850
- inputOption.activeBorder#7fb8b8
- list.activeSelectionBackground#384048
- list.activeSelectionForeground#e8e0c8
- list.errorForeground#c07030
- list.focusBackground#404850
- list.highlightForeground#7fb8b8
- list.hoverBackground#343a42
- list.hoverForeground#b0a898
- list.inactiveSelectionBackground#323840
- list.inactiveSelectionForeground#b0a898
- list.warningForeground#c89030
- menu.background#343a42
- menu.foreground#b0a898
- menu.selectionBackground#445060
- menu.selectionForeground#e8e0c8
- menu.separatorBackground#445060
- notificationLink.foreground#7fb8b8
- notifications.background#343a42
- notifications.border#445060
- notifications.foreground#b0a898
- panel.background#272c32
- panel.border#343a42
- panelTitle.activeBorder#7fb8b8
- panelTitle.activeForeground#b0a898
- panelTitle.inactiveForeground#4a5058
- problemsErrorIcon.foreground#c07030
- problemsWarningIcon.foreground#c89030
- progressBar.background#7fb8b8
- scrollbar.shadow#272c32
- scrollbarSlider.activeBackground#505860
- scrollbarSlider.background#383e44
- scrollbarSlider.hoverBackground#445060
- selection.background#445060
- sideBar.background#2a2f34
- sideBar.border#272c32
- sideBar.foreground#a09888
- sideBarSectionHeader.background#272c32
- sideBarSectionHeader.border#272c32
- sideBarSectionHeader.foreground#6a7888
- sideBarTitle.foreground#6a7888
- statusBar.background#272c32
- statusBar.border#272c32
- statusBar.debuggingBackground#7fb8b8
- statusBar.debuggingForeground#272c32
- statusBar.foreground#6a7888
- statusBar.noFolderBackground#272c32
- statusBarItem.hoverBackground#343a42
- statusBarItem.remoteBackground#7fb8b8
- statusBarItem.remoteForeground#272c32
- tab.activeBackground#2e3338
- tab.activeBorder#7fb8b8
- tab.activeForeground#e8e0c8
- tab.activeModifiedBorder#c89030
- tab.border#272c32
- tab.inactiveBackground#272c32
- tab.inactiveForeground#6a7888
- tab.inactiveModifiedBorder#4a5058
- tab.unfocusedActiveBorder#4a5058
- terminal.ansiBlack#2e3338
- terminal.ansiBlue#6a8898
- terminal.ansiBrightBlack#505860
- terminal.ansiBrightBlue#7a98a8
- terminal.ansiBrightCyan#8fc8c8
- terminal.ansiBrightGreen#8fc8c8
- terminal.ansiBrightMagenta#a888b8
- terminal.ansiBrightRed#d08040
- terminal.ansiBrightWhite#e8e0c8
- terminal.ansiBrightYellow#d8a840
- terminal.ansiCyan#7fb8b8
- terminal.ansiGreen#7fb8b8
- terminal.ansiMagenta#9878a8
- terminal.ansiRed#c07030
- terminal.ansiWhite#a09888
- terminal.ansiYellow#c89030
- terminal.background#272c32
- terminal.foreground#a09888
- titleBar.activeBackground#272c32
- titleBar.activeForeground#a09888
- titleBar.border#272c32
- titleBar.inactiveBackground#272c32
- titleBar.inactiveForeground#4a5058
- widget.shadow#272c32
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #404850 | italic |
| keyword, keyword.control, keyword.operator.new, storage.type, storage.modifier | #e8e0c8 | — |
| keyword.operator | #505860 | — |
| entity.name.function, meta.function-call, support.function | #c07030 | — |
| entity.name.type, entity.name.class, support.type, support.class | #c89030 | — |
| variable, variable.other, variable.other.readwrite | #7fb8b8 | — |
| variable.parameter | #6fa8a8 | — |
| variable.other.property, support.type.property-name, meta.object-literal.key, entity.name.tag.yaml | #a09888 | — |
| string, string.quoted | #987860 | — |
| string.template, meta.template.expression | #987860 | — |
| string.regexp, string.regexp.ts, string.regexp.tsx, string.regexp.js, constant.regexp | #9878a8 | bold |
| constant.numeric, constant.language | #e8e0c8 | — |
| constant, variable.other.constant | #7fb8b8 | — |
| entity.name.tag, entity.name.tag.tsx, entity.name.tag.jsx, support.class.component.tsx, support.class.component.jsx | #7fb8b8 | — |
| punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.tag.begin.tsx, punctuation.definition.tag.end.tsx | #6a7888 | — |
| entity.other.attribute-name | #a09888 | — |
| support.type.property-name.css | #a09888 | — |
| meta.property-value.css, support.constant.property-value.css | #7fb8b8 | — |
| punctuation, meta.brace, punctuation.definition.block, punctuation.definition.block.tsx, punctuation.definition.block.ts, meta.brace.round, meta.brace.square, meta.brace.curly, punctuation.curlybrace.open, punctuation.curlybrace.close, punctuation.curlybrace.open.tsx, punctuation.curlybrace.close.tsx, meta.object.type.tsx, meta.object.type.ts, meta.import.ts, meta.import.tsx, meta.block.ts, meta.block.tsx, meta.arrow.tsx, meta.arrow.ts, meta.type.declaration.ts, meta.type.declaration.tsx | #505860 | — |
| markup.heading | #7fb8b8 | bold |
| markup.underline.link | #7fb8b8 | — |
| markup.inline.raw, markup.fenced_code | #987860 | — |