Visual Care Auto Theme
Publisher: Sander DiazThemes in package: 2
A dual Dark/Light theme designed for visual comfort and readability during long coding sessions. Soft, low-glare backgrounds and balanced, accessible accents.
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.activeBorder#4078F2
- activityBar.background#F3F3F1
- activityBar.border#E5E5E3
- activityBar.foreground#383A42
- activityBar.inactiveForeground#A0A1A7
- activityBarBadge.background#4078F2
- activityBarBadge.foreground#F9F9F7
- badge.background#4078F2
- badge.foreground#F9F9F7
- breadcrumb.activeSelectionForeground#4078F2
- breadcrumb.background#F9F9F7
- breadcrumb.focusForeground#383A42
- breadcrumb.foreground#82848C
- breadcrumbPicker.background#F3F3F1
- button.background#4078F2
- button.foreground#F9F9F7
- button.hoverBackground#356AE0
- button.secondaryBackground#E5E5E3
- button.secondaryForeground#383A42
- button.secondaryHoverBackground#DCDCD8
- charts.blue#4078F2
- charts.foreground#383A42
- charts.green#50A14F
- charts.orange#C25600
- charts.purple#A626A4
- charts.red#D33449
- charts.yellow#C18401
- checkbox.background#FDFDFC
- checkbox.border#DCDCD8
- checkbox.foreground#383A42
- commandCenter.background#F3F3F1
- commandCenter.border#DCDCD8
- commandCenter.foreground#54565E
- debugConsole.errorForeground#D33449
- debugConsole.infoForeground#4078F2
- debugConsole.sourceForeground#696C77
- debugConsole.warningForeground#C18401
- debugConsoleInputIcon.foreground#50A14F
- debugIcon.breakpointDisabledForeground#A0A1A7
- debugIcon.breakpointForeground#D33449
- debugToolBar.background#F3F3F1
- debugToolBar.border#DCDCD8
- descriptionForeground#696C77
- diffEditor.border#DCDCD8
- diffEditor.insertedLineBackground#50A14F1A
- diffEditor.insertedTextBackground#50A14F26
- diffEditor.removedLineBackground#D334491A
- diffEditor.removedTextBackground#D3344926
- diffEditorGutter.insertedLineBackground#50A14F26
- diffEditorGutter.removedLineBackground#D3344926
- dropdown.background#FDFDFC
- dropdown.border#DCDCD8
- dropdown.foreground#383A42
- dropdown.listBackground#F3F3F1
- editor.background#F9F9F7
- editor.findMatchBackground#E5A50066
- editor.findMatchHighlightBackground#E5A50033
- editor.findRangeHighlightBackground#E0E0DC66
- editor.foreground#383A42
- editor.hoverHighlightBackground#0184BC1A
- editor.inactiveSelectionBackground#E0E0DC00
- editor.lineHighlightBackground#EAEAE6
- editor.lineHighlightBorder#00000000
- editor.rangeHighlightBackground#EAEAE680
- editor.selectionBackground#D7E2F5
- editor.selectionHighlightBackground#D7E2F566
- editor.wordHighlightBackground#0184BC22
- editor.wordHighlightStrongBackground#50A14F26
- editorBracketHighlight.foreground1#4078F2
- editorBracketHighlight.foreground2#50A14F
- editorBracketHighlight.foreground3#A626A4
- editorBracketHighlight.foreground4#B07700
- editorBracketHighlight.foreground5#0184BC
- editorBracketHighlight.foreground6#C25600
- editorBracketHighlight.unexpectedBracket.foreground#D33449
- editorBracketMatch.background#D7E2F5
- editorBracketMatch.border#4078F280
- editorCodeLens.foreground#A0A1A7
- editorCursor.foreground#4078F2
- editorError.foreground#D33449
- editorGroup.border#E5E5E3
- editorGroupHeader.noTabsBackground#ECECEA
- editorGroupHeader.tabsBackground#ECECEA
- editorGroupHeader.tabsBorder#E5E5E3
- editorGutter.addedBackground#50A14F
- editorGutter.background#F9F9F7
- editorGutter.deletedBackground#D33449
- editorGutter.foldingControlForeground#696C77
- editorGutter.modifiedBackground#C18401
- editorHint.foreground#0184BC
- editorHoverWidget.background#F3F3F1
- editorHoverWidget.border#DCDCD8
- editorIndentGuide.activeBackground1#C2C2BE
- editorIndentGuide.background1#E5E5E3
- editorInfo.foreground#4078F2
- editorLightBulb.foreground#B07700
- editorLightBulbAutoFix.foreground#4078F2
- editorLineNumber.activeForeground#696C77
- editorLineNumber.foreground#B4B5BA
- editorLink.activeForeground#4078F2
- editorOverviewRuler.addedForeground#50A14F99
- editorOverviewRuler.border#E5E5E3
- editorOverviewRuler.bracketMatchForeground#C2C2BE
- editorOverviewRuler.deletedForeground#D3344999
- editorOverviewRuler.errorForeground#D33449
- editorOverviewRuler.findMatchForeground#E5A50099
- editorOverviewRuler.infoForeground#4078F2
- editorOverviewRuler.modifiedForeground#C1840199
- editorOverviewRuler.warningForeground#C18401
- editorRuler.foreground#E5E5E3
- editorSuggestWidget.background#F3F3F1
- editorSuggestWidget.border#DCDCD8
- editorSuggestWidget.focusHighlightForeground#4078F2
- editorSuggestWidget.foreground#383A42
- editorSuggestWidget.highlightForeground#4078F2
- editorSuggestWidget.selectedBackground#E5E5E3
- editorUnnecessaryCode.opacity#00000066
- editorWarning.foreground#C18401
- editorWhitespace.foreground#D7D7D3
- editorWidget.background#F3F3F1
- editorWidget.border#DCDCD8
- editorWidget.foreground#383A42
- errorForeground#D33449
- focusBorder#4078F280
- foreground#383A42
- gitDecoration.addedResourceForeground#50A14F
- gitDecoration.conflictingResourceForeground#A626A4
- gitDecoration.deletedResourceForeground#D33449
- gitDecoration.ignoredResourceForeground#A0A1A7
- gitDecoration.modifiedResourceForeground#B07700
- gitDecoration.stageDeletedResourceForeground#D33449
- gitDecoration.stageModifiedResourceForeground#C25600
- gitDecoration.untrackedResourceForeground#0184BC
- icon.foreground#696C77
- input.background#FDFDFC
- input.border#DCDCD8
- input.foreground#383A42
- input.placeholderForeground#A0A1A7
- inputOption.activeBackground#4078F226
- inputOption.activeBorder#4078F2
- inputOption.activeForeground#2B2D33
- inputValidation.errorBackground#FBEAEA
- inputValidation.errorBorder#D33449
- inputValidation.infoBackground#E8F0FD
- inputValidation.infoBorder#4078F2
- inputValidation.warningBackground#FCF3E0
- inputValidation.warningBorder#C18401
- keybindingLabel.background#E5E5E3
- keybindingLabel.border#DCDCD8
- keybindingLabel.bottomBorder#C2C2BE
- keybindingLabel.foreground#383A42
- list.activeSelectionBackground#DCE3EE
- list.activeSelectionForeground#2B2D33
- list.errorForeground#D33449
- list.focusBackground#DCE3EE
- list.focusForeground#2B2D33
- list.highlightForeground#4078F2
- list.hoverBackground#E9E9E6
- list.hoverForeground#2B2D33
- list.inactiveSelectionBackground#E5E5E3
- list.inactiveSelectionForeground#383A42
- list.warningForeground#C18401
- menu.background#F3F3F1
- menu.border#DCDCD8
- menu.foreground#383A42
- menu.selectionBackground#DCE3EE
- menu.selectionForeground#2B2D33
- menu.separatorBackground#DCDCD8
- menubar.selectionBackground#E5E5E3
- menubar.selectionForeground#2B2D33
- merge.commonContentBackground#FBF7EC00
- merge.commonHeaderBackground#FCF3E000
- merge.currentContentBackground#EAF2F900
- merge.currentHeaderBackground#D2E4F000
- merge.incomingContentBackground#EEF6EA00
- merge.incomingHeaderBackground#D9EDD200
- mergeEditor.change.background#50A14F1A
- mergeEditor.conflict.unhandledFocused.border#C18401
- mergeEditor.conflict.unhandledUnfocused.border#C1840166
- minimap.background#F9F9F7
- minimap.errorHighlight#D33449CC
- minimap.findMatchHighlight#E5A50099
- minimap.selectionHighlight#D7E2F599
- minimap.warningHighlight#C18401CC
- minimapGutter.addedBackground#50A14F
- minimapGutter.deletedBackground#D33449
- minimapGutter.modifiedBackground#C18401
- notificationCenter.border#DCDCD8
- notificationCenterHeader.background#ECECEA
- notificationCenterHeader.foreground#383A42
- notificationLink.foreground#4078F2
- notifications.background#F3F3F1
- notifications.border#DCDCD8
- notifications.foreground#383A42
- notificationsErrorIcon.foreground#D33449
- notificationsInfoIcon.foreground#4078F2
- notificationsWarningIcon.foreground#C18401
- panel.background#F3F3F1
- panel.border#E5E5E3
- panelInput.border#DCDCD8
- panelTitle.activeBorder#4078F2
- panelTitle.activeForeground#2B2D33
- panelTitle.inactiveForeground#82848C
- peekView.border#4078F280
- peekViewEditor.background#F3F3F1
- peekViewEditor.matchHighlightBackground#E5A5004D
- peekViewResult.background#ECECEA
- peekViewResult.fileForeground#383A42
- peekViewResult.lineForeground#696C77
- peekViewResult.matchHighlightBackground#E5A5004D
- peekViewResult.selectionBackground#E0E0DC
- peekViewTitle.background#ECECEA
- peekViewTitleDescription.foreground#696C77
- peekViewTitleLabel.foreground#383A42
- pickerGroup.border#DCDCD8
- pickerGroup.foreground#4078F2
- problemsErrorIcon.foreground#D33449
- problemsInfoIcon.foreground#4078F2
- problemsWarningIcon.foreground#C18401
- quickInput.background#F3F3F1
- quickInput.foreground#383A42
- quickInputList.focusBackground#DCE3EE
- quickInputList.focusForeground#2B2D33
- sash.hoverBorder#4078F2
- scrollbar.shadow#0000001A
- scrollbarSlider.activeBackground#B4B5BAB0
- scrollbarSlider.background#C2C2BE66
- scrollbarSlider.hoverBackground#C2C2BE99
- selection.background#4078F233
- settings.checkboxBackground#FDFDFC
- settings.dropdownBackground#FDFDFC
- settings.dropdownBorder#DCDCD8
- settings.headerForeground#2B2D33
- settings.modifiedItemIndicator#4078F2
- settings.numberInputBackground#FDFDFC
- settings.textInputBackground#FDFDFC
- sideBar.background#F3F3F1
- sideBar.border#E5E5E3
- sideBar.foreground#54565E
- sideBarSectionHeader.background#F3F3F1
- sideBarSectionHeader.border#E5E5E3
- sideBarSectionHeader.foreground#54565E
- sideBarTitle.foreground#696C77
- statusBar.background#ECECEA
- statusBar.border#E5E5E3
- statusBar.debuggingBackground#C25600
- statusBar.debuggingForeground#F9F9F7
- statusBar.foreground#54565E
- statusBar.noFolderBackground#ECECEA
- statusBarItem.activeBackground#C2C2BE80
- statusBarItem.errorBackground#D33449
- statusBarItem.errorForeground#F9F9F7
- statusBarItem.hoverBackground#DCDCD8
- statusBarItem.prominentBackground#DCDCD8
- statusBarItem.remoteBackground#4078F2
- statusBarItem.remoteForeground#F9F9F7
- statusBarItem.warningBackground#C18401
- statusBarItem.warningForeground#F9F9F7
- symbolIcon.classForeground#B07700
- symbolIcon.constantForeground#C25600
- symbolIcon.enumeratorForeground#B07700
- symbolIcon.functionForeground#4078F2
- symbolIcon.interfaceForeground#0184BC
- symbolIcon.keywordForeground#A626A4
- symbolIcon.methodForeground#4078F2
- symbolIcon.stringForeground#50A14F
- symbolIcon.variableForeground#D33449
- tab.activeBackground#F9F9F7
- tab.activeBorder#F9F9F7
- tab.activeBorderTop#4078F2
- tab.activeForeground#2B2D33
- tab.activeModifiedBorder#C18401
- tab.border#E5E5E3
- tab.hoverBackground#F9F9F7
- tab.hoverForeground#2B2D33
- tab.inactiveBackground#ECECEA
- tab.inactiveForeground#82848C
- tab.inactiveModifiedBorder#C1840180
- tab.lastPinnedBorder#DCDCD8
- tab.unfocusedActiveForeground#696C77
- tab.unfocusedInactiveForeground#A0A1A7
- terminal.ansiBlack#383A42
- terminal.ansiBlue#4078F2
- terminal.ansiBrightBlack#696C77
- terminal.ansiBrightBlue#4078F2
- terminal.ansiBrightCyan#0184BC
- terminal.ansiBrightGreen#50A14F
- terminal.ansiBrightMagenta#A626A4
- terminal.ansiBrightRed#D33449
- terminal.ansiBrightWhite#2B2D33
- terminal.ansiBrightYellow#C25600
- terminal.ansiCyan#0184BC
- terminal.ansiGreen#50A14F
- terminal.ansiMagenta#A626A4
- terminal.ansiRed#D33449
- terminal.ansiWhite#A0A1A7
- terminal.ansiYellow#C18401
- terminal.background#F9F9F7
- terminal.border#E5E5E3
- terminal.foreground#383A42
- terminal.selectionBackground#D7E2F5
- terminalCursor.foreground#4078F2
- textBlockQuote.background#F3F3F1
- textBlockQuote.border#DCDCD8
- textCodeBlock.background#F3F3F1
- textLink.activeForeground#356AE0
- textLink.foreground#4078F2
- textPreformat.foreground#50A14F
- titleBar.activeBackground#ECECEA
- titleBar.activeForeground#54565E
- titleBar.border#E5E5E3
- titleBar.inactiveBackground#ECECEA
- titleBar.inactiveForeground#A0A1A7
- tree.indentGuidesStroke#C2C2BE
- widget.border#DCDCD8
- widget.shadow#0000001A
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment, string.comment | #8A8C94 | italic |
| keyword.codetag.notation, comment.line.todo | #C25600 | bold |
| keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.from | #A626A4 | — |
| keyword, keyword.other, storage, storage.type, storage.modifier, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete | #D33449 | — |
| keyword.operator, punctuation.separator, punctuation.terminator, punctuation.accessor, meta.brace, punctuation.definition.parameters, punctuation.section | #54565E | — |
| entity.name.function, meta.function-call, meta.function-call.generic, support.function.go, variable.function | #2C66D9 | — |
| support.function, support.function.builtin | #0184BC | — |
| variable.parameter, meta.parameter, variable.parameter.function-call | #C25600 | italic |
| string, string.quoted, punctuation.definition.string, string.template, string.unquoted | #327A31 | — |
| punctuation.definition.template-expression, punctuation.section.embedded, meta.template.expression, meta.embedded.line | #D33449 | — |
| constant.character.escape, constant.character.escape.line-continuation | #0184BC | — |
| string.regexp, constant.other.character-class.regexp | #0184BC | — |
| constant.numeric, constant.numeric.integer, constant.numeric.float | #C25600 | — |
| constant.language.boolean, constant.language.null, constant.language.undefined, constant.language.nan, constant.language.infinity | #C25600 | — |
| constant.language, support.constant, variable.language.this, variable.language.self | #0184BC | — |
| variable.other.constant, variable.other.enummember, constant.other | #C25600 | — |
| variable, variable.other.readwrite, meta.definition.variable | #383A42 | — |
| variable.other.property, variable.other.object.property, meta.object-literal.key | #D33449 | — |
| entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, entity.other.inherited-class, support.type, support.class, support.type.primitive, storage.type.primitive, storage.type.built-in, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go | #B07700 | — |
| meta.decorator, entity.name.function.decorator, punctuation.decorator, meta.attribute, storage.type.annotation, meta.annotation, support.type.annotation | #0184BC | italic |
| entity.name.tag, punctuation.definition.tag, meta.tag | #D33449 | — |
| entity.other.attribute-name, entity.other.attribute-name.html | #C25600 | italic |
| constant.character.entity.html, punctuation.definition.entity.html | #0184BC | — |
| entity.other.attribute-name.class.css, entity.other.attribute-name.class | #B07700 | — |
| entity.other.attribute-name.id.css, entity.other.attribute-name.id | #4078F2 | — |
| entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css | #0184BC | — |
| support.type.property-name.css, support.type.property-name, meta.property-name.css | #4078F2 | — |
| support.constant.property-value.css, keyword.other.unit, constant.numeric.css, support.constant.font-name | #C25600 | — |
| keyword.control.at-rule, support.type.vendored.property-name.css | #A626A4 | — |
| support.type.property-name.json, string.json.key | #D33449 | — |
| entity.name.tag.yaml | #3D7E3F | — |