Serene Focus Theme
Publisher: ovcharovcoderThemes in package: 2
Soft on the eyes, sharp on syntax — a modern theme with subtle neon accents for day and night coding.
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#7BDCB50D
- activityBar.activeBorder#7BDCB5
- activityBar.background#12161B
- activityBar.border#232A31
- activityBar.foreground#E6EDF3
- activityBar.inactiveForeground#7A8A96
- badge.background#7BDCB5
- badge.foreground#1A1F24
- breadcrumb.activeSelectionForeground#7BDCB5
- breadcrumb.focusForeground#7BDCB5
- breadcrumb.foreground#7A8A96
- breadcrumbPicker.background#242A30
- button.background#2E3B42
- button.foreground#E6EDF3
- button.hoverBackground#7BDCB51A
- button.secondaryBackground#242A30
- debugIcon.breakpointForeground#F28B82
- debugIcon.pauseForeground#E6C15A
- debugIcon.startForeground#A3D9A5
- debugIcon.stepOverForeground#5EC8E5
- debugIcon.stopForeground#F28B82
- debugToolBar.background#242A30
- debugToolBar.border#2F3B44
- diffEditor.diagonalFill#2F3B44
- diffEditor.insertedLineBackground#A3D9A50D
- diffEditor.insertedTextBackground#A3D9A533
- diffEditor.removedLineBackground#F28B820D
- diffEditor.removedTextBackground#F28B8233
- editor.background#1A1F24
- editor.findMatchBackground#7BDCB566
- editor.findMatchHighlightBackground#7BDCB533
- editor.findRangeHighlightBackground#3A4A5566
- editor.foreground#E6EDF3
- editor.inactiveSelectionBackground#7BDCB522
- editor.lineHighlightBackground#232A31
- editor.lineHighlightBorder#2F3B44
- editor.selectionBackground#7BDCB544
- editor.wordHighlightBackground#3A4A5580
- editor.wordHighlightStrongBackground#7BDCB544
- editor.wordHighlightTextBackground#5EC8E533
- editorBracketHighlight.foreground1#7BDCB5
- editorBracketHighlight.foreground2#5EC8E5
- editorBracketHighlight.foreground3#C792EA
- editorBracketHighlight.foreground4#F28B82
- editorBracketHighlight.foreground5#E6C15A
- editorBracketHighlight.foreground6#89DDFF
- editorBracketMatch.background#2E3B42
- editorBracketMatch.border#7BDCB566
- editorBracketPairGuide.activeBackground1#7BDCB533
- editorBracketPairGuide.activeBackground2#7BDCB533
- editorCursor.foreground#9FEAD7
- editorError.border#F28B8244
- editorError.foreground#F28B82
- editorHint.foreground#C792EA
- editorHoverWidget.background#242A30
- editorHoverWidget.border#3A4A55
- editorHoverWidget.statusBarBackground#1F252A
- editorIndentGuide.activeBackground1#3A4A55
- editorIndentGuide.activeBackground2#3A4A55
- editorIndentGuide.background1#2F3A42
- editorIndentGuide.background2#2F3A42
- editorInfo.border#5EC8E544
- editorInfo.foreground#5EC8E5
- editorInlayHint.background#3A4A5566
- editorInlayHint.foreground#8A9AA6
- editorInlayHint.parameterForeground#A3D9A5
- editorInlayHint.typeForeground#5EC8E5
- editorLineNumber.activeForeground#7BDCB5
- editorLineNumber.foreground#5C6E7A
- editorOverviewRuler.errorForeground#F28B82
- editorOverviewRuler.infoForeground#5EC8E5
- editorOverviewRuler.warningForeground#E6C15A
- editorRuler.foreground#2F3B44
- editorSuggestWidget.background#242A30
- editorSuggestWidget.border#3A4A55
- editorSuggestWidget.highlightForeground#7BDCB5
- editorSuggestWidget.selectedBackground#7BDCB533
- editorUnnecessaryCode.opacity#00000070
- editorWarning.border#E6C15A44
- editorWarning.foreground#E6C15A
- editorWhitespace.foreground#3A4A5580
- editorWidget.background#242A30
- editorWidget.border#3A4A55
- gitDecoration.addedResourceForeground#A3D9A5
- gitDecoration.conflictingResourceForeground#F28B82
- gitDecoration.deletedResourceForeground#F28B82
- gitDecoration.ignoredResourceForeground#5C6E7A
- gitDecoration.modifiedResourceForeground#E6C15A
- gitDecoration.renamedResourceForeground#5EC8E5
- gitDecoration.submoduleResourceForeground#C792EA
- input.background#242A30
- input.border#3A4A55
- input.foreground#E6EDF3
- input.placeholderForeground#7A8A96
- list.activeSelectionBackground#7BDCB51A
- list.activeSelectionForeground#7BDCB5
- list.focusOutline#7BDCB566
- list.highlightForeground#7BDCB5
- list.hoverBackground#7BDCB50D
- merge.border#2F3B44
- merge.commonContentBackground#3A4A5566
- merge.currentContentBackground#A3D9A51A
- merge.currentHeaderBackground#A3D9A533
- merge.incomingContentBackground#5EC8E51A
- merge.incomingHeaderBackground#5EC8E533
- minimap.background#1A1F24
- minimap.findMatchHighlight#7BDCB566
- minimap.selectionHighlight#7BDCB533
- minimapGutter.addedBackground#A3D9A5
- minimapGutter.deletedBackground#F28B82
- minimapGutter.modifiedBackground#E6C15A
- notificationCenterHeader.background#1F252A
- notifications.background#242A30
- notifications.border#2F3B44
- notifications.foreground#E6EDF3
- notificationToast.border#2F3B44
- panel.background#1A1F24
- panel.border#232A31
- panelTitle.activeBorder#7BDCB5
- panelTitle.activeForeground#7BDCB5
- panelTitle.inactiveForeground#7A8A96
- scrollbarSlider.activeBackground#7BDCB544
- scrollbarSlider.background#7BDCB51A
- scrollbarSlider.hoverBackground#7BDCB533
- settings.checkboxBackground#242A30
- settings.checkboxBorder#3A4A55
- settings.dropdownBackground#242A30
- settings.dropdownBorder#3A4A55
- settings.headerForeground#7BDCB5
- settings.modifiedItemIndicator#7BDCB5
- sideBar.background#161B20
- sideBar.border#232A31
- sideBar.foreground#E6EDF3
- sideBarSectionHeader.background#1F252A
- sideBarSectionHeader.foreground#7BDCB5
- sideBarTitle.foreground#7BDCB5
- statusBar.background#22282E
- statusBar.border#232A31
- statusBar.debuggingBackground#2A3B4A
- statusBar.foreground#E6EDF3
- statusBar.noFolderBackground#12161B
- statusBarItem.activeBackground#7BDCB50D
- statusBarItem.hoverBackground#7BDCB51A
- tab.activeBackground#242A30
- tab.activeBorderTop#7BDCB566
- tab.activeForeground#7BDCB5
- tab.border#232A31
- tab.hoverBackground#7BDCB50D
- tab.hoverForeground#7BDCB5
- tab.inactiveBackground#1A1F24
- tab.inactiveForeground#7A8A96
- tab.unfocusedActiveBorderTop#2F3B44
- terminal.ansiBlack#161B20
- terminal.ansiBlue#5EC8E5
- terminal.ansiBrightBlack#7A8A96
- terminal.ansiBrightBlue#5EC8E5
- terminal.ansiBrightCyan#89DDFF
- terminal.ansiBrightGreen#A3D9A5
- terminal.ansiBrightMagenta#C792EA
- terminal.ansiBrightRed#F28B82
- terminal.ansiBrightWhite#FFFFFF
- terminal.ansiBrightYellow#E6C15A
- terminal.ansiCyan#89DDFF
- terminal.ansiGreen#A3D9A5
- terminal.ansiMagenta#C792EA
- terminal.ansiRed#F28B82
- terminal.ansiWhite#E6EDF3
- terminal.ansiYellow#E6C15A
- terminal.background#1A1F24
- terminal.foreground#E6EDF3
- terminal.selectionBackground#7BDCB522
- terminalCursor.foreground#9FEAD7
- testing.iconFailed#F28B82
- testing.iconPassed#A3D9A5
- testing.iconQueued#E6C15A
- testing.iconUnset#7A8A96
- testing.runAction#7BDCB5
- walkThrough.embeddedEditorBackground#1A1F24
- welcomePage.tileBackground#242A30
- welcomePage.tileHoverBackground#7BDCB50D
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #7A8792 | — |
| string.docstring, comment.block.documentation | #7A8792 | italic |
| keyword, storage, storage.type, keyword.control | #7BDCB5 | bold |
| keyword.control.async, keyword.control.await | #7BDCB5 | bold italic |
| keyword.operator, keyword.operator.logical, keyword.operator.comparison | #89DDFF | — |
| string, string.quoted, string.template | #A3D9A5 | — |
| constant.character.escape, string.escape | #F28B82 | — |
| string.regexp, keyword.control.anchor.regexp | #F28B82 | — |
| constant.numeric, constant.numeric.integer, constant.numeric.float | #C792EA | — |
| constant.language, constant.character, constant.language.boolean | #C792EA | bold |
| entity.name.function, support.function, meta.function-call | #5EC8E5 | — |
| variable.parameter, variable.parameter.function | #E6C15A | italic |
| variable, variable.other, variable.other.readwrite | #D6DEE6 | — |
| variable.language, variable.language.this, variable.language.self, variable.language.cls | #7BDCB5 | bold italic |
| entity.name.type, entity.name.class, support.class, storage.type.class | #E6C15A | bold |
| meta.function.decorator, entity.name.function.decorator, punctuation.definition.annotation | #C792EA | — |
| meta.type.annotation, support.type, storage.type.type | #5EC8E5 | italic |
| entity.name.tag, meta.tag | #F28B82 | — |
| entity.other.attribute-name, entity.other.attribute-name.html | #E6C15A | — |
| entity.name.tag.component, support.class.component | #5EC8E5 | bold |
| support.type.property-name, meta.property-name | #D6DEE6 | — |
| support.constant.property-value, constant.other.color | #E6C15A | — |
| markup.heading, markup.heading punctuation.definition.heading | #5EC8E5 | bold |
| markup.underline.link, string.other.link | #A3D9A5 | underline |
| support.type.property-name.json, meta.structure.dictionary.json support.type.property-name | #F28B82 | — |
| punctuation, punctuation.separator, punctuation.terminator | #7A8A96 | — |
| constant.language.null, constant.language.boolean.true, constant.language.boolean.false | #C792EA | bold |
| markup.inserted | #A3D9A5 | — |
| markup.deleted | #F28B82 | — |
| markup.changed | #E6C15A | — |