The Way I See It
Publisher: amedveThemes in package: 1
ark theme with colorful semantics to reduce cognitive load when reading a code.
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#222731
- activityBar.border#282e38
- activityBar.foreground#eeffff
- activityBarBadge.background#3d4b68
- activityBarBadge.foreground#f0f0f0
- badge.background#3d4b68
- badge.foreground#ffffff
- breadcrumb.activeSelectionForeground#eeffff
- breadcrumb.focusForeground#ADCDF1
- breadcrumb.foreground#9ea1bb
- breadcrumbPicker.background#2a3241
- button.background#3d4b68cc
- button.foreground#ffffffcc
- button.hoverBackground#4b566b
- contrastBorder#282e38
- debugExceptionWidget.background#2a3241
- debugExceptionWidget.border#444d5f
- debugToolBar.background#2a3241
- diffEditor.insertedTextBackground#6db77718
- diffEditor.removedTextBackground#ef5d501e
- dropdown.background#2a3241
- dropdown.border#444d5f
- dropdown.foreground#ffffffcc
- editor.background#232933
- editor.findMatchBackground#444d5f5a
- editor.findMatchHighlightBackground#2e3248
- editor.foreground#ADCDF1
- editor.hoverHighlightBackground#444d5f5a
- editor.inactiveSelectionBackground#444d5f5a
- editor.lineHighlightBackground#00000033
- editor.rangeHighlightBackground#444d5f5a
- editor.selectionBackground#3c8fd32c
- editor.selectionHighlightBackground#81b8ff1a
- editor.selectionHighlightBorder#6cacff44
- editor.wordHighlightBackground#81b8ff1a
- editor.wordHighlightBorder#6cacff44
- editor.wordHighlightStrongBackground#2b313d
- editorBracketMatch.border#7888a3
- editorCodeLens.foreground#ffca28
- editorCursor.foreground#9ab2df
- editorError.foreground#ef5d50
- editorGroup.border#2e3245
- editorGroup.dropBackground#444d5f73
- editorGroupHeader.noTabsBackground#32374c
- editorGroupHeader.tabsBackground#222731
- editorGroupHeader.tabsBorder#2c3041
- editorGutter.addedBackground#93cc65d5
- editorGutter.deletedBackground#ef5d50
- editorGutter.modifiedBackground#e2b93d
- editorHoverWidget.background#2a3241
- editorHoverWidget.border#444d5f
- editorIndentGuide.background#2b313d
- editorLineNumber.activeForeground#a4b3cf
- editorLineNumber.foreground#444d5f
- editorMarkerNavigation.background#31364a
- editorMarkerNavigationError.background#ef5d50
- editorMarkerNavigationWarning.background#ffca28
- editorOverviewRuler.commonContentForeground#444d5f
- editorOverviewRuler.currentContentForeground#444d5f
- editorOverviewRuler.incomingContentForeground#444d5f
- editorSuggestWidget.background#292f3d
- editorSuggestWidget.border#1e232c
- editorSuggestWidget.foreground#cad3e4
- editorSuggestWidget.highlightForeground#ffffff
- editorSuggestWidget.selectedBackground#444d5f
- editorWarning.foreground#ffca28
- editorWidget.background#2d3546
- errorForeground#ef5d50
- extensionButton.prominentBackground#3d4b68cc
- extensionButton.prominentForeground#ffffffcc
- extensionButton.prominentHoverBackground#4b566b
- focusBorder#7888a3
- foreground#ffffffde
- gitDecoration.conflictingResourceForeground#ffeb95cc
- gitDecoration.deletedResourceForeground#ef5d5090
- gitDecoration.ignoredResourceForeground#69709890
- gitDecoration.modifiedResourceForeground#e2c08de6
- gitDecoration.untrackedResourceForeground#a9c77d
- input.background#272c35
- input.border#3f4757
- input.foreground#ffffffcc
- input.placeholderForeground#ffffff91
- inputOption.activeBorder#ffffffcc
- inputValidation.errorBackground#ef5d50f2
- inputValidation.errorBorder#ef5d50
- inputValidation.infoBackground#64b5f6f2
- inputValidation.infoBorder#64b5f6
- inputValidation.warningBackground#ffca28f2
- inputValidation.warningBorder#ffca28
- list.activeSelectionBackground#3c4352
- list.activeSelectionForeground#ffffff
- list.dropBackground#2e3245
- list.focusBackground#0000003b
- list.focusForeground#ffffff
- list.highlightForeground#ffffff
- list.hoverBackground#0000003b
- list.hoverForeground#ffffff
- list.inactiveSelectionBackground#a1b0d123
- list.inactiveSelectionForeground#a1b0d1
- merge.currentHeaderBackground#444d5f5a
- merge.incomingHeaderBackground#444d5f5a
- notificationLink.foreground#80cbc4
- notifications.background#2a3241
- notifications.foreground#ffffffcc
- panel.background#222731
- panel.border#282e38
- panelTitle.activeBorder#444d5f
- panelTitle.activeForeground#eeffff
- panelTitle.inactiveForeground#ADCDF180
- peekView.border#444d5f
- peekViewEditor.background#181e25
- peekViewEditor.matchHighlightBackground#444d5f5a
- peekViewResult.background#181e25
- peekViewResult.fileForeground#eeffffb9
- peekViewResult.lineForeground#eeffffb9
- peekViewResult.matchHighlightBackground#444d5f5a
- peekViewResult.selectionBackground#2e3250
- peekViewResult.selectionForeground#eeffff
- peekViewTitle.background#2a3241
- peekViewTitleDescription.foreground#eeffff7c
- peekViewTitleLabel.foreground#eeffffdc
- pickerGroup.border#2e3245
- pickerGroup.foreground#aad6ff
- scrollbar.shadow#2a324100
- scrollbarSlider.activeBackground#444d5fea
- scrollbarSlider.background#444d5f7a
- scrollbarSlider.hoverBackground#444d5fea
- selection.background#576a743b
- sideBar.background#222731
- sideBar.border#282e38
- sideBar.foreground#b7bad6
- sideBarSectionHeader.background#222731
- sideBarSectionHeader.foreground#eeffff
- sideBarTitle.foreground#eeffff
- statusBar.background#222731
- statusBar.border#222731
- statusBar.debuggingBackground#202431
- statusBar.debuggingBorder#1f2330
- statusBar.foreground#919cb1
- statusBar.noFolderBackground#2c323f
- statusBar.noFolderBorder#2c323f
- statusBarItem.activeBackground#202431
- statusBarItem.hoverBackground#202431
- statusBarItem.prominentBackground#202431
- statusBarItem.prominentHoverBackground#202431
- statusBarItem.warningBackground#b1880065
- statusBarItem.warningForeground#ffffffe1
- tab.activeBackground#2f3642
- tab.activeBorder#95b3f0
- tab.activeForeground#eefbff
- tab.border#282e38
- tab.inactiveBackground#1e232a
- tab.inactiveForeground#a1b0d1
- tab.unfocusedActiveBorder#444d5f
- terminal.ansiBlack#2e353b
- terminal.ansiBlue#82aaff
- terminal.ansiBrightBlack#465464
- terminal.ansiBrightBlue#6c99fa
- terminal.ansiBrightCyan#89ddff
- terminal.ansiBrightGreen#cbeb9d
- terminal.ansiBrightMagenta#c070f5
- terminal.ansiBrightRed#ff6d60
- terminal.ansiBrightWhite#ffffffef
- terminal.ansiBrightYellow#ffcb6b
- terminal.ansiCyan#5cc2cf
- terminal.ansiGreen#66be72
- terminal.ansiMagenta#c792ea
- terminal.ansiRed#e9594c
- terminal.ansiWhite#ffffffe3
- terminal.ansiYellow#ffcb6b
- titleBar.activeBackground#222731
- titleBar.activeForeground#eeefff
- titleBar.border#2c3041
- titleBar.inactiveBackground#30364c
- walkThrough.embeddedEditorBackground#212833
- widget.shadow#212833
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment | #6b7995 | italic |
| string | #cbeb9d | — |
| string.quoted | #cbeb9d | — |
| string.unquoted | #ADCDF1 | — |
| support.constant.math | #FFCB6B | — |
| constant.numeric, constant.character.numeric | #F78C6C | — |
| constant.language, punctuation.definition.constant, variable.other.constant | #FFA58A | — |
| constant.character, constant.other | #82AAFF | — |
| constant.character.escape | #F78C6C | — |
| string.regexp, string.regexp keyword.other | #80CBC4 | — |
| meta.function punctuation.separator.comma | #EEFFFF | — |
| variable | — | — |
| punctuation.accessor, keyword | #C792EA | — |
| storage, storage.type, meta.var.expr storage.type, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx, meta.class meta.method.declaration meta.var.expr storage.type.js | #C792EA | — |
| entity.name.class, meta.class | #f3c87a | — |
| variable.parameter | #ff8297 | italic |
| punctuation.definition.tag, meta.tag | #89DDFF | — |
| entity.name.tag support.class.component, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html | #FF5572 | — |
| entity.other.attribute-name | #FFCB6B | — |
| entity.name.tag.custom | #FFCB6B | — |
| support.function, support.constant | #82AAFF | — |
| support.constant.meta.property-value | #89DDFF | — |
| support.type, support.class | #FFCB6B | — |
| support.variable.dom | #FFCB6B | — |
| invalid | #FFFFFF | — |
| invalid.deprecated | #FFFFFF | — |
| keyword.operator | #89DDFF | — |
| keyword.operator.relational | #C792EA | — |
| keyword.operator.assignment | #C792EA | — |
| object | #CDEBF7 | — |
| meta.brace | #cfd7e6 | — |
| meta.delimiter.period | #C792EA | — |
| punctuation.definition.string | #D9F5DD | — |
| object.comma | #FFFFFF | — |
| variable.parameter.function | #89DDFF | — |
| support.type.vendored.property-name, support.constant.vendored.property-value, support.type.property-name, meta.property-list entity.name.tag | #80CBC4 | — |
| meta.property-list entity.name.tag.reference | #FF5572 | — |
| constant.other.color.rgb-value punctuation.definition.constant | #F78C6C | — |
| constant.other.color | #FFEB95 | — |
| keyword.other.unit | #FFEB95 | — |
| meta.selector | #C792EA | — |
| entity.other.attribute-name.id | #FAD430 | — |
| meta.property-name | #80CBC4 | — |
| entity.name.tag.doctype, meta.tag.sgml.doctype | #C792EA | italic |
| punctuation.definition.parameters | #D9F5DD | — |
| keyword.control.operator | #89DDFF | — |
| keyword.operator.logical | #C792EA | — |
| variable.instance, variable.other.instance, variable.reaedwrite.instance, variable.other.readwrite.instance | #e6587b | — |
| variable.other.property, variable.other.object.property | #f8f7c5 | — |
| entity.name.function | #82AAFF | — |
| keyword.operator.comparison | #C792EA | — |
| support.constant, keyword.other.special-method, keyword.other.new | #89DDFF | — |
| support.function | #89DDFF | — |
| invalid.broken | #020E14 | — |
| invalid.unimplemented | #FFFFFF | — |
| invalid.illegal | #FFFFFF | — |
| variable.language | #FF5572 | — |
| support.variable.property | #89DDFF | — |
| variable.function | #82AAFF | — |
| variable.interpolation | #EC5F67 | — |
| meta.function-call | #82AAFF | — |
| punctuation.section.embedded | #D3423E | — |
| punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array | #ADCDF1 | — |
| punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list | #D9F5DD | — |
| string.template meta.template.expression | #D3423E | — |
| string.template punctuation.definition.string | #ADCDF1 | — |
| italic | #C792EA | italic |
| bold | #FFCB6B | bold |
| quote | #697098 | italic |
| raw | #80CBC4 | — |
| variable.assignment.coffee | #89DDFF | — |
| variable.parameter.function.coffee | #ADCDF1 | — |
| variable.assignment.coffee | #89DDFF | — |
| entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css | #FF5572 | — |
| entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass | #FF5572 | — |
| keyword.other.unit.css, constant.length.units.css, keyword.other.unit.less, constant.length.units.less, keyword.other.unit.scss, constant.length.units.scss, keyword.other.unit.sass, constant.length.units.sass | #FFEB95 | — |
| meta.attribute-selector.css entity.other.attribute-name.attribute | #F78C6C | — |
| entity.other.attribute-name.id.html | #FFCB6B | — |
| punctuation.definition.tag.html | #89DDFF | — |
| meta.tag.sgml.doctype.html | #C792EA | italic |
| meta.method.declaration storage.type.js | #82AAFF | — |
| terminator.js | #ADCDF1 | — |
| meta.js punctuation.definition.js | #ADCDF1 | — |
| entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc | #EEFFFF | — |
| variable.other.jsdoc, variable.other.phpdoc | #78CCF0 | — |
| variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other | #ADCDF1 | — |
| variable.parameter.function.js | #7986E7 | — |
| variable.other.readwrite.js | #ADCDF1 | — |
| variable.other.readwrite.ts | #ADCDF1 | — |
| meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx | #ADCDF1 | — |
| variable.other.object.js, variable.other.object.jsx, meta.object-literal.key.js, meta.object-literal.key.jsx, variable.object.property.js, variable.object.property.jsx | #ADCDF1 | — |
| variable.js, variable.other.js | #ADCDF1 | — |
| entity.name.type.js, entity.name.type.module.js, entity.name.type.ts, entity.name.type.tsx | #FFCB8B | — |
| support.class.js | #ADCDF1 | — |
| support.type.property-name.json | #cbeb9d | — |
| support.constant.json | #FFCB6B | — |
| string.quoted.double.json punctuation.definition.string.json, meta.structure.dictionary.value.json string.quoted.double | #80cbac | — |
| entity.name.tag.less | #FF5572 | — |
| meta.attribute-selector.less entity.other.attribute-name.attribute | #F78C6C | — |
| markup.heading | #82B1FF | — |
| markup.italic | #C792EA | italic |
| markup.bold | #FFCB6B | bold |
| markup.quote | #697098 | italic |
| markup.inline.raw | #80CBC4 | — |
| markup.underline.link, markup.underline.link.image | #FF869A | — |
| markup.meta.attribute-list | #A9C77D | — |
| markup.admonition | — | bold |
| markup.list.bullet | #D9F5DD | — |
| markup.superscript, markup.subscript | — | italic |
| string.other.link.title.markdown, string.other.link.description.markdown | #ADCDF1 | — |
| punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string | #82B1FF | — |
| punctuation.definition.metadata.markdown | #FF5572 | — |
| beginning.punctuation.definition.list.markdown | #82B1FF | — |
| variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass | #DDDDDD | — |
| source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable | #82AAFF | — |
| source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable | #BEC5D4 | — |
| meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute | #F78C6C | — |
| entity.name.tag.scss, entity.name.tag.sass | #FF5572 | — |
| variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.object.ts, variable.other.object.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts | #ADCDF1 | — |
| support.class.node.ts, support.class.node.tsx | #82AAFF | — |
| meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type | #EEFFFF | — |
| meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block | #ADCDF1 | — |
| meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx | #CE8DE2 | — |
| entity.name.tag.yaml | #89DDFF | — |
| variable.parameter.handlebars | #BEC5D4 | — |
| entity.other.attribute-name.handlebars variable.parameter.handlebars | #FFCB6B | — |
| entity.other.attribute-name.handlebars | #89DDFF | — |
| entity.other.attribute-value.handlebars variable.parameter.handlebars | #7986E7 | — |
| meta.property-list.css meta.property-value.css variable.other.less, meta.property-list.scss variable.scss, meta.property-list.sass variable.sass, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.increment, keyword.operator.ternary, keyword.operator.comparison, keyword.operator.assignment, keyword.operator.operator, keyword.operator.or.regexp, keyword.operator.expression.in, keyword.operator.type, punctuation.definintion.string, punctuation | #d4d4d4 | — |
| token.info-token | #6796E6 | — |
| token.warn-token | #CD9731 | — |
| token.error-token | #F44747 | — |
| token.debug-token | #B267E6 | — |
| entity.name.type.interface, meta.interface | #fffda0 | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...