CleanCode Dark
Publisher: Pedro AmancioThemes in package: 1
A clean and satisfying dark theme for focused coding sessions.
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#181818
- activityBar.border#252525
- activityBar.foreground#c7d4e6
- activityBar.inactiveForeground#3e5178
- activityBarBadge.background#5586e9
- activityBarBadge.foreground#eaeef6
- badge.background#5586e9
- badge.foreground#eaeef6
- button.background#5586e9
- button.foreground#eaeef6
- button.hoverBackground#93d5e9
- diffEditor.insertedLineBackground#58d6ae15
- diffEditor.insertedTextBackground#58d6ae25
- diffEditor.removedLineBackground#bf616a15
- diffEditor.removedTextBackground#bf616a25
- dropdown.background#252525
- dropdown.border#333333
- dropdown.foreground#c7d4e6
- editor.background#1c1c1c
- editor.findMatchBackground#f3d99d40
- editor.findMatchBorder#fbdc95
- editor.findMatchHighlightBackground#f3d99d20
- editor.foreground#c7d4e6
- editor.inactiveSelectionBackground#33333360
- editor.lineHighlightBackground#242424
- editor.lineHighlightBorder#00000000
- editor.selectionBackground#333333
- editor.selectionHighlightBackground#33333380
- editor.wordHighlightBackground#33333390
- editor.wordHighlightStrongBackground#3d3d3d90
- editorBracketHighlight.foreground1#585858
- editorBracketHighlight.foreground2#585858
- editorBracketHighlight.foreground3#585858
- editorBracketHighlight.foreground4#585858
- editorBracketHighlight.foreground5#585858
- editorBracketHighlight.foreground6#585858
- editorBracketHighlight.unexpectedBracket.foreground#d0505d
- editorBracketMatch.background#4c566a50
- editorBracketMatch.border#93d5e9
- editorCursor.foreground#93d5e9
- editorError.foreground#d0505d
- editorGroupHeader.tabsBackground#181818
- editorGroupHeader.tabsBorder#252525
- editorGutter.addedBackground#48e6b4
- editorGutter.deletedBackground#d0505d
- editorGutter.modifiedBackground#fbdc95
- editorHoverWidget.background#252525
- editorHoverWidget.border#333333
- editorInfo.foreground#5586e9
- editorLineNumber.activeForeground#c7d4e6
- editorLineNumber.foreground#333333
- editorSuggestWidget.background#252525
- editorSuggestWidget.border#333333
- editorSuggestWidget.foreground#c7d4e6
- editorSuggestWidget.highlightForeground#93d5e9
- editorSuggestWidget.selectedBackground#333333
- editorWarning.foreground#fbdc95
- editorWidget.background#252525
- editorWidget.border#333333
- focusBorder#5586e9
- gitDecoration.addedResourceForeground#48e6b4
- gitDecoration.conflictingResourceForeground#d0505d
- gitDecoration.deletedResourceForeground#d0505d
- gitDecoration.ignoredResourceForeground#3e5178
- gitDecoration.modifiedResourceForeground#fbdc95
- gitDecoration.untrackedResourceForeground#48e6b4
- input.background#252525
- input.border#333333
- input.foreground#c7d4e6
- input.placeholderForeground#3e5178
- inputOption.activeBorder#93d5e9
- list.activeSelectionBackground#333333
- list.activeSelectionForeground#eaeef6
- list.errorForeground#d0505d
- list.highlightForeground#93d5e9
- list.hoverBackground#2b2b2b
- list.hoverForeground#c7d4e6
- list.inactiveSelectionBackground#2b2b2b
- list.warningForeground#fbdc95
- panel.background#1c1c1c
- panel.border#252525
- panelTitle.activeBorder#93d5e9
- panelTitle.activeForeground#eaeef6
- panelTitle.inactiveForeground#3e5178
- progressBar.background#5586e9
- scrollbarSlider.activeBackground#4c566aaa
- scrollbarSlider.background#33333370
- scrollbarSlider.hoverBackground#33333399
- selection.background#333333
- sideBar.background#1c1c1c
- sideBar.border#252525
- sideBar.foreground#c7d4e6
- sideBarSectionHeader.background#252525
- sideBarSectionHeader.foreground#c7d4e6
- sideBarTitle.foreground#c7d4e6
- statusBar.background#181818
- statusBar.border#252525
- statusBar.debuggingBackground#c280b6
- statusBar.foreground#c7d4e6
- statusBar.noFolderBackground#181818
- statusBarItem.remoteBackground#5586e9
- statusBarItem.remoteForeground#eaeef6
- tab.activeBackground#1c1c1c
- tab.activeBorder#93d5e9
- tab.activeForeground#eaeef6
- tab.border#252525
- tab.hoverBackground#252525
- tab.inactiveBackground#181818
- tab.inactiveForeground#3e5178
- terminal.ansiBlack#333333
- terminal.ansiBlue#5586e9
- terminal.ansiBrightBlack#3e5178
- terminal.ansiBrightBlue#5586e9
- terminal.ansiBrightCyan#62c8c4
- terminal.ansiBrightGreen#48e6b4
- terminal.ansiBrightMagenta#c280b6
- terminal.ansiBrightRed#d0505d
- terminal.ansiBrightWhite#eaeef6
- terminal.ansiBrightYellow#fbdc95
- terminal.ansiCyan#93d5e9
- terminal.ansiGreen#48e6b4
- terminal.ansiMagenta#c280b6
- terminal.ansiRed#d0505d
- terminal.ansiWhite#c7d4e6
- terminal.ansiYellow#fbdc95
- terminal.background#1c1c1c
- terminal.foreground#c7d4e6
- titleBar.activeBackground#181818
- titleBar.activeForeground#c7d4e6
- titleBar.border#252525
- titleBar.inactiveBackground#141414
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment.line | #3e5178 | italic |
| comment.block | #3e5178 | italic |
| comment.block.jsx | #3e5178 | — |
| keyword.control.flow | #5586e9 | — |
| keyword.control.conditional | #5586e9 | — |
| keyword.control.loop | #5586e9 | — |
| keyword.control.import | #dc7fb8 | — |
| keyword.control.from | #dc7fb8 | — |
| keyword.other | #5586e9 | — |
| keyword.control.return | #dc7fb8 | — |
| keyword.control.export | #dc7fb8 | — |
| keyword.control.default | #dc7fb8 | — |
| storage.type.function | #dc7fb8 | — |
| storage.type.arrow | #5586e9 | — |
| storage.type.class | #5586e9 | — |
| storage.type | #5586e9 | — |
| storage.modifier | #5586e9 | — |
| punctuation.definition.string.begin.single | #48e6b4 | — |
| punctuation.definition.string.end.single | #48e6b4 | — |
| string.quoted.single | #48e6b4 | — |
| punctuation.definition.string.begin.double | #48e6b4 | — |
| punctuation.definition.string.end.double | #48e6b4 | — |
| string.quoted.double | #48e6b4 | — |
| punctuation.definition.string.template.begin | #48e6b4 | — |
| punctuation.definition.string.template.end | #48e6b4 | — |
| string.template | #48e6b4 | — |
| punctuation.definition.template-expression.begin | #93d5e9 | — |
| punctuation.definition.template-expression.end | #93d5e9 | — |
| constant.numeric.integer | #ec9476 | — |
| constant.numeric.decimal | #ec9476 | — |
| constant.numeric.hex | #ec9476 | — |
| constant.numeric.octal | #ec9476 | — |
| constant.language.boolean.true | #5586e9 | — |
| constant.language.boolean.false | #5586e9 | — |
| constant.language.null | #5586e9 | — |
| constant.language.undefined | #5586e9 | — |
| constant.other | #fbdc95 | — |
| constant.other.color.rgb-value | #ec9476 | — |
| variable.other.readwrite | #c7d4e6 | — |
| variable.other.constant | #c7d4e6 | — |
| variable.other.object | #c7d4e6 | — |
| variable.parameter | #c7d4e6 | — |
| variable.language | #5586e9 | — |
| variable.other.property | #c7d4e6 | — |
| entity.name.function | #93d5e9 | — |
| meta.function-call | #93d5e9 | — |
| support.function | #93d5e9 | — |
| entity.name.type.class | #fbdc95 | — |
| entity.name.type.interface | #fbdc95 | — |
| entity.name.type.enum | #fbdc95 | — |
| entity.name.type.alias | #fbdc95 | — |
| support.type | #62c8c4 | — |
| support.class | #fbdc95 | — |
| keyword.operator.assignment | #585858 | — |
| keyword.operator.comparison | #e6c7c7 | — |
| keyword.operator.arithmetic | #585858 | — |
| keyword.operator.logical | #5586e9 | — |
| keyword.operator.ternary | #5586e9 | — |
| keyword.operator.spread | #5586e9 | — |
| keyword.operator.type | #5586e9 | — |
| punctuation.accessor | #5586e9 | — |
| punctuation.separator.comma | #585858 | — |
| punctuation.terminator.statement | #585858 | — |
| punctuation.separator.key-value | #506899 | — |
| punctuation.definition.parameters.begin | #585858 | — |
| punctuation.definition.parameters.end | #585858 | — |
| punctuation.definition.array.begin | #585858 | — |
| punctuation.definition.array.end | #585858 | — |
| punctuation.definition.block | #585858 | — |
| punctuation.definition.arguments.begin | #585858 | — |
| punctuation.definition.arguments.end | #585858 | — |
| punctuation.section.embedded | #585858 | — |
| JSX embeddedpunctuation.section.embedded() | #585858 | — |
| CSSpunctuation.section.property-list.css | #585858 | — |
| punctuation.definition.tag.begin | #585858 | — |
| punctuation.definition.block | #585858 | — |
| punctuation.definition.array.begin | #585858 | — |
| punctuation.definition.array.end | #585858 | — |
| punctuation.definition.parameters.begin | #585858 | — |
| punctuation.definition.parameters.end | #585858 | — |
| punctuation.definition.arguments.begin | #585858 | — |
| punctuation.definition.arguments.end | #585858 | — |
| punctuation.definition.tag.begin | #585858 | — |
| punctuation.definition.tag.end | #585858 | — |
| punctuation.separator.comma | #585858 | — |
| keyword.operator.assignment | #585858 | — |
| keyword.operator.arithmetic | #585858 | — |
| CSSpunctuation.section.property-list.css | #585858 | — |
| punctuation.section.embedded | #585858 | — |
| punctuation.definition.tag.end | #585858 | — |
| entity.name.tag | #5586e9 | — |
| entity.other.attribute-name | #62c8c4 | — |
| string.other.attribute-value | #48e6b4 | — |
| entity.name.tag.css | #5586e9 | — |
| entity.other.attribute-name.class.css | #fbdc95 | — |
| entity.other.attribute-name.id.css | #ec9476 | — |
| entity.name.tag.scss | #5586e9 | — |
| entity.other.attribute-name.class.scss | #fbdc95 | — |
| entity.other.attribute-name.pseudo-class.css | #62c8c4 | — |
| support.type.property-name.css | #62c8c4 | — |
| support.type.property-name.scss | #62c8c4 | — |
| support.constant.property-value.css | #5586e9 | — |
| support.constant.font-name.css | #48e6b4 | — |
| keyword.other.unit.css | #ec9476 | — |
| keyword.other.unit.scss | #ec9476 | — |
| punctuation.separator.key-value.css | #506899 | — |
| punctuation.terminator.rule.css | #506899 | — |
| punctuation.section.property-list.css | #585858 | — |
| variable.css | #62c8c4 | — |
| variable.scss | #62c8c4 | — |
| markup.heading | #5586e9 | bold |
| meta.paragraph.markdown | #c7d4e6 | — |
| markup.underline.link.markdown | #93d5e9 | — |
| string.other.link.title.markdown | #5586e9 | — |
| markup.inline.raw.markdown | #48e6b4 | — |
| markup.quote.markdown | #3e5178 | italic |
| markup.italic.markdown | #c7d4e6 | italic |
| markup.bold.markdown | #eaeef6 | bold |
| meta.separator.markdown | #333333 | — |
| markup.list.unnumbered.markdown | #c7d4e6 | — |
| markup.list.numbered.markdown | #c7d4e6 | — |
| markup.fenced_code.block.markdown | #48e6b4 | — |
| markup.inserted.diff | #48e6b4 | — |
| markup.deleted.diff | #d0505d | — |