Modern Themes
Publisher: Hüsamettin UlutaşThemes in package: 24
24 handcrafted modern color themes plus a coding font picker that can install bundled open-source fonts for you. Every color is solved for WCAG contrast.
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#45abc41a
- activityBar.activeBorder#45abc4
- activityBar.background#0e1113
- activityBar.border#262f3600
- activityBar.foreground#c2c8cc
- activityBar.inactiveForeground#586874
- activityBarBadge.background#45abc4
- activityBarBadge.foreground#151a1e
- activityBarTop.activeBorder#45abc4
- activityBarTop.foreground#c2c8cc
- activityBarTop.inactiveForeground#586874
- badge.background#45abc4
- badge.foreground#151a1e
- banner.background#242d33
- banner.foreground#c2c8cc
- banner.iconForeground#3590a7
- breadcrumb.activeSelectionForeground#3590a7
- breadcrumb.background#171d21
- breadcrumb.focusForeground#c2c8cc
- breadcrumb.foreground#5c6e7a
- breadcrumbPicker.background#1f262b
- button.background#45abc4
- button.border#45abc400
- button.foreground#151a1e
- button.hoverBackground#5cb5cc
- button.secondaryBackground#242d33
- button.secondaryForeground#c2c8cc
- button.secondaryHoverBackground#2c373f
- charts.blue#458cc1
- charts.foreground#c2c8cc
- charts.green#359f66
- charts.lines#5c6e7a
- charts.orange#bf8840
- charts.purple#d073bb
- charts.red#cf7076
- charts.yellow#a88738
- checkbox.background#1f262b
- checkbox.border#37444e
- checkbox.foreground#c2c8cc
- debugConsole.errorForeground#cf7076
- debugConsole.infoForeground#3797ae
- debugConsole.sourceForeground#81919c
- debugConsole.warningForeground#a88738
- debugConsoleInputIcon.foreground#3590a7
- debugExceptionWidget.background#31292d
- debugExceptionWidget.border#cf7076
- debugIcon.breakpointDisabledForeground#cf707680
- debugIcon.breakpointForeground#cf7076
- debugIcon.continueForeground#359f66
- debugIcon.pauseForeground#3797ae
- debugIcon.restartForeground#359f66
- debugIcon.startForeground#359f66
- debugIcon.stepIntoForeground#3797ae
- debugIcon.stepOutForeground#3797ae
- debugIcon.stepOverForeground#3797ae
- debugIcon.stopForeground#cf7076
- debugTokenExpression.boolean#d073bb
- debugTokenExpression.error#cf7076
- debugTokenExpression.name#6998bc
- debugTokenExpression.number#bf8840
- debugTokenExpression.string#37a664
- debugTokenExpression.value#37a664
- debugToolBar.background#1f262b
- debugToolBar.border#262f36
- descriptionForeground#81919c
- diffEditor.diagonalFill#262f36
- diffEditor.insertedLineBackground#35975e17
- diffEditor.insertedTextBackground#35975e24
- diffEditor.removedLineBackground#c96b6417
- diffEditor.removedTextBackground#c96b6424
- diffEditorOverview.insertedForeground#35975e99
- diffEditorOverview.removedForeground#c96b6499
- dropdown.background#1f262b
- dropdown.border#262f36
- dropdown.foreground#c2c8cc
- dropdown.listBackground#1f262b
- editor.background#171d21
- editor.findMatchBackground#bf884052
- editor.findMatchBorder#c69453b3
- editor.findMatchHighlightBackground#bf88402e
- editor.findRangeHighlightBackground#45abc421
- editor.focusedStackFrameHighlightBackground#359f662e
- editor.foldBackground#45abc414
- editor.foreground#c2c8cc
- editor.hoverHighlightBackground#45abc424
- editor.inactiveSelectionBackground#45abc421
- editor.lineHighlightBackground#ffffff0b
- editor.lineHighlightBorder#45abc400
- editor.rangeHighlightBackground#45abc421
- editor.selectionBackground#45abc43d
- editor.selectionHighlightBackground#45abc421
- editor.selectionHighlightBorder#45abc400
- editor.stackFrameHighlightBackground#a8873829
- editor.wordHighlightBackground#45abc424
- editor.wordHighlightStrongBackground#45abc438
- editorBracketHighlight.foreground1#458cc1
- editorBracketHighlight.foreground2#ae7c3a
- editorBracketHighlight.foreground3#33998b
- editorBracketHighlight.foreground4#c95eb0
- editorBracketHighlight.foreground5#33995c
- editorBracketHighlight.foreground6#cd686a
- editorBracketHighlight.unexpectedBracket.foreground#cf7076
- editorBracketMatch.background#45abc429
- editorBracketMatch.border#45abc48c
- editorCodeLens.foreground#5c6e7a
- editorCursor.background#171d21
- editorCursor.foreground#3590a7
- editorError.foreground#cf7076
- editorGhostText.foreground#586874
- editorGroup.border#262f36
- editorGroup.dropBackground#45abc429
- editorGroupHeader.border#262f3600
- editorGroupHeader.noTabsBackground#0e1113
- editorGroupHeader.tabsBackground#0e1113
- editorGroupHeader.tabsBorder#262f3600
- editorGutter.addedBackground#35975e
- editorGutter.background#171d21
- editorGutter.deletedBackground#c96b64
- editorGutter.foldingControlForeground#81919c
- editorGutter.modifiedBackground#a4813a
- editorHint.foreground#5c6e7a
- editorHoverWidget.background#1f262b
- editorHoverWidget.border#262f36
- editorHoverWidget.foreground#c2c8cc
- editorHoverWidget.statusBarBackground#242d33
- editorIndentGuide.activeBackground1#3f4f5a
- editorIndentGuide.background1#242d33
- editorInfo.foreground#3797ae
- editorInlayHint.background#45abc41a
- editorInlayHint.foreground#5c6e7a
- editorLineNumber.activeForeground#3590a7
- editorLineNumber.foreground#586874
- editorLink.activeForeground#3590a7
- editorOverviewRuler.addedForeground#35975e
- editorOverviewRuler.border#262f3600
- editorOverviewRuler.bracketMatchForeground#45abc466
- editorOverviewRuler.deletedForeground#c96b64
- editorOverviewRuler.errorForeground#cf7076
- editorOverviewRuler.findMatchForeground#c69453b3
- editorOverviewRuler.infoForeground#3797ae
- editorOverviewRuler.modifiedForeground#a4813a
- editorOverviewRuler.selectionHighlightForeground#45abc466
- editorOverviewRuler.warningForeground#a88738
- editorRuler.foreground#222a30
- editorStickyScroll.background#121619
- editorStickyScrollHover.background#242d33
- editorSuggestWidget.background#1f262b
- editorSuggestWidget.border#262f36
- editorSuggestWidget.focusHighlightForeground#5cb5cc
- editorSuggestWidget.foreground#c2c8cc
- editorSuggestWidget.highlightForeground#3590a7
- editorSuggestWidget.selectedBackground#45abc42e
- editorSuggestWidget.selectedForeground#c2c8cc
- editorWarning.foreground#a88738
- editorWhitespace.foreground#58687480
- editorWidget.background#1f262b
- editorWidget.border#262f36
- editorWidget.foreground#c2c8cc
- errorForeground#cf7076
- extensionBadge.remoteBackground#45abc4
- extensionBadge.remoteForeground#151a1e
- extensionButton.prominentBackground#45abc4
- extensionButton.prominentForeground#151a1e
- extensionButton.prominentHoverBackground#5cb5cc
- extensionIcon.preReleaseForeground#d073bb
- extensionIcon.starForeground#bf8840
- extensionIcon.verifiedForeground#359f66
- focusBorder#45abc499
- foreground#c2c8cc
- gitDecoration.addedResourceForeground#35975e
- gitDecoration.conflictingResourceForeground#c360c3
- gitDecoration.deletedResourceForeground#c96b64
- gitDecoration.ignoredResourceForeground#5c6e7a
- gitDecoration.modifiedResourceForeground#a4813a
- gitDecoration.renamedResourceForeground#419841
- gitDecoration.stageDeletedResourceForeground#c96b64
- gitDecoration.stageModifiedResourceForeground#a4813a
- gitDecoration.submoduleResourceForeground#9c74c3
- gitDecoration.untrackedResourceForeground#419841
- icon.foreground#81919c
- input.background#1e252a
- input.border#262f36
- input.foreground#c2c8cc
- input.placeholderForeground#5c6e7a
- inputOption.activeBackground#45abc43d
- inputOption.activeBorder#45abc480
- inputOption.activeForeground#c2c8cc
- inputValidation.errorBackground#342a2f
- inputValidation.errorBorder#cf7076
- inputValidation.errorForeground#c2c8cc
- inputValidation.infoBackground#1c3138
- inputValidation.infoBorder#3797ae
- inputValidation.infoForeground#c2c8cc
- inputValidation.warningBackground#2e2e25
- inputValidation.warningBorder#a88738
- inputValidation.warningForeground#c2c8cc
- keybindingLabel.background#5c6e7a24
- keybindingLabel.border#5c6e7a29
- keybindingLabel.bottomBorder#5c6e7a38
- keybindingLabel.foreground#c2c8cc
- list.activeSelectionBackground#45abc433
- list.activeSelectionForeground#c2c8cc
- list.activeSelectionIconForeground#3590a7
- list.dropBackground#45abc429
- list.errorForeground#cf7076
- list.focusBackground#45abc433
- list.focusForeground#c2c8cc
- list.focusHighlightForeground#5cb5cc
- list.focusOutline#45abc400
- list.highlightForeground#3590a7
- list.hoverBackground#5c6e7a1a
- list.hoverForeground#c2c8cc
- list.inactiveSelectionBackground#45abc41c
- list.inactiveSelectionForeground#c2c8cc
- list.warningForeground#a88738
- listFilterWidget.background#1f262b
- listFilterWidget.noMatchesOutline#cf7076
- listFilterWidget.outline#45abc4
- menu.background#1f262b
- menu.border#262f36
- menu.foreground#c2c8cc
- menu.selectionBackground#45abc433
- menu.selectionForeground#c2c8cc
- menu.separatorBackground#262f36
- menubar.selectionBackground#5c6e7a24
- menubar.selectionForeground#c2c8cc
- merge.border#262f3600
- merge.commonContentBackground#5c6e7a1f
- merge.commonHeaderBackground#5c6e7a40
- merge.currentContentBackground#35975e24
- merge.currentHeaderBackground#35975e4d
- merge.incomingContentBackground#3797ae24
- merge.incomingHeaderBackground#3797ae4d
- minimap.background#171d21
- minimap.errorHighlight#cf7076
- minimap.findMatchHighlight#bf8840b3
- minimap.selectionHighlight#45abc480
- minimap.warningHighlight#a88738
- minimapGutter.addedBackground#35975e
- minimapGutter.deletedBackground#c96b64
- minimapGutter.modifiedBackground#a4813a
- minimapSlider.activeBackground#5c6e7a42
- minimapSlider.background#5c6e7a1a
- minimapSlider.hoverBackground#5c6e7a2e
- notificationCenter.border#262f36
- notificationCenterHeader.background#242d33
- notificationCenterHeader.foreground#c2c8cc
- notificationLink.foreground#3590a7
- notifications.background#1f262b
- notifications.border#262f36
- notifications.foreground#c2c8cc
- notificationsErrorIcon.foreground#cf7076
- notificationsInfoIcon.foreground#3797ae
- notificationsWarningIcon.foreground#a88738
- notificationToast.border#262f36
- panel.background#121619
- panel.border#262f36
- panel.dropBorder#45abc4
- panelInput.border#262f36
- panelSection.border#262f36
- panelSectionHeader.background#121619
- panelSectionHeader.foreground#c2c8cc
- panelTitle.activeBorder#45abc4
- panelTitle.activeForeground#c2c8cc
- panelTitle.inactiveForeground#596a76
- peekView.border#45abc48c
- peekViewEditor.background#13181b
- peekViewEditor.matchHighlightBackground#bf884052
- peekViewResult.background#121619
- peekViewResult.fileForeground#c2c8cc
- peekViewResult.foreground#c2c8cc
- peekViewResult.lineForeground#81919c
- peekViewResult.matchHighlightBackground#bf884052
- peekViewResult.selectionBackground#45abc42e
- peekViewResult.selectionForeground#c2c8cc
- peekViewTitle.background#121619
- peekViewTitleDescription.foreground#81919c
- peekViewTitleLabel.foreground#c2c8cc
- pickerGroup.border#262f36
- pickerGroup.foreground#3590a7
- ports.iconRunningProcessForeground#359f66
- problemsErrorIcon.foreground#cf7076
- problemsInfoIcon.foreground#3797ae
- problemsWarningIcon.foreground#a88738
- progressBar.background#45abc4
- quickInput.background#1f262b
- quickInput.foreground#c2c8cc
- quickInputList.focusBackground#45abc433
- quickInputList.focusForeground#c2c8cc
- quickInputList.focusIconForeground#3590a7
- quickInputTitle.background#242d33
- sash.hoverBorder#45abc480
- scrollbar.shadow#0608094d
- scrollbarSlider.activeBackground#5c6e7a73
- scrollbarSlider.background#5c6e7a33
- scrollbarSlider.hoverBackground#5c6e7a52
- search.resultsInfoForeground#81919c
- searchEditor.findMatchBackground#bf88402e
- selection.background#45abc43d
- settings.checkboxBackground#1f262b
- settings.checkboxBorder#37444e
- settings.dropdownBackground#1f262b
- settings.dropdownBorder#262f36
- settings.focusedRowBackground#45abc412
- settings.headerForeground#c2c8cc
- settings.modifiedItemIndicator#45abc4
- settings.numberInputBackground#1e252a
- settings.numberInputBorder#262f36
- settings.rowHoverBackground#5c6e7a0f
- settings.textInputBackground#1e252a
- settings.textInputBorder#262f36
- sideBar.background#121619
- sideBar.border#262f3600
- sideBar.foreground#7c8c98
- sideBarSectionHeader.background#121619
- sideBarSectionHeader.border#262f3600
- sideBarSectionHeader.foreground#c2c8cc
- sideBarStickyScroll.background#121619
- sideBarTitle.foreground#c2c8cc
- statusBar.background#0e1113
- statusBar.border#262f3600
- statusBar.debuggingBackground#45abc4
- statusBar.debuggingBorder#262f3600
- statusBar.debuggingForeground#151a1e
- statusBar.foreground#798a96
- statusBar.noFolderBackground#0e1113
- statusBar.noFolderForeground#798a96
- statusBarItem.activeBackground#5c6e7a38
- statusBarItem.hoverBackground#5c6e7a24
- statusBarItem.prominentBackground#45abc43d
- statusBarItem.prominentForeground#c2c8cc
- statusBarItem.prominentHoverBackground#45abc457
- statusBarItem.remoteBackground#45abc4
- statusBarItem.remoteForeground#151a1e
- symbolIcon.booleanForeground#d073bb
- symbolIcon.classForeground#36a394
- symbolIcon.colorForeground#b98a4e
- symbolIcon.constantForeground#bf8840
- symbolIcon.constructorForeground#5b99c8
- symbolIcon.enumeratorForeground#36a394
- symbolIcon.enumeratorMemberForeground#bf8840
- symbolIcon.fieldForeground#6998bc
- symbolIcon.fileForeground#81919c
- symbolIcon.folderForeground#81919c
- symbolIcon.functionForeground#5b99c8
- symbolIcon.interfaceForeground#36a394
- symbolIcon.keywordForeground#d073bb
- symbolIcon.methodForeground#5b99c8
- symbolIcon.moduleForeground#d37b7d
- symbolIcon.namespaceForeground#d37b7d
- symbolIcon.numberForeground#bf8840
- symbolIcon.propertyForeground#6998bc
- symbolIcon.snippetForeground#b98a4e
- symbolIcon.stringForeground#37a664
- symbolIcon.textForeground#81919c
- symbolIcon.variableForeground#c2c8cc
- tab.activeBackground#171d21
- tab.activeBorder#171d2100
- tab.activeBorderTop#45abc4
- tab.activeForeground#c2c8cc
- tab.activeModifiedBorder#a4813a
- tab.border#262f3600
- tab.hoverBackground#121619
- tab.hoverForeground#c2c8cc
- tab.inactiveBackground#0e1113
- tab.inactiveForeground#586874
- tab.inactiveModifiedBorder#a4813a80
- tab.lastPinnedBorder#262f36
- tab.unfocusedActiveBackground#121619
- tab.unfocusedActiveBorderTop#45abc459
- tab.unfocusedActiveForeground#81919c
- tab.unfocusedInactiveForeground#586874
- terminal.ansiBlack#2a343c
- terminal.ansiBlue#458cc1
- terminal.ansiBrightBlack#485965
- terminal.ansiBrightBlue#6ea5cf
- terminal.ansiBrightCyan#60afa5
- terminal.ansiBrightGreen#60af80
- terminal.ansiBrightMagenta#d581c1
- terminal.ansiBrightRed#d7888d
- terminal.ansiBrightWhite#c2c8cc
- terminal.ansiBrightYellow#c09965
- terminal.ansiCyan#33998b
- terminal.ansiGreen#33995c
- terminal.ansiMagenta#c95eb0
- terminal.ansiRed#cc666d
- terminal.ansiWhite#7c8c98
- terminal.ansiYellow#ae7c3a
- terminal.background#121619
- terminal.border#262f36
- terminal.findMatchBackground#bf884052
- terminal.findMatchHighlightBackground#bf88402e
- terminal.foreground#bbc1c6
- terminal.inactiveSelectionBackground#45abc421
- terminal.selectionBackground#45abc43d
- terminalCursor.background#121619
- terminalCursor.foreground#3590a7
- testing.iconErrored#cf7076
- testing.iconFailed#cf7076
- testing.iconPassed#359f66
- testing.iconQueued#a88738
- testing.iconSkipped#5c6e7a
- testing.iconUnset#5c6e7a
- testing.message.error.decorationForeground#cf7076
- testing.runAction#359f66
- textBlockQuote.background#121619
- textBlockQuote.border#45abc480
- textCodeBlock.background#121619
- textLink.activeForeground#5cb5cc
- textLink.foreground#3590a7
- textPreformat.background#45abc41a
- textPreformat.foreground#37a664
- textSeparator.foreground#262f36
- titleBar.activeBackground#0e1113
- titleBar.activeForeground#798a96
- titleBar.border#262f3600
- titleBar.inactiveBackground#0e1113
- titleBar.inactiveForeground#586874
- tree.inactiveIndentGuidesStroke#20272d
- tree.indentGuidesStroke#283239
- walkThrough.embeddedEditorBackground#121619
- welcomePage.background#171d21
- welcomePage.progress.background#262f36
- welcomePage.progress.foreground#45abc4
- welcomePage.tileBackground#121619
- welcomePage.tileHoverBackground#242d33
- widget.border#262f36
- widget.shadow#06080970
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment, string.comment | #728897 | italic |
| comment.block.documentation storage.type, comment keyword | #728897 | italic bold |
| punctuation, meta.brace, punctuation.definition.parameters, punctuation.separator, punctuation.terminator | #81919c | — |
| variable, variable.other.readwrite, meta.definition.variable.name, support.variable, entity.name.variable | #c2c8cc | — |
| variable.parameter, meta.function.parameters variable | #c8adb0 | italic |
| variable.language, variable.language.this, variable.other.constant | #d37b7d | italic |
| variable.other.property, meta.object-literal.key, support.type.property-name, variable.other.object.property | #6998bc | — |
| keyword, keyword.control, keyword.other, storage, storage.type, storage.modifier, keyword.type | #d073bb | — |
| keyword.operator, punctuation.accessor, storage.type.function.arrow | #b270a3 | — |
| keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.default | #d073bb | italic |
| string, string.quoted, punctuation.definition.string, string.template | #37a664 | — |
| punctuation.definition.template-expression, punctuation.section.embedded | #b270a3 | — |
| string.regexp, constant.other.character-class.regexp, keyword.operator.quantifier.regexp | #30a495 | — |
| constant.character.escape, constant.character | #d37b7d | — |
| constant.numeric, constant.language.numeric | #bf8840 | — |
| constant, constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, support.constant | #bf8840 | — |
| entity.name.function, support.function, meta.function-call.generic, variable.function | #5b99c8 | — |
| entity.name.method, meta.method entity.name.function | #5b99c8 | — |
| entity.name.type, entity.name.class, entity.other.inherited-class, support.class, support.type, meta.type.annotation, entity.name.namespace | #36a394 | — |
| meta.decorator, entity.name.function.decorator, punctuation.decorator | #b98a4e | italic |
| entity.name.tag, punctuation.definition.tag, meta.tag | #d37b7d | — |
| support.class.component, entity.name.tag.custom | #36a394 | — |
| entity.other.attribute-name, meta.attribute | #b98a4e | italic |
| entity.name.selector, entity.other.attribute-name.class, entity.other.attribute-name.id | #36a394 | — |
| support.type.property-name.css, support.type.property-name.scss | #6998bc | — |
| keyword.other.unit, constant.numeric.css | #bf8840 | — |
| support.type.property-name.json, meta.structure.dictionary.json string.quoted.double | #6998bc | — |
| entity.name.tag.yaml | #6998bc | — |
| markup.heading, entity.name.section.markdown, punctuation.definition.heading | #5b99c8 | bold |
| markup.bold | #bf8840 | bold |
| markup.italic | #d073bb | italic |
| markup.strikethrough | #728897 | strikethrough |
| markup.underline.link, string.other.link | #3590a7 | underline |
| markup.quote | #728897 | italic |
| markup.inline.raw, markup.fenced_code, markup.raw | #37a664 | — |
| markup.list punctuation.definition.list, beginning.punctuation.definition.list | #d37b7d | — |
| markup.inserted | #35975e | — |
| markup.deleted | #c96b64 | — |
| markup.changed | #a4813a | — |
| invalid, invalid.illegal | #cf7076 | — |
| invalid.deprecated | #a88738 | strikethrough |
| variable.other.normal.shell, string.interpolated.dollar.shell | #6998bc | — |
| keyword.other.definition.ini, entity.name.section.ini | #6998bc | — |