Perpetuity Theme
Publisher: Sathwik KunchamThemes in package: 2
A clean, modern theme with teal accents, semantic highlighting, and comprehensive syntax coverage for 20+ languages
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.background#daebed
- activityBar.border#cde0e2
- activityBar.foreground#0a4a55
- activityBar.inactiveForeground#427a7e
- activityBarBadge.background#06858e
- activityBarBadge.foreground#ffffff
- badge.background#06858e
- badge.foreground#ffffff
- breadcrumb.activeSelectionForeground#06858e
- breadcrumb.focusForeground#0a4a55
- breadcrumb.foreground#427a7e
- breadcrumbPicker.background#f2f7f7
- button.background#06858e
- button.foreground#ffffff
- button.hoverBackground#1e9ea6
- button.secondaryBackground#d9eaea
- button.secondaryForeground#0a4a55
- button.secondaryHoverBackground#c9e5e7
- debugToolBar.background#f2f7f7
- debugToolBar.border#cde0e2
- descriptionForeground#427a7e
- dropdown.background#f2f7f7
- dropdown.border#cde0e2
- dropdown.foreground#0a4a55
- editor.background#e8f0f0
- editor.findMatchBackground#06858e30
- editor.findMatchHighlightBackground#06858e20
- editor.foreground#0a4a55
- editor.lineHighlightBackground#d9eaea50
- editor.lineHighlightBorder#d9eaea00
- editor.selectionBackground#c9e5e780
- editor.selectionHighlightBackground#d9eaea80
- editor.wordHighlightBackground#d9eaea80
- editor.wordHighlightStrongBackground#c9e5e780
- editorBracketMatch.background#c9e5e750
- editorBracketMatch.border#06858e
- editorCursor.foreground#06858e
- editorError.foreground#d13838
- editorGroup.border#cde0e2
- editorGroup.dropBackground#c9e5e730
- editorGroupHeader.tabsBackground#daebed
- editorGroupHeader.tabsBorder#cde0e2
- editorHint.foreground#06858e
- editorHoverWidget.background#f2f7f7
- editorHoverWidget.border#cde0e2
- editorIndentGuide.activeBackground#cde0e2
- editorIndentGuide.background#cde0e270
- editorInfo.foreground#06858e
- editorLineNumber.activeForeground#0a4a55
- editorLineNumber.foreground#427a7e80
- editorRuler.foreground#cde0e2
- editorSuggestWidget.background#f2f7f7
- editorSuggestWidget.border#cde0e2
- editorSuggestWidget.foreground#0a4a55
- editorSuggestWidget.highlightForeground#06858e
- editorSuggestWidget.selectedBackground#d9eaea
- editorWarning.foreground#ffaa00
- editorWidget.background#f2f7f7
- editorWidget.border#cde0e2
- editorWidget.resizeBorder#06858e
- extensionButton.prominentBackground#06858e
- extensionButton.prominentForeground#ffffff
- extensionButton.prominentHoverBackground#1e9ea6
- focusBorder#06858e
- foreground#0a4a55
- gitDecoration.addedResourceForeground#27ae60
- gitDecoration.conflictingResourceForeground#8e44ad
- gitDecoration.deletedResourceForeground#d13838
- gitDecoration.ignoredResourceForeground#427a7e80
- gitDecoration.modifiedResourceForeground#f39c12
- gitDecoration.submoduleResourceForeground#06858e
- gitDecoration.untrackedResourceForeground#37b6be
- input.background#d9eaea
- input.border#cde0e2
- input.foreground#0a4a55
- input.placeholderForeground#427a7e80
- input.selectionBackground#c9e5e7
- inputOption.activeBorder#06858e
- inputValidation.errorBackground#d13838
- inputValidation.errorBorder#d13838
- inputValidation.errorForeground#ffffff
- inputValidation.infoBackground#06858e
- inputValidation.infoBorder#06858e
- inputValidation.infoForeground#ffffff
- inputValidation.warningBackground#ffaa00
- inputValidation.warningBorder#ffaa00
- inputValidation.warningForeground#ffffff
- list.activeSelectionBackground#c9e5e7
- list.activeSelectionForeground#0a4a55
- list.dropBackground#c9e5e750
- list.focusBackground#c9e5e780
- list.focusForeground#0a4a55
- list.highlightForeground#06858e
- list.hoverBackground#e0eaea
- list.hoverForeground#0a4a55
- list.inactiveSelectionBackground#d9eaea
- list.inactiveSelectionForeground#0a4a55
- listFilterWidget.background#f2f7f7
- listFilterWidget.noMatchesOutline#d13838
- listFilterWidget.outline#06858e
- menu.background#f2f7f7
- menu.foreground#0a4a55
- menu.selectionBackground#d9eaea
- menu.selectionForeground#0a4a55
- menu.separatorBackground#cde0e2
- menubar.selectionBackground#d9eaea
- menubar.selectionForeground#0a4a55
- notificationCenter.border#cde0e2
- notificationCenterHeader.background#daebed
- notificationCenterHeader.foreground#0a4a55
- notificationLink.foreground#06858e
- notifications.background#f2f7f7
- notifications.border#cde0e2
- notifications.foreground#0a4a55
- notificationToast.border#cde0e2
- panel.background#e8f0f0
- panel.border#cde0e2
- panelTitle.activeBorder#06858e
- panelTitle.activeForeground#0a4a55
- panelTitle.inactiveForeground#427a7e
- peekView.border#06858e
- peekViewEditor.background#e0eaea
- peekViewEditor.matchHighlightBackground#06858e40
- peekViewResult.background#daebed
- peekViewResult.fileForeground#0a4a55
- peekViewResult.lineForeground#427a7e
- peekViewResult.matchHighlightBackground#06858e40
- peekViewResult.selectionBackground#c9e5e7
- peekViewResult.selectionForeground#0a4a55
- peekViewTitle.background#c9e5e7
- peekViewTitleDescription.foreground#427a7e
- peekViewTitleLabel.foreground#0a4a55
- problemsErrorIcon.foreground#d13838
- problemsInfoIcon.foreground#06858e
- problemsWarningIcon.foreground#ffaa00
- progressBar.background#06858e
- selection.background#c9e5e780
- settings.checkboxBackground#f2f7f7
- settings.checkboxBorder#cde0e2
- settings.checkboxForeground#0a4a55
- settings.dropdownBackground#f2f7f7
- settings.dropdownBorder#cde0e2
- settings.dropdownForeground#0a4a55
- settings.headerForeground#0a4a55
- settings.modifiedItemIndicator#06858e
- settings.numberInputBackground#f2f7f7
- settings.numberInputBorder#cde0e2
- settings.numberInputForeground#0a4a55
- settings.textInputBackground#f2f7f7
- settings.textInputBorder#cde0e2
- settings.textInputForeground#0a4a55
- sideBar.background#daebed
- sideBar.border#cde0e2
- sideBar.foreground#0a4a55
- sideBarSectionHeader.background#c9e5e7
- sideBarSectionHeader.border#cde0e2
- sideBarSectionHeader.foreground#0a4a55
- sideBarTitle.foreground#0a4a55
- statusBar.background#06858e
- statusBar.border#06858e
- statusBar.debuggingBackground#37b6be
- statusBar.debuggingForeground#ffffff
- statusBar.foreground#ffffff
- statusBar.noFolderBackground#427a7e
- statusBar.noFolderForeground#ffffff
- statusBarItem.activeBackground#06858e40
- statusBarItem.hoverBackground#06858e80
- statusBarItem.prominentBackground#d13838
- statusBarItem.prominentForeground#ffffff
- statusBarItem.prominentHoverBackground#d1383880
- tab.activeBackground#e8f0f0
- tab.activeBorder#06858e
- tab.activeBorderTop#00000000
- tab.activeForeground#0a4a55
- tab.border#cde0e2
- tab.hoverBackground#e0eaea
- tab.hoverForeground#0a4a55
- tab.inactiveBackground#daebed
- tab.inactiveForeground#427a7e
- terminal.ansiBlack#2c3e50
- terminal.ansiBlue#06858e
- terminal.ansiBrightBlack#7f8c8d
- terminal.ansiBrightBlue#1e9ea6
- terminal.ansiBrightCyan#5dc7ce
- terminal.ansiBrightGreen#2ecc71
- terminal.ansiBrightMagenta#9b59b6
- terminal.ansiBrightRed#e74c3c
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#f1c40f
- terminal.ansiCyan#37b6be
- terminal.ansiGreen#27ae60
- terminal.ansiMagenta#8e44ad
- terminal.ansiRed#d13838
- terminal.ansiWhite#ecf0f1
- terminal.ansiYellow#f39c12
- terminal.background#e8f0f0
- terminal.foreground#0a4a55
- terminalCursor.background#e8f0f0
- terminalCursor.foreground#06858e
- titleBar.activeBackground#daebed
- titleBar.activeForeground#0a4a55
- titleBar.border#cde0e2
- titleBar.inactiveBackground#e0eaea
- titleBar.inactiveForeground#427a7e
- walkThrough.embeddedEditorBackground#daebed
- welcomePage.buttonBackground#d9eaea
- welcomePage.buttonHoverBackground#c9e5e7
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #758a8e | — |
| string, punctuation.definition.string | #27ae60 | — |
| keyword, storage.type, storage.modifier, keyword.control, keyword.operator.new | #06858e | bold |
| entity.name.function, support.function, meta.function-call.generic | #1e9ea6 | — |
| entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, entity.name.type.class, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy | #37b6be | bold |
| variable, variable.other, variable.parameter, variable.name, support.variable, entity.name.variable | #074952 | — |
| constant, constant.numeric, constant.language, constant.character, constant.other, support.constant | #8e44ad | — |
| entity.name.tag, punctuation.definition.tag | #06858e | bold |
| entity.other.attribute-name | #1e9ea6 | italic |
| invalid, invalid.illegal | #d13838 | — |
| invalid.deprecated | #d13838 | italic underline |
| keyword.operator | #0891a0 | — |
| constant.character.escape | #5dc7ce | — |
| punctuation.definition, punctuation.definition.parameters, punctuation.definition.array, punctuation.section, punctuation.separator, punctuation.terminator | #427a7e | — |
| variable.other.property, variable.other.object.property, support.type.property-name | #116670 | — |
| support.type.property-name.json | #1e9ea6 | — |
| support.type.property-name.css | #1e9ea6 | — |
| entity.other.attribute-name | #37b6be | italic |
| markup.heading, entity.name.section.markdown | #06858e | bold |
| markup.bold | #0a4a55 | bold |
| markup.italic | #0a4a55 | italic |
| markup.underline.link, string.other.link | #1e9ea6 | — |
| markup.list | #0a4a55 | — |
| meta.method-call, meta.function-call entity.name.function, support.function.console | #2bb2bb | — |
| support.function.builtin, support.function.magic, support.function.builtin.python | #1e9ea6 | italic |
| entity.name.function.constructor, support.class.builtin | #37b6be | bold |
| variable.parameter, meta.parameters variable, variable.parameter.function, meta.function.parameters variable | #b8860b | italic |
| meta.object-literal.key, variable.other.property, variable.other.object.property | #116670 | — |
| variable.language, variable.language.this, variable.language.self, variable.language.super, variable.parameter.function.language.special.self.python | #8e44ad | italic |
| variable.other.constant, variable.other.enummember, constant.other.caps | #8e44ad | — |
| entity.name.type.parameter, meta.type.parameters, support.type.primitive, meta.type.annotation | #45cad2 | italic |
| entity.name.type.interface, support.type.interface | #3dc4cc | bold |
| entity.name.type.enum, support.type.enum | #3ab8c0 | bold |
| meta.decorator, punctuation.decorator, storage.type.annotation, meta.function.decorator.python, entity.name.function.decorator.python | #d68000 | italic |
| meta.template.expression, punctuation.definition.template-expression, meta.embedded | #06858e | — |
| string.template punctuation.definition.string, punctuation.definition.string.template | #1e9ea6 | — |
| string.regexp, keyword.operator.quantifier.regexp, constant.character.escape.backslash.regexp, keyword.control.anchor.regexp | #1e9ea6 | — |
| keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as | #8e44ad | bold |
| string.quoted.module, meta.import string | #27ae60 | — |
| comment.block.documentation, comment.line.documentation, string.quoted.docstring.multi.python | #6a8a8d | italic |
| storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc, entity.name.type.instance.jsdoc, variable.other.jsdoc | #1e9ea6 | italic |
| entity.name.type.instance.jsdoc | #45cad2 | italic |
| entity.name.tag.tsx, support.class.component.tsx, support.class.component.jsx, entity.name.tag.js.jsx | #37b6be | bold |
| entity.other.attribute-name.tsx, entity.other.attribute-name.jsx | #1e9ea6 | italic |
| storage.type.interface.ts, storage.type.type.ts, storage.type.class.ts | #06858e | bold |
| variable.language.this.ts, variable.language.this.tsx | #8e44ad | italic |
| string.quoted.single.python.f-string, string.quoted.double.python.f-string, meta.fstring.python | #27ae60 | — |
| meta.interpolation.python, meta.embedded.python | #06858e | — |
| support.function.magic.python | #1e9ea6 | italic |
| entity.other.attribute-name.class.css, entity.other.attribute-name.class.scss | #d68000 | — |
| entity.other.attribute-name.id.css, entity.other.attribute-name.id.scss | #1e9ea6 | — |
| entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css | #8e44ad | italic |
| keyword.other.unit.css, keyword.other.unit.scss, keyword.other.unit.percentage.css | #e07b39 | — |
| variable.css, variable.argument.css | #1e9ea6 | — |
| markup.inline.raw.markdown, markup.fenced_code.block.markdown | #27ae60 | — |
| fenced_code.block.language, markup.fenced_code.block.markdown fenced_code.block.language | #1e9ea6 | — |
| markup.quote.markdown, punctuation.definition.quote.begin.markdown | #6a8a8d | italic |
| entity.name.namespace, entity.name.type.module, entity.name.type.namespace | #1e9ea6 | — |
| entity.name.label | #d68000 | bold |
| entity.name.function.preprocessor, meta.preprocessor.macro, entity.name.other.preprocessor.macro | #e07b39 | — |
| storage.modifier.access, storage.modifier.visibility | #8e44ad | italic |
| constant.numeric.hex, constant.numeric.octal, constant.numeric.binary, constant.numeric.float | #e07b39 | — |
| support.type.property-name.json, string.json support.type.property-name.json | #1e9ea6 | — |
| source.json meta.structure.dictionary.json support.type.property-name.json | #1e9ea6 | — |
| source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json | #1a7a85 | — |
| entity.name.tag.yaml | #1e9ea6 | — |
| keyword.other.sql | #8e44ad | bold |
| markup.inserted, meta.diff.header.to-file | #27ae60 | — |
| markup.deleted, meta.diff.header.from-file | #d13838 | — |
| markup.changed | #d68000 | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...