Darksome
Publisher: Roche KollieThemes in package: 1
A visually stunning dark theme for an immersive and productive coding experience.
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#00000000
- activityBar.activeBorder#00000000
- activityBar.activeFocusBorder#00000000
- activityBar.background#101010
- activityBar.border#282828
- activityBar.dropBorder#4fc788
- activityBar.foreground#4fc788
- activityBar.inactiveForeground#555
- activityBarBadge.background#4fc788
- activityBarBadge.foreground#000000
- badge.background#4fc788
- badge.foreground#000
- banner.background#1d7060
- banner.foreground#ffffff
- banner.iconForeground#000
- breadcrumb.activeSelectionForeground#4fc788
- breadcrumb.background#141414
- breadcrumb.focusForeground#52d391
- breadcrumb.foreground#4fc788
- breadcrumbPicker.background#171717
- button.background#05dbbb77
- button.border#00000000
- button.foreground#000
- button.hoverBackground#05dbbb70
- button.secondaryBackground#141414
- button.secondaryForeground#05dbbb77
- button.secondaryHoverBackground#101010
- button.separator#00000000
- checkbox.background#181818
- checkbox.border#282828
- checkbox.foreground#fff
- editor.background#101010
- editor.findMatchBackground#05dbbb77
- editor.findMatchBorder#11ffee00
- editor.findMatchHighlightBackground#05dbbb33
- editor.findMatchHighlightBorder#1b1b1b25
- editor.findRangeHighlightBackground#05dbbb77
- editor.findRangeHighlightBorder#282C34
- editor.foldBackground#282C3477
- editor.foreground#ffffff99
- editor.hoverHighlightBackground#23272f
- editor.inactiveSelectionBackground#23272f
- editor.inlineValuesBackground#ff0000
- editor.inlineValuesForeground#ffffff99
- editor.lineHighlightBackground#131313
- editor.lineHighlightBorder#161616
- editor.rangeHighlightBackground#ffffff11
- editor.selectionBackground#23272f
- editor.selectionHighlightBackground#23272f
- editor.wordHighlightBackground#23272f
- editor.wordHighlightBorder#1b1b1b
- editor.wordHighlightStrongBackground#23272f
- editor.wordHighlightStrongBorder#1b1b1b
- editorBracketHighlight.foreground1#b6b422
- editorBracketHighlight.foreground2#43a047
- editorBracketHighlight.foreground3#de3de7
- editorBracketHighlight.foreground4#2196f3
- editorBracketHighlight.foreground5#3f51b5
- editorBracketHighlight.foreground6#008978
- editorBracketHighlight.unexpectedBracket.foreground#ff0000
- editorCursor.foreground#4fc788
- editorGroup.border#282828
- editorGroupHeader.noTabsBackground#222222
- editorGroupHeader.tabsBackground#171717
- editorHoverWidget.background#141414
- editorInlayHint.background#00000000
- editorInlayHint.foreground#ffffff77
- editorInlayHint.parameterBackground#00000000
- editorInlayHint.parameterForeground#ffffff77
- editorInlayHint.typeBackground#00000000
- editorInlayHint.typeForeground#ffffff77
- editorLineNumber.activeForeground#4fc788
- editorLineNumber.foreground#777777
- editorRuler.foreground#28282855
- editorSuggestWidget.background#141414
- editorSuggestWidget.border#282828
- editorSuggestWidget.focusHighlightForeground#05dbbb
- editorSuggestWidget.foreground#abcdef
- editorSuggestWidget.highlightForeground#05dbbb
- editorSuggestWidget.selectedBackground#00000033
- editorSuggestWidget.selectedForeground#abcdef
- editorSuggestWidget.selectedIconForeground#abcdef
- editorWhitespace.foreground#28282855
- extensionButton.prominentBackground#05dbbb77
- focusBorder#4fc78899
- input.background#101010
- input.border#1b1d20
- input.foreground#ffffff99
- input.placeholderForeground#ffffff55
- inputOption.activeBorder#282828
- inputOption.activeForeground#ffffff99
- inputValidation.errorBackground#101010
- inputValidation.errorBorder#00000000
- inputValidation.errorForeground#fb543f
- inputValidation.infoBackground#101010
- inputValidation.infoBorder#00000000
- inputValidation.infoForeground#05dbbb
- inputValidation.warningBackground#101010
- inputValidation.warningBorder#00000000
- inputValidation.warningForeground#ffcc00
- list.activeSelectionBackground#00000000
- list.activeSelectionForeground#4fc788
- list.focusAndSelectionOutline#00000000
- list.focusOutline#00000000
- list.hoverBackground#00000000
- list.hoverForeground#fff
- list.inactiveFocusBackground#00000000
- list.inactiveFocusOutline#00000000
- list.inactiveSelectionBackground#00000000
- minimap.background#00000000
- minimap.errorHighlight#fb543f
- minimap.findMatchHighlight#4fc788
- minimap.foregroundOpacity#000000c0
- minimap.selectionHighlight#4fc788
- minimap.selectionOccurrenceHighlight#05dbbb77
- minimap.warningHighlight#fac03b
- minimapGutter.addedBackground#4fc788
- minimapGutter.deletedBackground#fb543f
- minimapGutter.modifiedBackground#fac03b
- minimapSlider.activeBackground#4fc78935
- minimapSlider.background#4fc78855
- minimapSlider.hoverBackground#4fc7892b
- panel.background#171717
- panel.border#282828
- panelInput.border#1b1b1b
- panelTitle.activeBorder#47c788
- panelTitle.activeForeground#4fc788
- problemsErrorIcon.foreground#fb543f
- problemsInfoIcon.foreground#05dbbb77
- problemsWarningIcon.foreground#fac03b
- scrollbar.shadow#00000099
- scrollbarSlider.activeBackground#22222299
- scrollbarSlider.background#222222
- scrollbarSlider.hoverBackground#22222299
- settings.checkboxBackground#101010
- settings.checkboxBorder#1b1d20
- settings.checkboxForeground#4fc78899
- settings.dropdownBackground#101010
- settings.dropdownBorder#1b1d20
- settings.dropdownForeground#ffffff99
- settings.dropdownListBorder#282828
- settings.focusedRowBackground#1b1d20
- settings.focusedRowBorder#4fc78899
- settings.headerBorder#1b1d20
- settings.headerForeground#ffffff99
- settings.modifiedItemIndicator#50503a
- settings.numberInputBackground#101010
- settings.numberInputBorder#1b1d20
- settings.numberInputForeground#ffffff99
- settings.rowHoverBackground#1b1d20
- settings.sashBorder#1b1d20
- settings.settingsHeaderHoverForeground#ffffff99
- settings.textInputBackground#101010
- settings.textInputBorder#1b1d20
- settings.textInputForeground#ffffff99
- sideBar.background#141414
- sideBar.border#282828
- sideBar.dropBackground#101010
- sideBar.foreground#ffffff99
- sideBarSectionHeader.background#141414
- sideBarSectionHeader.border#00000000
- sideBarSectionHeader.foreground#ffffff77
- sideBarTitle.foreground#4fc788
- statusBar.background#181818
- statusBar.border#3b3b3b
- statusBar.debuggingBackground#111111
- statusBar.debuggingForeground#4fc788
- statusBar.foreground#ffffff99
- statusBar.noFolderBackground#141414
- statusBar.noFolderBorder#282828
- statusBar.noFolderForeground#ffffff77
- statusBarItem.errorBackground#00000000
- statusBarItem.errorForeground#fb543f
- statusBarItem.prominentBackground#00000000
- statusBarItem.prominentForeground#05dbbb77
- statusBarItem.remoteBackground#141414
- statusBarItem.remoteForeground#4fc788
- statusBarItem.warningBackground#00000000
- statusBarItem.warningForeground#fac03b
- tab.activeBackground#101010
- tab.activeBorder#00000000
- tab.activeBorderTop#34a36a
- tab.activeForeground#4fc788
- tab.activeModifiedBorder#00000000
- tab.border#282828
- tab.hoverBackground#141414
- tab.hoverBorder#101010
- tab.hoverForeground#dadada
- tab.inactiveBackground#171717
- tab.inactiveForeground#f7f7f7
- tab.inactiveModifiedBorder#00000000
- tab.lastPinnedBorder#01010199
- tab.unfocusedActiveBackground#00000000
- tab.unfocusedActiveBorder#00000000
- tab.unfocusedActiveBorderTop#3b3b3b
- tab.unfocusedActiveForeground#4fc788
- tab.unfocusedActiveModifiedBorder#00000000
- tab.unfocusedHoverBackground#00000000
- tab.unfocusedHoverBorder#00000000
- tab.unfocusedHoverForeground#ffffff99
- tab.unfocusedInactiveBackground#00000000
- tab.unfocusedInactiveForeground#ffffff66
- tab.unfocusedInactiveModifiedBorder#00000000
- terminal.ansiBlack#171717
- terminal.ansiBlue#00a1f9
- terminal.ansiBrightBlack#777777
- terminal.ansiBrightBlue#0D6678
- terminal.ansiBrightCyan#018c91
- terminal.ansiBrightGreen#237e02
- terminal.ansiBrightMagenta#8f4673
- terminal.ansiBrightRed#fb543f
- terminal.ansiBrightWhite#fdf4c1
- terminal.ansiBrightYellow#fac03b
- terminal.ansiCyan#8ba59b
- terminal.ansiGreen#95c085
- terminal.ansiMagenta#8f4673
- terminal.ansiRed#fb543f
- terminal.ansiWhite#a89984
- terminal.ansiYellow#fac03b
- terminal.background#111111
- terminal.border#1b1b1b
- terminal.foreground#27C840
- terminal.selectionBackground#0d6678
- terminal.selectionForeground#161616
- terminalCommandDecoration.defaultBackground#00FF1E
- terminalCursor.foreground#88ff00
- textLink.activeForeground#05dbbb
- textLink.foreground#05dbbb99
- titleBar.activeBackground#111111
- titleBar.activeForeground#4fc788
- titleBar.border#3b3b3b99
- titleBar.inactiveBackground#111111
- titleBar.inactiveForeground#ffffff99
- widget.shadow#00000000
- window.activeBorder#2e2e2e
- window.inactiveBorder#2e2e2e
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| text, source, meta | #a7b7c7 | — |
| markup.raw | #4fc788 | — |
| keyword, keyword.operator.new, support.type.primitive, meta.type.annotation | #c46ce7 | — |
| punctuation, punctuation.section, keyword.operator, punctuation.separator, punctuation.terminator, punctuation.definition, meta.brace.curly, meta.brace.round, meta.brace.square, meta.delimiter, meta.delimiter.period, meta.delimiter.comma, meta.delimiter.semicolon, meta.delimiter.colon, meta.delimiter.hash, meta.delimiter.at, meta.method-call.without-arguments.js, meta.method-call.with-arguments.js, punctuation.section.method.begin.bracket.curly, punctuation.section.method.end.bracket.curly, punctuation.section.class.begin, punctuation.section.class.end, punctuation.section.property-list.begin.bracket.curly, punctuation.section.property-list.end.bracket.curly, punctuation.definition.entity.begin.bracket.square, punctuation.definition.entity.end.bracket.square, punctuation.section.media.begin.bracket.curly, punctuation.section.media.end.bracket.curly, punctuation.section.media-query-list.begin.bracket.curly, punctuation.section.media-query-list.end.bracket.curly, punctuation.section.media-query.begin.bracket.curly, punctuation.section.media-query.end.bracket.curly, punctuation.section.function.begin.bracket.curly, punctuation.section.function.end.bracket.curly, punctuation.section.function.begin.bracket.round, punctuation.section.function.end.bracket.round, punctuation.section.function.begin.bracket.square, punctuation.section.function.end.bracket.square | #a7b7c7 | — |
| comment, comment.block, comment.block.html, punctuation.definition.comment | #6a6a6a | italic |
| #4ec888 | — | |
| punctuation.definition.string, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end, punctuation.definition.string.template, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.string.begin.html, punctuation.definition.string.end.html | #4fc788 | — |
| entity.name.type.class, variable | #56a8f5 | — |
| entity.name.function, meta.method-call, entity.name.function.member, keyword.operator.accessor.js, variable.other.object.property.java, meta.member.access.python, variable.other.property | #abcdef | — |
| function, entity.name.function | #86DE74 | — |
| storage.type, storage.modifier.java, punctuation.definition.block.tag.jsdoc, storage.type.class.jsdoc | #c54967 | — |
| support.type.object, support.class | #56a8f5 | — |
| constant.numeric, meta.attribute.width string.quoted.double.html, meta.attribute.height string.quoted.double.html, meta.element.object.svg.circle string.quoted.double.html, meta.element.object.svg.ellipse string.quoted.double.html, meta.element.object.svg.line string.quoted.double.html | #2aabb8 | — |
| string | #4fc788 | — |
| comment.block, comment.block.documentation, comment.block.documentation.js, string.quoted.docstring.multi.python | #629755 | italic |
| text.html.derivative | #a7b7c7 | — |
| tag, entity.name.tag, entity.name.tag.html, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, meta.embedded.line.php, meta.embedded.block.php, text.html.php, source.php, meta.tag.other.php, meta.tag.other.coffee.php, punctuation.section.embedded.begin, punctuation.section.embedded.end, punctuation.section.embedded.begin.php, meta.embedded.block.php | #c54967 | — |
| meta.tag.inline entity.name.tag.html, meta.tag.inline entity.name.tag.xml, meta.tag.inline entity.name.tag.doctype, meta.tag.inline entity.name.tag.script, meta.tag.inline entity.name.tag.style, meta.tag.inline meta.tag | #f78d6c | — |
| punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.string.begin.html, punctuation.definition.string.end.html | #808080 | — |
| entity.other.attribute-name, support.constant.property-value.css, support.constant.font-name.css | #9b7dce | — |
| punctuation.definition.entity.html, constant.character.entity.named | #9b7dce | — |
| punctuation.definition.string.begin.html, punctuation.definition.string.end.html | #a7b7c7 | — |
| string.quoted.double.html | #ce9278 | — |
| meta.attribute.fill.html, meta.attribute.fill.html string.quoted.double.html, meta.attribute.fill.html string.quoted.single.html, meta.attribute.fill.html punctuation.definition.string.begin.html, meta.attribute.fill.html punctuation.definition.string.end.html | #ce9278 | — |
| meta.attribute.href.html string.quoted.double.html, meta.attribute.href.html string.quoted.single.html, meta.attribute.src.html string.quoted.double.html, meta.attribute.src.html string.quoted.single.html, meta.attribute.action.html string.quoted.double.html, meta.attribute.action.html string.quoted.single.html, meta.attribute.unrecognized.xmlns.html string.quoted.double.html, meta.attribute.unrecognized.xmlns.html string.quoted.single.html | #a9dd76 | — |
| meta.attribute.id.html string.quoted.double.html, meta.attribute.id.html string.quoted.single.html, entity.other.attribute-name.id.css | #4ec888 | bold |
| meta.attribute.class.html string.quoted.double.html, meta.attribute.class.html string.quoted.single.html, entity.other.attribute-name.class.css | #4ec1ff | bold |
| punctuation.definition.markdown, markup.fenced_code.block.markdown | #c46ce7 | — |
| markup.heading.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown, markup.heading.atx.1.markdown, markup.heading.atx.2.markdown, markup.heading.atx.3.markdown, markup.heading.atx.4.markdown, markup.heading.atx.5.markdown, markup.heading.atx.6.markdown | #2c97ff | bold |
| markup.heading.markdown punctuation.definition.heading.markdown | #a7b7c7 | bold |
| meta.paragraph.markdown, text.html.markdown, text.html.markdown | #a7b7c7 | — |
| markup.bold.markdown | #2c97ff | bold |
| markup.underline.link.markdown | #4ec1ff | — |
| string.other.link.title.markdown | #abcdef | — |
| punctuation.definition.list.begin.markdown, punctuation.definition.link.title.begin.markdown, punctuation.definition.link.title.end.markdown, punctuation.definition.metadata.markdown, punctuation.definition.bold.markdown, markup.list.unnumbered.markdown | #6796E6 | — |
| punctuation.definition.raw.markdown | #c54a67 | — |
| markup.inline.raw.string.markdown | #9b6ce7 | — |
| meta.paragraph.markdown, text.html.markdown | #dadada | — |
| markup.fenced_code.block.markdown | #ffffff99 | — |
| fenced_code.block.language.markdown | #9b6ce7 | — |
| punctuation.definition.keyword.css, keyword.control.at-rule.import.css, meta.at-rule.import.css, keyword.control.at-rule.media.css, meta.at-rule.media.header.css, entity.name.tag.css, entity.name.tag.scss, entity.name.tag.sass, entity.name.tag.less, entity.name.tag.stylus, entity.name.tag.css, meta.property-list.css | #c54967 | — |
| meta.function.url.css string.quoted.single.css, meta.function.url.css punctuation.definition.string.begin.css, meta.function.url.css punctuation.definition.string.end.css | #2a97ff | — |
| meta.at-rule.media.header.css | #c46ce7 | — |
| support.type.property-name.css, support.type.property-name.scss, support.type.property-name.sass, support.type.property-name.less, support.type.property-name.stylus, support.type.property-name.css, punctuation.definition.variable.property.css, meta.property-list.css, support.type.property-name.js | #abcdef | — |
| punctuation.definition.variable.property.css | #a7b7c7 | — |
| support.type.vendored.property-name.css, support.type.vendored.property-name.scss, support.type.vendored.property-name.sass, support.type.vendored.property-name.less, support.type.vendored.property-name.stylus | #611d70 | — |
| support.constant.property-value.css, support.constant.font-name.css | #56a8f5 | — |
| #56a8f5 | — | |
| string.quoted.single.css | #4fc788 | — |
| punctuation.definition.entity.css | #9b6ce7 | — |
| entity.other.attribute-name.pseudo-class.css | #9b7dce | — |
| entity.other.attribute-name.id.css punctuation.definition.entity.css | #4ec888 | bold |
| entity.other.attribute-name.class.css punctuation.definition.entity.css, entity.other.attribute-name.class.css | #50c1ff | bold |
| support.constant.color.w3c-standard-color-name.css, support.constant.color.w3c-extended-color-name.css, constant.other.color.rgb-value.hex.css | #9b7dce | — |
| constant.numeric.css keyword.other.unit | #a9dd76 | — |
| keyword.operator.logical.and.media.css | #c46ce7 | — |
| invalid.illegal, invalid.deprecated, invalid.illegal.unrecognized-tag.html, entity.name.invalid.html, meta.tag.other.invalid.end.html, meta.element.other.invalid.html, meta.element.other.invalid.html | #f34436 | — |
| support.function.misc.css, meta.function.color.css, support.function.url.css, meta.function.url.css | #a9dd76 | — |
| keyword.operator.arithmetic.css | #e2721c | bold |
| keyword.control.module.js | #c54967 | — |
| support.type.property-name | #56a8f5 | — |
| string.quoted.double.json, meta.structure.dictionary.value.json, meta.structure.dictionary.json | #4fc788 | — |
| variable.other.property.js, string.quoted.double.js variable.other.property.js, string.unquoted.js, string.unquoted.label.js, string.unquoted.label.js punctuation.definition.string.begin.js, string.unquoted.label.js punctuation.definition.string.end.js | #abcdef | — |
| meta.definition.variable.name entity.name.variable.js | #c5fa67 | — |
| keyword.other.DML.sql | #c46ce7 | — |
| entity.name.tag.template.html.vue, support.class.component.open.jsx | #1ccd86 | — |