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#5da7441a
- activityBar.activeBorder#5da744
- activityBar.background#ecefec
- activityBar.border#dce1db00
- activityBar.foreground#3d413c
- activityBar.inactiveForeground#7c8879
- activityBarBadge.background#5da744
- activityBarBadge.foreground#181c17
- activityBarTop.activeBorder#5da744
- activityBarTop.foreground#3d413c
- activityBarTop.inactiveForeground#7c8879
- badge.background#5da744
- badge.foreground#181c17
- banner.background#f6f7f5
- banner.foreground#3d413c
- banner.iconForeground#477f34
- breadcrumb.activeSelectionForeground#477f34
- breadcrumb.background#fbfbfb
- breadcrumb.focusForeground#3d413c
- breadcrumb.foreground#849081
- breadcrumbPicker.background#fdfdfd
- button.background#5da744
- button.border#5da74400
- button.foreground#181c17
- button.hoverBackground#51913b
- button.secondaryBackground#f6f7f5
- button.secondaryForeground#3d413c
- button.secondaryHoverBackground#ecefec
- charts.blue#1b7c9a
- charts.foreground#3d413c
- charts.green#167c45
- charts.lines#849081
- charts.orange#a34e1d
- charts.purple#b01fab
- charts.red#d22531
- charts.yellow#896718
- checkbox.background#fdfdfd
- checkbox.border#c4cbc2
- checkbox.foreground#3d413c
- debugConsole.errorForeground#d22531
- debugConsole.infoForeground#437932
- debugConsole.sourceForeground#636d61
- debugConsole.warningForeground#896718
- debugConsoleInputIcon.foreground#477f34
- debugExceptionWidget.background#f5dddf
- debugExceptionWidget.border#d22531
- debugIcon.breakpointDisabledForeground#d2253180
- debugIcon.breakpointForeground#d22531
- debugIcon.continueForeground#167c45
- debugIcon.pauseForeground#437932
- debugIcon.restartForeground#167c45
- debugIcon.startForeground#167c45
- debugIcon.stepIntoForeground#437932
- debugIcon.stepOutForeground#437932
- debugIcon.stepOverForeground#437932
- debugIcon.stopForeground#d22531
- debugTokenExpression.boolean#b01fab
- debugTokenExpression.error#d22531
- debugTokenExpression.name#286e83
- debugTokenExpression.number#a34e1d
- debugTokenExpression.string#157528
- debugTokenExpression.value#157528
- debugToolBar.background#fdfdfd
- debugToolBar.border#dce1db
- descriptionForeground#636d61
- diffEditor.diagonalFill#dce1db
- diffEditor.insertedLineBackground#1a824514
- diffEditor.insertedTextBackground#1a82451f
- diffEditor.removedLineBackground#d5352a14
- diffEditor.removedTextBackground#d5352a1f
- diffEditorOverview.insertedForeground#1a824599
- diffEditorOverview.removedForeground#d5352a99
- dropdown.background#fdfdfd
- dropdown.border#dce1db
- dropdown.foreground#3d413c
- dropdown.listBackground#fdfdfd
- editor.background#fbfbfb
- editor.findMatchBackground#d9682647
- editor.findMatchBorder#dd773cb3
- editor.findMatchHighlightBackground#d9682629
- editor.findRangeHighlightBackground#5da7441c
- editor.focusedStackFrameHighlightBackground#167c452e
- editor.foldBackground#5da74414
- editor.foreground#3d413c
- editor.hoverHighlightBackground#5da74424
- editor.inactiveSelectionBackground#5da7441c
- editor.lineHighlightBackground#00000009
- editor.lineHighlightBorder#5da74400
- editor.rangeHighlightBackground#5da7441c
- editor.selectionBackground#5da74433
- editor.selectionHighlightBackground#5da7441c
- editor.selectionHighlightBorder#5da74400
- editor.stackFrameHighlightBackground#89671829
- editor.wordHighlightBackground#5da74424
- editor.wordHighlightStrongBackground#5da74438
- editorBracketHighlight.foreground1#1b7c9a
- editorBracketHighlight.foreground2#b65720
- editorBracketHighlight.foreground3#17825e
- editorBracketHighlight.foreground4#c523c0
- editorBracketHighlight.foreground5#17842d
- editorBracketHighlight.foreground6#d9284f
- editorBracketHighlight.unexpectedBracket.foreground#d22531
- editorBracketMatch.background#5da74429
- editorBracketMatch.border#5da7448c
- editorCodeLens.foreground#849081
- editorCursor.background#fbfbfb
- editorCursor.foreground#477f34
- editorError.foreground#d22531
- editorGhostText.foreground#959f93
- editorGroup.border#dce1db
- editorGroup.dropBackground#5da74429
- editorGroupHeader.border#dce1db00
- editorGroupHeader.noTabsBackground#ecefec
- editorGroupHeader.tabsBackground#ecefec
- editorGroupHeader.tabsBorder#dce1db00
- editorGutter.addedBackground#1a8245
- editorGutter.background#fbfbfb
- editorGutter.deletedBackground#d5352a
- editorGutter.foldingControlForeground#636d61
- editorGutter.modifiedBackground#936c1d
- editorHint.foreground#849081
- editorHoverWidget.background#fdfdfd
- editorHoverWidget.border#dce1db
- editorHoverWidget.foreground#3d413c
- editorHoverWidget.statusBarBackground#f6f7f5
- editorIndentGuide.activeBackground1#bfc7bd
- editorIndentGuide.background1#e4e8e3
- editorInfo.foreground#437932
- editorInlayHint.background#5da7441a
- editorInlayHint.foreground#849081
- editorLineNumber.activeForeground#477f34
- editorLineNumber.foreground#959f93
- editorLink.activeForeground#477f34
- editorOverviewRuler.addedForeground#1a8245
- editorOverviewRuler.border#dce1db00
- editorOverviewRuler.bracketMatchForeground#5da74466
- editorOverviewRuler.deletedForeground#d5352a
- editorOverviewRuler.errorForeground#d22531
- editorOverviewRuler.findMatchForeground#dd773cb3
- editorOverviewRuler.infoForeground#437932
- editorOverviewRuler.modifiedForeground#936c1d
- editorOverviewRuler.selectionHighlightForeground#5da74466
- editorOverviewRuler.warningForeground#896718
- editorRuler.foreground#e7eae6
- editorStickyScroll.background#f3f4f3
- editorStickyScrollHover.background#f6f7f5
- editorSuggestWidget.background#fdfdfd
- editorSuggestWidget.border#dce1db
- editorSuggestWidget.focusHighlightForeground#51913b
- editorSuggestWidget.foreground#3d413c
- editorSuggestWidget.highlightForeground#477f34
- editorSuggestWidget.selectedBackground#5da7442e
- editorSuggestWidget.selectedForeground#3d413c
- editorWarning.foreground#896718
- editorWhitespace.foreground#959f9380
- editorWidget.background#fdfdfd
- editorWidget.border#dce1db
- editorWidget.foreground#3d413c
- errorForeground#d22531
- extensionBadge.remoteBackground#5da744
- extensionBadge.remoteForeground#181c17
- extensionButton.prominentBackground#5da744
- extensionButton.prominentForeground#181c17
- extensionButton.prominentHoverBackground#51913b
- extensionIcon.preReleaseForeground#b01fab
- extensionIcon.starForeground#a34e1d
- extensionIcon.verifiedForeground#167c45
- focusBorder#5da74499
- foreground#3d413c
- gitDecoration.addedResourceForeground#1a8245
- gitDecoration.conflictingResourceForeground#c12cc1
- gitDecoration.deletedResourceForeground#d5352a
- gitDecoration.ignoredResourceForeground#849081
- gitDecoration.modifiedResourceForeground#936c1d
- gitDecoration.renamedResourceForeground#258325
- gitDecoration.stageDeletedResourceForeground#d5352a
- gitDecoration.stageModifiedResourceForeground#936c1d
- gitDecoration.submoduleResourceForeground#9154cf
- gitDecoration.untrackedResourceForeground#258325
- icon.foreground#636d61
- input.background#f7f8f7
- input.border#dce1db
- input.foreground#3d413c
- input.placeholderForeground#849081
- inputOption.activeBackground#5da7443d
- inputOption.activeBorder#5da74480
- inputOption.activeForeground#3d413c
- inputValidation.errorBackground#f4d9db
- inputValidation.errorBorder#d22531
- inputValidation.errorForeground#3d413c
- inputValidation.infoBackground#dee6db
- inputValidation.infoBorder#437932
- inputValidation.infoForeground#3d413c
- inputValidation.warningBackground#e9e3d7
- inputValidation.warningBorder#896718
- inputValidation.warningForeground#3d413c
- keybindingLabel.background#84908124
- keybindingLabel.border#84908129
- keybindingLabel.bottomBorder#84908138
- keybindingLabel.foreground#3d413c
- list.activeSelectionBackground#5da74433
- list.activeSelectionForeground#3d413c
- list.activeSelectionIconForeground#477f34
- list.dropBackground#5da74429
- list.errorForeground#d22531
- list.focusBackground#5da74433
- list.focusForeground#3d413c
- list.focusHighlightForeground#51913b
- list.focusOutline#5da74400
- list.highlightForeground#477f34
- list.hoverBackground#8490811a
- list.hoverForeground#3d413c
- list.inactiveSelectionBackground#5da7441c
- list.inactiveSelectionForeground#3d413c
- list.warningForeground#896718
- listFilterWidget.background#fdfdfd
- listFilterWidget.noMatchesOutline#d22531
- listFilterWidget.outline#5da744
- menu.background#fdfdfd
- menu.border#dce1db
- menu.foreground#3d413c
- menu.selectionBackground#5da74433
- menu.selectionForeground#3d413c
- menu.separatorBackground#dce1db
- menubar.selectionBackground#84908124
- menubar.selectionForeground#3d413c
- merge.border#dce1db00
- merge.commonContentBackground#8490811f
- merge.commonHeaderBackground#84908140
- merge.currentContentBackground#1a824524
- merge.currentHeaderBackground#1a82454d
- merge.incomingContentBackground#43793224
- merge.incomingHeaderBackground#4379324d
- minimap.background#fbfbfb
- minimap.errorHighlight#d22531
- minimap.findMatchHighlight#d96826b3
- minimap.selectionHighlight#5da74480
- minimap.warningHighlight#896718
- minimapGutter.addedBackground#1a8245
- minimapGutter.deletedBackground#d5352a
- minimapGutter.modifiedBackground#936c1d
- minimapSlider.activeBackground#84908142
- minimapSlider.background#8490811a
- minimapSlider.hoverBackground#8490812e
- notificationCenter.border#dce1db
- notificationCenterHeader.background#f6f7f5
- notificationCenterHeader.foreground#3d413c
- notificationLink.foreground#477f34
- notifications.background#fdfdfd
- notifications.border#dce1db
- notifications.foreground#3d413c
- notificationsErrorIcon.foreground#d22531
- notificationsInfoIcon.foreground#437932
- notificationsWarningIcon.foreground#896718
- notificationToast.border#dce1db
- panel.background#f3f4f3
- panel.border#dce1db
- panel.dropBorder#5da744
- panelInput.border#dce1db
- panelSection.border#dce1db
- panelSectionHeader.background#f3f4f3
- panelSectionHeader.foreground#3d413c
- panelTitle.activeBorder#5da744
- panelTitle.activeForeground#3d413c
- panelTitle.inactiveForeground#7e8b7c
- peekView.border#5da7448c
- peekViewEditor.background#f7f8f7
- peekViewEditor.matchHighlightBackground#d9682647
- peekViewResult.background#f3f4f3
- peekViewResult.fileForeground#3d413c
- peekViewResult.foreground#3d413c
- peekViewResult.lineForeground#636d61
- peekViewResult.matchHighlightBackground#d9682647
- peekViewResult.selectionBackground#5da7442e
- peekViewResult.selectionForeground#3d413c
- peekViewTitle.background#f3f4f3
- peekViewTitleDescription.foreground#636d61
- peekViewTitleLabel.foreground#3d413c
- pickerGroup.border#dce1db
- pickerGroup.foreground#477f34
- ports.iconRunningProcessForeground#167c45
- problemsErrorIcon.foreground#d22531
- problemsInfoIcon.foreground#437932
- problemsWarningIcon.foreground#896718
- progressBar.background#5da744
- quickInput.background#fdfdfd
- quickInput.foreground#3d413c
- quickInputList.focusBackground#5da74433
- quickInputList.focusForeground#3d413c
- quickInputList.focusIconForeground#477f34
- quickInputTitle.background#f6f7f5
- sash.hoverBorder#5da74480
- scrollbar.shadow#798a7514
- scrollbarSlider.activeBackground#84908173
- scrollbarSlider.background#84908133
- scrollbarSlider.hoverBackground#84908152
- search.resultsInfoForeground#636d61
- searchEditor.findMatchBackground#d9682629
- selection.background#5da74433
- settings.checkboxBackground#fdfdfd
- settings.checkboxBorder#c4cbc2
- settings.dropdownBackground#fdfdfd
- settings.dropdownBorder#dce1db
- settings.focusedRowBackground#5da74412
- settings.headerForeground#3d413c
- settings.modifiedItemIndicator#5da744
- settings.numberInputBackground#f7f8f7
- settings.numberInputBorder#dce1db
- settings.rowHoverBackground#8490810f
- settings.textInputBackground#f7f8f7
- settings.textInputBorder#dce1db
- sideBar.background#f3f4f3
- sideBar.border#dce1db00
- sideBar.foreground#5e685c
- sideBarSectionHeader.background#f3f4f3
- sideBarSectionHeader.border#dce1db00
- sideBarSectionHeader.foreground#3d413c
- sideBarStickyScroll.background#f3f4f3
- sideBarTitle.foreground#3d413c
- statusBar.background#ecefec
- statusBar.border#dce1db00
- statusBar.debuggingBackground#5da744
- statusBar.debuggingBorder#dce1db00
- statusBar.debuggingForeground#181c17
- statusBar.foreground#5c655a
- statusBar.noFolderBackground#ecefec
- statusBar.noFolderForeground#5c655a
- statusBarItem.activeBackground#84908138
- statusBarItem.hoverBackground#84908124
- statusBarItem.prominentBackground#5da7443d
- statusBarItem.prominentForeground#3d413c
- statusBarItem.prominentHoverBackground#5da74457
- statusBarItem.remoteBackground#5da744
- statusBarItem.remoteForeground#181c17
- symbolIcon.booleanForeground#b01fab
- symbolIcon.classForeground#147353
- symbolIcon.colorForeground#9d5227
- symbolIcon.constantForeground#a34e1d
- symbolIcon.constructorForeground#186e89
- symbolIcon.enumeratorForeground#147353
- symbolIcon.enumeratorMemberForeground#a34e1d
- symbolIcon.fieldForeground#286e83
- symbolIcon.fileForeground#636d61
- symbolIcon.folderForeground#636d61
- symbolIcon.functionForeground#186e89
- symbolIcon.interfaceForeground#147353
- symbolIcon.keywordForeground#b01fab
- symbolIcon.methodForeground#186e89
- symbolIcon.moduleForeground#c32245
- symbolIcon.namespaceForeground#c32245
- symbolIcon.numberForeground#a34e1d
- symbolIcon.propertyForeground#286e83
- symbolIcon.snippetForeground#9d5227
- symbolIcon.stringForeground#157528
- symbolIcon.textForeground#636d61
- symbolIcon.variableForeground#3d413c
- tab.activeBackground#fbfbfb
- tab.activeBorder#fbfbfb00
- tab.activeBorderTop#5da744
- tab.activeForeground#3d413c
- tab.activeModifiedBorder#936c1d
- tab.border#dce1db00
- tab.hoverBackground#f3f4f3
- tab.hoverForeground#3d413c
- tab.inactiveBackground#ecefec
- tab.inactiveForeground#7c8879
- tab.inactiveModifiedBorder#936c1d80
- tab.lastPinnedBorder#dce1db
- tab.unfocusedActiveBackground#f3f4f3
- tab.unfocusedActiveBorderTop#5da74459
- tab.unfocusedActiveForeground#636d61
- tab.unfocusedInactiveForeground#959f93
- terminal.ansiBlack#aeb9ac
- terminal.ansiBlue#1b7c9a
- terminal.ansiBrightBlack#8e9c8b
- terminal.ansiBrightBlue#16667e
- terminal.ansiBrightCyan#136b4d
- terminal.ansiBrightGreen#136c25
- terminal.ansiBrightMagenta#a21d9d
- terminal.ansiBrightRed#b3232c
- terminal.ansiBrightWhite#3d413c
- terminal.ansiBrightYellow#95471a
- terminal.ansiCyan#17825e
- terminal.ansiGreen#17842d
- terminal.ansiMagenta#c523c0
- terminal.ansiRed#da2b36
- terminal.ansiWhite#5e685c
- terminal.ansiYellow#b65720
- terminal.background#f3f4f3
- terminal.border#dce1db
- terminal.findMatchBackground#d9682647
- terminal.findMatchHighlightBackground#d9682629
- terminal.foreground#393d38
- terminal.inactiveSelectionBackground#5da7441c
- terminal.selectionBackground#5da74433
- terminalCursor.background#f3f4f3
- terminalCursor.foreground#477f34
- testing.iconErrored#d22531
- testing.iconFailed#d22531
- testing.iconPassed#167c45
- testing.iconQueued#896718
- testing.iconSkipped#849081
- testing.iconUnset#849081
- testing.message.error.decorationForeground#d22531
- testing.runAction#167c45
- textBlockQuote.background#f3f4f3
- textBlockQuote.border#5da74480
- textCodeBlock.background#f3f4f3
- textLink.activeForeground#51913b
- textLink.foreground#477f34
- textPreformat.background#5da7441a
- textPreformat.foreground#157528
- textSeparator.foreground#dce1db
- titleBar.activeBackground#ecefec
- titleBar.activeForeground#5c655a
- titleBar.border#dce1db00
- titleBar.inactiveBackground#ecefec
- titleBar.inactiveForeground#959f93
- tree.inactiveIndentGuidesStroke#eaece9
- tree.indentGuidesStroke#e1e5e1
- walkThrough.embeddedEditorBackground#f3f4f3
- welcomePage.background#fbfbfb
- welcomePage.progress.background#e4e8e3
- welcomePage.progress.foreground#5da744
- welcomePage.tileBackground#f3f4f3
- welcomePage.tileHoverBackground#f6f7f5
- widget.border#dce1db
- widget.shadow#86958324
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment, string.comment | #697566 | italic |
| comment.block.documentation storage.type, comment keyword | #697566 | italic bold |
| punctuation, meta.brace, punctuation.definition.parameters, punctuation.separator, punctuation.terminator | #636d61 | — |
| variable, variable.other.readwrite, meta.definition.variable.name, support.variable, entity.name.variable | #3d413c | — |
| variable.parameter, meta.function.parameters variable | #6c363f | italic |
| variable.language, variable.language.this, variable.other.constant | #c32245 | italic |
| variable.other.property, meta.object-literal.key, support.type.property-name, variable.other.object.property | #286e83 | — |
| keyword, keyword.control, keyword.other, storage, storage.type, storage.modifier, keyword.type | #b01fab | — |
| keyword.operator, punctuation.accessor, storage.type.function.arrow | #b148ae | — |
| keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.default | #b01fab | italic |
| string, string.quoted, punctuation.definition.string, string.template | #157528 | — |
| punctuation.definition.template-expression, punctuation.section.embedded | #b148ae | — |
| string.regexp, constant.other.character-class.regexp, keyword.operator.quantifier.regexp | #0f7553 | — |
| constant.character.escape, constant.character | #c32245 | — |
| constant.numeric, constant.language.numeric | #a34e1d | — |
| constant, constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, support.constant | #a34e1d | — |
| entity.name.function, support.function, meta.function-call.generic, variable.function | #186e89 | — |
| entity.name.method, meta.method entity.name.function | #186e89 | — |
| entity.name.type, entity.name.class, entity.other.inherited-class, support.class, support.type, meta.type.annotation, entity.name.namespace | #147353 | — |
| meta.decorator, entity.name.function.decorator, punctuation.decorator | #9d5227 | italic |
| entity.name.tag, punctuation.definition.tag, meta.tag | #c32245 | — |
| support.class.component, entity.name.tag.custom | #147353 | — |
| entity.other.attribute-name, meta.attribute | #9d5227 | italic |
| entity.name.selector, entity.other.attribute-name.class, entity.other.attribute-name.id | #147353 | — |
| support.type.property-name.css, support.type.property-name.scss | #286e83 | — |
| keyword.other.unit, constant.numeric.css | #a34e1d | — |
| support.type.property-name.json, meta.structure.dictionary.json string.quoted.double | #286e83 | — |
| entity.name.tag.yaml | #286e83 | — |
| markup.heading, entity.name.section.markdown, punctuation.definition.heading | #186e89 | bold |
| markup.bold | #a34e1d | bold |
| markup.italic | #b01fab | italic |
| markup.strikethrough | #697566 | strikethrough |
| markup.underline.link, string.other.link | #477f34 | underline |
| markup.quote | #697566 | italic |
| markup.inline.raw, markup.fenced_code, markup.raw | #157528 | — |
| markup.list punctuation.definition.list, beginning.punctuation.definition.list | #c32245 | — |
| markup.inserted | #1a8245 | — |
| markup.deleted | #d5352a | — |
| markup.changed | #936c1d | — |
| invalid, invalid.illegal | #d22531 | — |
| invalid.deprecated | #896718 | strikethrough |
| variable.other.normal.shell, string.interpolated.dollar.shell | #286e83 | — |
| keyword.other.definition.ini, entity.name.section.ini | #286e83 | — |