midnight beach dark theme
Publisher: pawan kalyanThemes in package: 1
A clean, aesthetic dark theme for VS Code inspired by midnight beaches, designed for calm visuals and long 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.activeBorder#548af7
- activityBar.background#181a1d
- activityBar.border#181a1d00
- activityBar.foreground#bcbec4
- activityBar.inactiveForeground#6f737a
- activityBarBadge.background#548af7
- activityBarBadge.foreground#ffffff
- badge.background#548af7
- badge.foreground#ffffff
- breadcrumb.activeSelectionForeground#bcbec4
- breadcrumb.background#181a1d
- breadcrumb.focusForeground#bcbec4
- breadcrumb.foreground#7a7e85
- breadcrumbPicker.background#181a1d
- button.background#548af7
- button.border#00000000
- button.foreground#ffffff
- button.hoverBackground#6d9df8
- button.secondaryBackground#3c3f41
- button.secondaryForeground#bcbec4
- button.secondaryHoverBackground#4e5153
- button.separator#548af700
- checkbox.background#181a1d
- checkbox.border#3c3f41
- checkbox.foreground#bcbec4
- commandCenter.activeBackground#25324d
- commandCenter.activeForeground#bcbec4
- commandCenter.background#181a1d
- commandCenter.border#2b2d30
- commandCenter.foreground#7a7e85
- contrastActiveBorder#00000000
- contrastBorder#00000000
- debugExceptionWidget.background#2b2d30
- debugExceptionWidget.border#f75464
- debugTokenExpression.boolean#cf8e6d
- debugTokenExpression.error#f75464
- debugTokenExpression.name#c77dbb
- debugTokenExpression.number#2aacb8
- debugTokenExpression.string#6aab73
- debugTokenExpression.value#6aab73
- debugToolBar.background#2b2d30
- debugToolBar.border#3c3f41
- descriptionForeground#7a7e85
- diffEditor.diagonalFill#2b2d30
- diffEditor.insertedLineBackground#73b00a15
- diffEditor.insertedTextBackground#73b00a18
- diffEditor.removedLineBackground#f7546415
- diffEditor.removedTextBackground#f7546418
- diffEditorGutter.insertedLineBackground#73b00a30
- diffEditorGutter.removedLineBackground#f7546430
- dropdown.background#181a1d
- dropdown.border#3c3f41
- dropdown.foreground#bcbec4
- dropdown.listBackground#2b2d30
- editor.background#181a1d
- editor.findMatchBackground#32593d
- editor.findMatchBorder#73b00a
- editor.findMatchHighlightBackground#54575b50
- editor.foldBackground#25324d20
- editor.foreground#bcbec4
- editor.hoverHighlightBackground#25324d30
- editor.inactiveSelectionBackground#373b3950
- editor.lineHighlightBackground#252629
- editor.lineHighlightBorder#1f020400
- editor.rangeHighlightBackground#25324d30
- editor.selectionBackground#373b39
- editor.selectionHighlightBackground#373b3940
- editor.wordHighlightBackground#373b3940
- editor.wordHighlightStrongBackground#373b3960
- editorBracketHighlight.foreground1#cf8e6d
- editorBracketHighlight.foreground2#c77dbb
- editorBracketHighlight.foreground3#2aacb8
- editorBracketHighlight.foreground4#6aab73
- editorBracketHighlight.foreground5#e8a33e
- editorBracketHighlight.foreground6#548af7
- editorBracketMatch.background#3c3f4150
- editorBracketMatch.border#3c3f41
- editorCodeLens.foreground#555861
- editorCursor.foreground#bcbec4
- editorError.foreground#f75464
- editorGroup.border#181a1d00
- editorGroup.dropBackground#25324d80
- editorGroupHeader.noTabsBackground#181a1d
- editorGroupHeader.tabsBackground#161619
- editorGroupHeader.tabsBorder#181a1d00
- editorGutter.addedBackground#73b00a
- editorGutter.deletedBackground#f75464
- editorGutter.modifiedBackground#548af7
- editorHint.foreground#7a7e85
- editorHoverWidget.background#161619
- editorHoverWidget.border#16161900
- editorHoverWidget.foreground#bcbec4
- editorHoverWidget.statusBarBackground#141416
- editorIndentGuide.activeBackground1#3c3f41
- editorIndentGuide.background1#3c3f4100
- editorInfo.foreground#548af7
- editorInlayHint.background#3c3f4140
- editorInlayHint.foreground#7a7e85
- editorInlayHint.parameterBackground#3c3f4140
- editorInlayHint.parameterForeground#7a7e85
- editorInlayHint.typeBackground#3c3f4140
- editorInlayHint.typeForeground#7a7e85
- editorLineNumber.activeForeground#a1a3ab
- editorLineNumber.foreground#4e5157
- editorLink.activeForeground#548af7
- editorOverviewRuler.addedForeground#73b00a80
- editorOverviewRuler.border#181a1d00
- editorOverviewRuler.deletedForeground#f7546480
- editorOverviewRuler.errorForeground#f75464
- editorOverviewRuler.findMatchForeground#73b00a80
- editorOverviewRuler.infoForeground#548af7
- editorOverviewRuler.modifiedForeground#548af780
- editorOverviewRuler.warningForeground#e8a33e
- editorRuler.foreground#3c3f41
- editorStickyScroll.background#181a1d
- editorStickyScrollHover.background#252629
- editorSuggestWidget.background#2b2d30
- editorSuggestWidget.border#3c3f41
- editorSuggestWidget.foreground#bcbec4
- editorSuggestWidget.highlightForeground#548af7
- editorSuggestWidget.selectedBackground#25324d
- editorWarning.foreground#e8a33e
- editorWhitespace.foreground#3c3f41
- editorWidget.background#181a1d
- editorWidget.border#25262a
- editorWidget.foreground#bcbec4
- errorForeground#f75464
- extensionBadge.remoteBackground#548af7
- extensionBadge.remoteForeground#ffffff
- extensionButton.prominentBackground#548af7
- extensionButton.prominentForeground#ffffff
- extensionButton.prominentHoverBackground#6d9df8
- focusBorder#00000000
- foreground#bcbec4
- gitDecoration.addedResourceForeground#73C991
- gitDecoration.conflictingResourceForeground#e8a33e
- gitDecoration.deletedResourceForeground#f75464
- gitDecoration.ignoredResourceForeground#4e5157
- gitDecoration.modifiedResourceForeground#548af7
- gitDecoration.renamedResourceForeground#2aacb8
- gitDecoration.stageDeletedResourceForeground#f75464
- gitDecoration.stageModifiedResourceForeground#548af7
- gitDecoration.untrackedResourceForeground#73C991
- icon.foreground#bcbec4
- input.background#181a1d
- input.border#3c3f41
- input.foreground#bcbec4
- input.placeholderForeground#7a7e85
- inputOption.activeBackground#25324d
- inputOption.activeBorder#548af7
- inputOption.activeForeground#bcbec4
- inputValidation.errorBackground#181a1d
- inputValidation.errorBorder#f75464
- inputValidation.infoBackground#181a1d
- inputValidation.infoBorder#548af7
- inputValidation.warningBackground#181a1d
- inputValidation.warningBorder#e8a33e
- keybindingLabel.background#3c3f4140
- keybindingLabel.border#3c3f41
- keybindingLabel.bottomBorder#3c3f41
- keybindingLabel.foreground#bcbec4
- list.activeSelectionBackground#25262a90
- list.activeSelectionForeground#bcbec4
- list.dropBackground#25324d80
- list.errorForeground#f75464
- list.focusBackground#25262a90
- list.focusForeground#bcbec4
- list.highlightForeground#548af7
- list.hoverBackground#25262a50
- list.hoverForeground#bcbec4
- list.inactiveSelectionBackground#25262a70
- list.inactiveSelectionForeground#bcbec4
- list.warningForeground#e8a33e
- menu.background#2b2d30
- menu.foreground#bcbec4
- menu.selectionBackground#25324d
- menu.selectionForeground#bcbec4
- menu.separatorBackground#3c3f41
- menubar.selectionBackground#25324d
- menubar.selectionForeground#bcbec4
- merge.border#2b2d30
- merge.commonContentBackground#3c3f4130
- merge.commonHeaderBackground#3c3f4160
- merge.currentContentBackground#73b00a20
- merge.currentHeaderBackground#73b00a40
- merge.incomingContentBackground#548af720
- merge.incomingHeaderBackground#548af740
- minimap.errorHighlight#f75464
- minimap.findMatchHighlight#548af740
- minimap.selectionHighlight#373b3960
- minimap.warningHighlight#e8a33e
- minimapGutter.addedBackground#73b00a
- minimapGutter.deletedBackground#f75464
- minimapGutter.modifiedBackground#548af7
- minimapSlider.activeBackground#3c3f4190
- minimapSlider.background#3c3f4150
- minimapSlider.hoverBackground#3c3f4180
- notebook.cellBorderColor#2b2d30
- notebook.cellEditorBackground#1e2024
- notebook.cellToolbarSeparator#2b2d30
- notebook.editorBackground#181a1d
- notebook.focusedCellBorder#548af7
- notebook.focusedEditorBorder#548af700
- notebook.inactiveFocusedCellBorder#2b2d30
- notebook.selectedCellBackground#1e2024
- notebook.selectedCellBorder#548af7
- notebookStatusErrorIcon.foreground#f75464
- notebookStatusRunningIcon.foreground#548af7
- notebookStatusSuccessIcon.foreground#73b00a
- notificationCenterHeader.background#1e1f22
- notificationCenterHeader.foreground#bcbec4
- notificationLink.foreground#548af7
- notifications.background#181a1d
- notifications.border#25262a
- notifications.foreground#bcbec4
- notificationsErrorIcon.foreground#f75464
- notificationsInfoIcon.foreground#548af7
- notificationsWarningIcon.foreground#e8a33e
- panel.background#181a1d
- panel.border#181a1d00
- panel.dropBorder#548af7
- panelSection.border#2b2d30
- panelTitle.activeBorder#548af7
- panelTitle.activeForeground#bcbec4
- panelTitle.inactiveForeground#7a7e85
- peekView.border#548af7
- peekViewEditor.background#181a1d
- peekViewEditor.matchHighlightBackground#32593d
- peekViewEditorGutter.background#181a1d
- peekViewResult.background#2b2d30
- peekViewResult.fileForeground#bcbec4
- peekViewResult.lineForeground#7a7e85
- peekViewResult.matchHighlightBackground#32593d
- peekViewResult.selectionBackground#25324d
- peekViewResult.selectionForeground#bcbec4
- peekViewTitle.background#2b2d30
- peekViewTitleDescription.foreground#7a7e85
- peekViewTitleLabel.foreground#bcbec4
- pickerGroup.border#25262a
- pickerGroup.foreground#548af7
- progressBar.background#548af7
- quickInput.background#181a1d
- quickInput.foreground#bcbec4
- quickInputList.focusBackground#25324d
- quickInputList.focusForeground#bcbec4
- quickInputTitle.background#1e1f22
- scrollbar.shadow#00000000
- scrollbarSlider.activeBackground#5e616590
- scrollbarSlider.background#3c3f4140
- scrollbarSlider.hoverBackground#50535770
- searchEditor.findMatchBackground#32593d50
- selection.background#373b39
- settings.focusedRowBackground#25324d30
- settings.headerForeground#bcbec4
- settings.modifiedItemIndicator#548af7
- settings.rowHoverBackground#2b2d3050
- sideBar.background#181a1d
- sideBar.border#181a1d00
- sideBar.dropBackground#25324d80
- sideBar.foreground#bcbec4
- sideBarSectionHeader.background#181a1d
- sideBarSectionHeader.border#181a1d00
- sideBarSectionHeader.foreground#bcbec4
- sideBarTitle.foreground#bcbec4
- statusBar.background#181a1d
- statusBar.border#181a1d00
- statusBar.debuggingBackground#cf8e6d
- statusBar.debuggingForeground#181a1d
- statusBar.foreground#35383d
- statusBar.noFolderBackground#181a1d
- statusBar.noFolderForeground#35383d
- statusBarItem.activeBackground#3c3f4150
- statusBarItem.errorBackground#f75464
- statusBarItem.errorForeground#ffffff
- statusBarItem.hoverBackground#3c3f4130
- statusBarItem.prominentBackground#25324d
- statusBarItem.prominentForeground#bcbec4
- statusBarItem.prominentHoverBackground#25324d80
- statusBarItem.remoteBackground#548af7
- statusBarItem.remoteForeground#ffffff
- statusBarItem.warningBackground#e8a33e
- statusBarItem.warningForeground#181a1d
- tab.activeBackground#181a1d
- tab.activeBorderTop#548af700
- tab.activeForeground#bcbec4
- tab.border#19191e
- tab.hoverBackground#161619
- tab.hoverForeground#b0b2b8
- tab.inactiveBackground#161619
- tab.inactiveForeground#7a7e85
- tab.lastPinnedBorder#2b2d30
- tab.unfocusedActiveBackground#181a1d
- tab.unfocusedActiveForeground#7a7e85
- tab.unfocusedInactiveBackground#161619
- tab.unfocusedInactiveForeground#6f737a
- terminal.ansiBlack#181a1d
- terminal.ansiBlue#548af7
- terminal.ansiBrightBlack#6f737a
- terminal.ansiBrightBlue#7cacf8
- terminal.ansiBrightCyan#42c6d2
- terminal.ansiBrightGreen#8ccf15
- terminal.ansiBrightMagenta#d79fd2
- terminal.ansiBrightRed#f9667a
- terminal.ansiBrightWhite#d4d5d9
- terminal.ansiBrightYellow#f0b95e
- terminal.ansiCyan#2aacb8
- terminal.ansiGreen#73b00a
- terminal.ansiMagenta#c77dbb
- terminal.ansiRed#f75464
- terminal.ansiWhite#bcbec4
- terminal.ansiYellow#e8a33e
- terminal.background#181a1d
- terminal.foreground#bcbec4
- terminal.selectionBackground#373b39
- terminalCursor.foreground#bcbec4
- testing.iconErrored#f75464
- testing.iconFailed#f75464
- testing.iconPassed#73b00a
- testing.iconQueued#e8a33e
- testing.iconSkipped#7a7e85
- testing.iconUnset#7a7e85
- testing.runAction#73b00a
- textBlockQuote.background#181a1d
- textBlockQuote.border#548af7
- textLink.activeForeground#7cacf8
- textLink.foreground#548af7
- textPreformat.foreground#bcbec4
- titleBar.activeBackground#181a1d
- titleBar.activeForeground#bcbec4
- titleBar.border#181a1d00
- titleBar.inactiveBackground#181a1d
- titleBar.inactiveForeground#7a7e85
- tree.indentGuidesStroke#3c3f45
- walkThrough.embeddedEditorBackground#181a1d
- welcomePage.background#181a1d
- welcomePage.tileBackground#181a1d
- welcomePage.tileBorder#2b2d30
- welcomePage.tileHoverBackground#2b2d30
- widget.border#00000000
- widget.shadow#00000030
- window.activeBorder#00000000
- window.inactiveBorder#00000000
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #7a7e85 | italic |
| comment.block.documentation, comment.block.javadoc | #7a7e85 | italic |
| string, string.quoted, string.template, string.quoted.single, string.quoted.double, string.quoted.triple | #6aab73 | — |
| punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded | #cf8e6d | — |
| keyword, keyword.control, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.conditional, keyword.control.loop, keyword.control.trycatch, keyword.operator.new, keyword.operator.expression, keyword.operator.expression.typeof, keyword.operator.expression.instanceof, keyword.operator.expression.of, keyword.operator.expression.in, keyword.operator.expression.void, keyword.operator.expression.delete | #cf8e6d | — |
| storage, storage.type, storage.modifier, storage.type.function, storage.type.class, storage.type.interface, storage.type.enum, storage.type.type | #cf8e6d | — |
| entity.name.function, meta.function-call entity.name.function, support.function, meta.function-call | #56a8f5 | — |
| variable.parameter, meta.parameter | #bcbec4 | — |
| entity.name.type, entity.name.type.class, entity.name.type.interface, entity.name.type.enum, entity.name.type.struct, entity.name.type.type, support.type, support.class, entity.other.inherited-class | #c77dbb | — |
| entity.name.type.parameter | #c77dbb | — |
| constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary | #2aacb8 | — |
| constant.language, constant.language.boolean, constant.language.null, constant.language.undefined | #cf8e6d | — |
| variable.other.constant, variable.other.enummember | #c77dbb | — |
| variable, variable.other, variable.other.readwrite, variable.other.object | #bcbec4 | — |
| variable.language, variable.language.this, variable.language.self, variable.language.super | #cf8e6d | italic |
| variable.other.property, support.variable.property, variable.other.object.property | #c77dbb | — |
| keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.ternary, keyword.operator.spread, keyword.operator.rest, keyword.operator.type | #bcbec4 | — |
| punctuation, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.arguments, punctuation.separator, punctuation.terminator, punctuation.accessor, meta.brace.round, meta.brace.square, meta.brace.curly | #bcbec4 | — |
| entity.name.tag, entity.name.tag.html, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end | #cf8e6d | — |
| entity.other.attribute-name, entity.other.attribute-name.html | #bababa | — |
| support.class.component, entity.name.tag support.class.component | #56a8f5 | — |
| entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css | #cf8e6d | — |
| support.type.property-name.css, support.type.vendored.property-name.css, meta.property-name.css | #bcbec4 | — |
| support.constant.property-value.css, support.constant.font-name.css, support.constant.media.css | #bcbec4 | — |
| keyword.other.unit.css, constant.other.color.rgb-value.css, support.constant.color.css | #2aacb8 | — |
| keyword.control.at-rule.css, keyword.control.at-rule.media.css, keyword.control.at-rule.import.css | #cf8e6d | — |
| variable.scss, variable.other.less | #bcbec4 | — |
| string.regexp, constant.other.character-class.regexp, keyword.operator.quantifier.regexp, keyword.operator.or.regexp, punctuation.definition.group.regexp, punctuation.definition.character-class.regexp | #2aacb8 | — |
| constant.character.escape, constant.character.escape.backslash | #cf8e6d | — |
| meta.decorator, meta.decorator entity.name.function, punctuation.decorator, meta.annotation, storage.type.annotation | #bbb529 | — |
| support.type.property-name.json, string.json support.type.property-name | #c77dbb | — |
| string.quoted.double.json | #6aab73 | — |
| entity.name.tag.yaml, support.type.property-name.yaml | #cf8e6d | — |
| string.unquoted.plain.out.yaml | #bcbec4 | — |
| entity.name.type.anchor.yaml, variable.other.alias.yaml, keyword.control.flow.block-scalar.yaml | #2aacb8 | — |
| heading.1.markdown entity.name, heading.2.markdown entity.name, heading.3.markdown entity.name, heading.4.markdown entity.name, heading.5.markdown entity.name, heading.6.markdown entity.name, markup.heading, markup.heading.setext | #cf8e6d | bold |
| punctuation.definition.heading.markdown | #cf8e6d | — |
| markup.bold | #bcbec4 | bold |
| markup.italic | #bcbec4 | italic |
| markup.inline.raw, markup.fenced_code.block | #6aab73 | — |
| markup.underline.link, markup.underline.link.markdown | #548af7 | — |
| string.other.link.title.markdown, string.other.link.description.markdown | #56a8f5 | — |
| punctuation.definition.list.begin.markdown, markup.list.numbered.markdown, markup.list.unnumbered.markdown | #cf8e6d | — |
| markup.quote.markdown | #7a7e85 | italic |
| meta.function.decorator.python, entity.name.function.decorator.python | #bbb529 | — |
| support.function.magic.python | #56a8f5 | — |
| constant.character.format.placeholder.other.python | #cf8e6d | — |
| entity.name.package.go | #bcbec4 | — |
| entity.name.import.go | #6aab73 | — |
| entity.name.type.lifetime.rust, storage.modifier.lifetime.rust, punctuation.definition.lifetime.rust | #2aacb8 | — |
| entity.name.function.macro.rust, support.macro.rust | #56a8f5 | bold |
| meta.attribute.rust | #bbb529 | — |
| variable.other.normal.shell, variable.other.positional.shell, variable.other.bracket.shell, variable.other.special.shell | #bcbec4 | — |
| entity.name.namespace, entity.name.module, entity.name.type.module | #c77dbb | — |
| support.constant, support.variable | #c77dbb | — |
| markup.inserted | #73b00a | — |
| markup.deleted | #f75464 | — |
| markup.changed | #548af7 | — |
| invalid, invalid.illegal | #f75464 | — |
| invalid.deprecated | #e8a33e | strikethrough |