Relax Your Eyes Green
Publisher: shilohThemes in package: 1
A VSCode color theme that works to relieve eyestrain:)
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.background#FAFAFA
- activityBar.foreground#121417
- activityBarBadge.background#526FFF
- activityBarBadge.foreground#FFFFFF
- badge.background#526FFF
- badge.foreground#FFFFFF
- button.background#5871EF
- button.foreground#FFFFFF
- button.hoverBackground#6B83ED
- diffEditor.insertedTextBackground#00809B33
- dropdown.background#FFFFFF
- dropdown.border#DBDBDC
- editor.background#CAE6CA
- editor.findMatchHighlightBackground#526FFF33
- editor.foreground#383A42
- editor.lineHighlightBackground#383A420C
- editor.selectionBackground#E5E5E6
- editorCursor.foreground#526FFF
- editorGroupHeader.tabsBackground#EAEAEB
- editorHoverWidget.background#EAEAEB
- editorHoverWidget.border#DBDBDC
- editorIndentGuide.activeBackground1#626772
- editorIndentGuide.background1#383A4233
- editorInlayHint.background#ddeadd
- editorInlayHint.foreground#AFB2BB
- editorLineNumber.activeForeground#383A42
- editorLineNumber.foreground#9D9D9F
- editorRuler.foreground#383A4233
- editorSuggestWidget.background#EAEAEB
- editorSuggestWidget.border#DBDBDC
- editorSuggestWidget.selectedBackground#FFFFFF
- editorWhitespace.foreground#383A4233
- editorWidget.background#EAEAEB
- editorWidget.border#E5E5E6
- extensionButton.prominentBackground#3BBA54
- extensionButton.prominentHoverBackground#4CC263
- focusBorder#526FFF
- input.background#FFFFFF
- input.border#DBDBDC
- list.activeSelectionBackground#DBDBDC
- list.activeSelectionForeground#232324
- list.focusBackground#DBDBDC
- list.highlightForeground#121417
- list.hoverBackground#DBDBDC66
- list.inactiveSelectionBackground#DBDBDC
- list.inactiveSelectionForeground#232324
- notebook.cellEditorBackground#F5F5F5
- notification.background#333333
- peekView.border#526FFF
- peekViewEditor.background#FFFFFF
- peekViewResult.background#EAEAEB
- peekViewResult.selectionBackground#DBDBDC
- peekViewTitle.background#FFFFFF
- pickerGroup.border#526FFF
- scrollbarSlider.activeBackground#747D9180
- scrollbarSlider.background#4E566680
- scrollbarSlider.hoverBackground#5A637580
- sideBar.background#EAEAEB
- sideBarSectionHeader.background#FAFAFA
- statusBar.background#EAEAEB
- statusBar.debuggingForeground#FFFFFF
- statusBar.foreground#424243
- statusBar.noFolderBackground#EAEAEB
- statusBarItem.hoverBackground#DBDBDC
- tab.activeBackground#FAFAFA
- tab.activeForeground#121417
- tab.border#DBDBDC
- tab.inactiveBackground#EAEAEB
- titleBar.activeBackground#EAEAEB
- titleBar.activeForeground#424243
- titleBar.inactiveBackground#EAEAEB
- titleBar.inactiveForeground#424243
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, comment.line.double-slash punctuation.definition.comment, punctuation.definition.comment.json.comments | #424600 | |
| comment.block.js, comment.block.jsx, comment.block.jsx punctuation.definition.comment.js, comment.block.jsx punctuation.definition.comment.jsx, comment.block.ts, comment.block.tsx, comment.block.ts punctuation.definition.comment.ts, comment.block.tsx punctuation.definition.comment.tsx | #4E4E4E | |
| entity.name.type.instance.jsdoc, comment.block.documentation.js, punctuation.definition.block.tag.jsdoc, comment.block.documentation.js punctuation.definition.comment, comment.block.documentation.jsx, comment.block.documentation.jsx punctuation.definition.comment, comment.block.documentation.ts, comment.block.documentation.ts punctuation.definition.comment, comment.block.documentation.tsx, comment.block.documentation.tsx punctuation.definition.comment | #395DA1 | |
| entity.name.type, entity.other.inherited-class.ts | #3E7EFF | bold |
| keyword, meta.type.declaration.ts, meta.interface.ts, meta.enum.declaration.ts, storage.type.js, storage.type.jsx, storage.type.ts, storage.type.tsx, storage.type.function.js, storage.type.function.ts, storage.modifier.async.js, storage.modifier.async.ts, constant.language.boolean, support.function.misc.css, support.function.misc.less, support.function.misc.scss, constant.other.color.rgb-value.hex.css, constant.other.color.rgb-value.hex.less, constant.other.color.rgb-value.hex.scss, support.constant.color.w3c-standard-color-name.css, support.constant.color.w3c-standard-color-name.less, support.constant.color.w3c-standard-color-name.scss, support.type.primitive, constant.language.null.js, constant.language.undefined.js, constant.language.undefined.jsx, constant.language.null.ts, constant.language.undefined.ts, constant.language.undefined.tsx, storage.type.class, storage.modifier, variable.language.this, variable.language.super | #7F0055 | bold |
| keyword.other.unit | #333333 | |
| constant.numeric | #333333 | — |
| variable.parameter | #000000 | — |
| string | #000000 | bold |
| punctuation.definition | #000066 | |
| support.class.component | #7F0055 | bold |
| entity.name.tag | #7F0055 | bold |
| entity.other.attribute-name | #000066 | |
| entity.other.attribute-name.class, entity.other.attribute-name.id | #7f0055 | bold |
| meta.function-call.js, meta.function-call.jx, meta.function-call.ts, meta.function-call.tsx | #914C07 | italic |
| meta.definition.variable, meta.block.ts, meta.block.js variable.other.object.js, meta.block.jsx variable.other.object.jsx, meta.block.ts variable.other.object.ts, meta.block.tsx variable.other.object.tsx, meta.var.expr.ts variable.other.object.ts | #458383 | |
| meta.definition.function.js, meta.definition.method.js, meta.definition.function.jsx, meta.definition.method.jsx, meta.definition.function.ts, meta.definition.method.ts, meta.definition.function.tsx, meta.definition.method.tsx | #170591 | bold |
| meta.selector | #7F0055 | |
| meta.tag | #000066 | |
| meta.property-name.css, meta.property-name.scss, meta.property-name.less, meta.property-list.css, meta.property-list.scss, meta.property-list.less | #000066 | |
| meta.property-value.css, meta.property-value.less, meta.property-value.scss | #000000 | bold |
| support.type.property-name.css, support.type.property-name.less, support.type.property-name.scss | #000066 | — |
| source.directive.vue variable.other.readwrite.js, source.directive.vue variable.other.object.js, source.directive.vue variable.other.property.js, variable.other.constant.property.js, variable.other.property.js, variable.other.property.jsx, variable.other.property.ts, variable.other.property.tsx, variable.other.object.property.js, variable.other.object.property.jsx, variable.other.object.property.ts, variable.other.object.property.tsx | #524c00 | |
| source.ts punctuation.definition.block, source.js punctuation.definition.block, source.tsx punctuation.definition.block | #000066 | |
| source.ts punctuation.separator.comma, source.js punctuation.separator.comma, source.tsx punctuation.separator.comma | #000066 | |
| meta.brace.round.js, meta.array-binding-pattern-variable.js, meta.brace.square.js, meta.brace.round.ts, meta.array-binding-pattern-variable.ts, meta.brace.square.ts, meta.brace.round.tsx, meta.array-binding-pattern-variable.tsx, meta.brace.square.tsx | #000066 | — |
| variable.other.readwrite.alias.js, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.jsx, variable.other.readwrite.alias.tsx | #333333 | |
| meta.import.js, meta.import.jsx, meta.import.js variable.other.readwrite.alias.js, meta.import.jsx variable.other.readwrite.alias.jsx, meta.import.ts, meta.import.tsx, meta.import.ts variable.other.readwrite.alias.ts, meta.import.tsx variable.other.readwrite.alias.tsx | #660E7A | italic bold |
| meta.definition.property.js, meta.definition.property.ts, meta.definition.property.jsx, meta.definition.property.tsx | #524c00 | |
| variable.other.object.js, variable.other.object.ts | #660E7A | bold |
| variable.other.enummember.ts | #05314D | bold |
| meta.object-literal.key.js, meta.object-literal.key.jsx, meta.object-literal.key.ts, meta.object-literal.key.tsx | #524c00 | — |