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#3E8F800D
- activityBar.activeBorder#3E8F80
- activityBar.background#E7E3DA
- activityBar.border#E6E2D9
- activityBar.foreground#2A2E33
- activityBar.inactiveForeground#A8A39A
- badge.background#3E8F80
- badge.foreground#F7F4ED
- breadcrumb.activeSelectionForeground#3E8F80
- breadcrumb.focusForeground#3E8F80
- breadcrumb.foreground#A8A39A
- breadcrumbPicker.background#F0EDE6
- button.background#E6E2D9
- button.foreground#2A2E33
- button.hoverBackground#3E8F801A
- debugIcon.breakpointForeground#C95A4A
- debugIcon.pauseForeground#C48A00
- debugIcon.startForeground#5F9F73
- debugIcon.stepOverForeground#2F7FA1
- debugIcon.stopForeground#C95A4A
- debugToolBar.background#F0EDE6
- diffEditor.insertedLineBackground#5F9F730D
- diffEditor.insertedTextBackground#5F9F7333
- diffEditor.removedLineBackground#C95A4A0D
- diffEditor.removedTextBackground#C95A4A33
- editor.background#F7F4ED
- editor.findMatchBackground#3E8F8066
- editor.findMatchHighlightBackground#3E8F8033
- editor.foreground#2A2E33
- editor.inactiveSelectionBackground#3E8F8022
- editor.lineHighlightBackground#EDE9E0
- editor.lineHighlightBorder#D9D4C8
- editor.selectionBackground#3E8F8044
- editor.wordHighlightBackground#D9D4C880
- editor.wordHighlightStrongBackground#3E8F8044
- editorBracketHighlight.foreground1#3E8F80
- editorBracketHighlight.foreground2#2F7FA1
- editorBracketHighlight.foreground3#9A6EDB
- editorBracketHighlight.foreground4#C95A4A
- editorBracketHighlight.foreground5#C48A00
- editorBracketMatch.background#E6E2D9
- editorBracketMatch.border#3E8F8066
- editorCursor.foreground#3E8F80
- editorError.border#C95A4A44
- editorError.foreground#C95A4A
- editorHoverWidget.background#F0EDE6
- editorHoverWidget.border#D9D4C8
- editorIndentGuide.activeBackground1#C4BEB2
- editorIndentGuide.activeBackground2#C4BEB2
- editorIndentGuide.background1#D9D4C8
- editorIndentGuide.background2#D9D4C8
- editorInfo.border#2F7FA144
- editorInfo.foreground#2F7FA1
- editorInlayHint.background#E6E2D966
- editorInlayHint.foreground#8A867C
- editorInlayHint.parameterForeground#5F9F73
- editorInlayHint.typeForeground#2F7FA1
- editorLineNumber.activeForeground#3E8F80
- editorLineNumber.foreground#A8A39A
- editorRuler.foreground#D9D4C8
- editorSuggestWidget.background#F0EDE6
- editorSuggestWidget.border#D9D4C8
- editorSuggestWidget.highlightForeground#3E8F80
- editorSuggestWidget.selectedBackground#3E8F8033
- editorWarning.border#C48A0044
- editorWarning.foreground#C48A00
- editorWhitespace.foreground#D9D4C880
- gitDecoration.addedResourceForeground#5F9F73
- gitDecoration.conflictingResourceForeground#C95A4A
- gitDecoration.deletedResourceForeground#C95A4A
- gitDecoration.ignoredResourceForeground#A8A39A
- gitDecoration.modifiedResourceForeground#C48A00
- input.background#F0EDE6
- input.border#D9D4C8
- input.foreground#2A2E33
- input.placeholderForeground#A8A39A
- list.activeSelectionBackground#3E8F801A
- list.activeSelectionForeground#3E8F80
- list.highlightForeground#3E8F80
- list.hoverBackground#3E8F800D
- merge.commonContentBackground#D9D4C866
- merge.currentContentBackground#5F9F731A
- merge.currentHeaderBackground#5F9F7333
- merge.incomingContentBackground#2F7FA11A
- merge.incomingHeaderBackground#2F7FA133
- minimap.background#F7F4ED
- minimap.findMatchHighlight#3E8F8066
- minimap.selectionHighlight#3E8F8033
- notifications.background#F0EDE6
- notifications.border#D9D4C8
- notifications.foreground#2A2E33
- panel.background#F7F4ED
- panel.border#E6E2D9
- panelTitle.activeBorder#3E8F80
- panelTitle.activeForeground#3E8F80
- panelTitle.inactiveForeground#A8A39A
- scrollbarSlider.activeBackground#3E8F8044
- scrollbarSlider.background#3E8F801A
- scrollbarSlider.hoverBackground#3E8F8033
- settings.checkboxBackground#F0EDE6
- settings.checkboxBorder#D9D4C8
- settings.dropdownBackground#F0EDE6
- settings.dropdownBorder#D9D4C8
- settings.headerForeground#3E8F80
- settings.modifiedItemIndicator#3E8F80
- sideBar.background#F1EEE6
- sideBar.border#E6E2D9
- sideBar.foreground#2A2E33
- sideBarSectionHeader.background#EBE7DE
- sideBarSectionHeader.foreground#3E8F80
- statusBar.background#ECE8DF
- statusBar.border#E6E2D9
- statusBar.foreground#2A2E33
- statusBarItem.hoverBackground#3E8F801A
- tab.activeBackground#F0EDE6
- tab.activeBorderTop#3E8F8066
- tab.activeForeground#3E8F80
- tab.border#E6E2D9
- tab.hoverBackground#3E8F800D
- tab.hoverForeground#3E8F80
- tab.inactiveBackground#F7F4ED
- tab.inactiveForeground#A8A39A
- terminal.ansiBlack#E7E3DA
- terminal.ansiBlue#2F7FA1
- terminal.ansiBrightBlack#A8A39A
- terminal.ansiBrightBlue#2F7FA1
- terminal.ansiBrightCyan#2D9C8C
- terminal.ansiBrightGreen#5F9F73
- terminal.ansiBrightMagenta#9A6EDB
- terminal.ansiBrightRed#C95A4A
- terminal.ansiBrightWhite#1A1C1F
- terminal.ansiBrightYellow#C48A00
- terminal.ansiCyan#2D9C8C
- terminal.ansiGreen#5F9F73
- terminal.ansiMagenta#9A6EDB
- terminal.ansiRed#C95A4A
- terminal.ansiWhite#2A2E33
- terminal.ansiYellow#C48A00
- terminal.background#F7F4ED
- terminal.foreground#2A2E33
- terminal.selectionBackground#3E8F8022
- terminalCursor.foreground#3E8F80
- testing.iconFailed#C95A4A
- testing.iconPassed#5F9F73
- testing.iconQueued#C48A00
- walkThrough.embeddedEditorBackground#F7F4ED
- welcomePage.tileBackground#F0EDE6
- welcomePage.tileHoverBackground#3E8F800D
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #7A766F | — |
| string.docstring, comment.block.documentation | #7A766F | italic |
| keyword, storage, storage.type, keyword.control | #3E8F80 | bold |
| keyword.control.async, keyword.control.await | #3E8F80 | bold italic |
| keyword.operator, keyword.operator.logical | #2D9C8C | — |
| string, string.quoted, string.template | #5F9F73 | — |
| constant.character.escape, string.escape | #C95A4A | — |
| string.regexp | #C95A4A | — |
| constant.numeric, constant.numeric.integer | #9A6EDB | — |
| constant.language, constant.language.boolean | #9A6EDB | bold |
| entity.name.function, support.function, meta.function-call | #2F7FA1 | — |
| variable.parameter, variable.parameter.function | #C48A00 | italic |
| variable, variable.other | #2A2E33 | — |
| variable.language, variable.language.this, variable.language.self | #3E8F80 | bold italic |
| entity.name.type, entity.name.class, support.class, storage.type.class | #C48A00 | bold |
| meta.function.decorator, entity.name.function.decorator | #9A6EDB | — |
| meta.type.annotation, support.type, storage.type.type | #2F7FA1 | italic |
| entity.name.tag, meta.tag | #C95A4A | — |
| entity.other.attribute-name | #C48A00 | — |
| entity.name.tag.component, support.class.component | #2F7FA1 | bold |
| support.type.property-name, meta.property-name | #2A2E33 | — |
| support.constant.property-value, constant.other.color | #C48A00 | — |
| markup.heading | #2F7FA1 | bold |
| markup.underline.link, string.other.link | #5F9F73 | underline |
| support.type.property-name.json | #C95A4A | — |
| punctuation, punctuation.separator | #A8A39A | — |
| constant.language.null, constant.language.boolean.true, constant.language.boolean.false | #9A6EDB | bold |
| markup.inserted | #5F9F73 | — |
| markup.deleted | #C95A4A | — |