Kiro Theme
Publisher: Mohd ZaidThemes in package: 2
A beautiful and modern VS Code theme forked from Kiro IDE.
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.
- accent#b080ff
- activityBar.activeBackground#8e47ff40
- activityBar.activeBorder#00000000
- activityBar.background#28242e
- activityBar.border#4a464f
- activityBar.foreground#b080ff
- activityBar.inactiveForeground#c1bec6
- activityBarBadge.background#7138cc
- activityBarBadge.foreground#ffffff
- alertButton.background#c1bec6
- alertButton.foreground#19161d
- alertButton.hoverBackground#dcdadf
- alertButton.hoverForeground#211d25
- alertButton.secondaryBackground#ffffff33
- alertButton.secondaryForeground#ffffffbf
- alertButton.secondaryHoverBackground#ffffff4d
- alertButton.secondaryHoverForeground#ffffffd9
- background#19161d
- badge.background#8dc8fb40
- badge.foreground#8dc8fb
- button.background#7138cc
- button.foreground#f2f1f4
- button.hoverBackground#8e47ff
- button.secondaryBackground#ffffff13
- button.secondaryForeground#ffffff
- button.secondaryHoverBackground#8e47ff40
- button.separator#19161d40
- checkbox.background#28242e
- checkbox.border#4a464f
- checkbox.foreground#8e47ff
- commandCenter.activeBorder#8e47ff40
- commandCenter.border#00000000
- commandCenter.debuggingBackground#8e47ffbf
- debugIcon.continueForeground#8dc8fb
- debugIcon.pauseForeground#8dc8fb
- debugIcon.restartForeground#80ffb5
- debugIcon.startForeground#80ffb5
- debugIcon.stopForeground#ff8080
- debugToolBar.background#352f3d
- diffEditor.insertedLineBackground#80ffb520
- diffEditor.insertedTextBackground#80ffb520
- diffEditor.removedLineBackground#ff808020
- diffEditor.removedTextBackground#ff808020
- disabledForeground#938f9b
- dropdown.background#28242e
- dropdown.border#4a464f
- editor.background#211d25
- editor.findMatchHighlightBackground#b080ff40
- editor.foreground#ffffff
- editor.lineHighlightBackground#ffffff0d
- editor.lineHighlightBorder#00000000
- editor.rangeHighlightBackground#8dc8fb20
- editor.selectionBackground#b080ff20
- editor.selectionHighlightBackground#00000000
- editor.wordHighlightBackground#8dc8fb20
- editorBracketHighlight.foreground1#ffcf99
- editorBracketHighlight.foreground2#fff2b3
- editorBracketHighlight.foreground3#dfffb3
- editorError.foreground#ff8080bf
- editorGroup.border#4a464f
- editorGroupHeader.border#00000000
- editorGroupHeader.tabsBackground#28242e
- editorGroupHeader.tabsBorder#4a464f
- editorGutter.addedBackground#80ffb5bf
- editorGutter.background#00000000
- editorGutter.deletedBackground#ff8080bf
- editorGutter.modifiedBackground#b080ffbf
- editorHoverWidget.background#352f3d
- editorHoverWidget.border#00000000
- editorIndentGuide.activeBackground1#ffffff26
- editorIndentGuide.background#ffffff0d
- editorInfo.foreground#8dc8fb
- editorLightBulb.foreground#fff2b3
- editorLightBulbAutoFix.foreground#dfffb3
- editorLineNumber.activeForeground#ffffff99
- editorLineNumber.dimmedForeground#ffffff4d
- editorLineNumber.foreground#ffffff66
- editorSuggestWidget.selectedBackground#352f3d
- editorWarning.foreground#ffcf99
- editorWidget.background#28242e
- editorWidget.border#00000000
- errorForeground#ff8080
- extensionButton.background#7138cc
- extensionButton.foreground#ffffff
- extensionButton.hoverBackground#8e47ff
- extensionButton.prominentBackground#7138cc
- extensionButton.prominentForeground#ffffff
- extensionButton.prominentHoverBackground#8e47ff
- focusBorder#9e61ff
- foreground#ffffff
- gitDecoration.conflictingResourceForeground#ff8080
- gitDecoration.deletedResourceForeground#dfffb3
- gitDecoration.ignoredResourceForeground#938f9b
- gitDecoration.modifiedResourceForeground#ffcf99
- gitDecoration.untrackedResourceForeground#80ffb5
- icon.foreground#c1bec6
- input.background#28242e
- input.border#4a464f
- inputOption.activeBackground#8141e6
- inputOption.activeBorder#00000000
- inputOption.activeForeground#ffffff
- inputOption.hoverBackground#28242e
- inputValidation.errorBackground#ff8080
- inputValidation.errorBorder#ff8080
- inputValidation.errorForeground#19161d
- keybindingLabel.background#ffffff1a
- keybindingLabel.border#00000000
- keybindingLabel.bottomBorder#ffffff1a
- keybindingLabel.foreground#938f9b
- keybindingLabel.shadow#00000000
- list.activeSelectionBackground#352f3d
- list.activeSelectionForeground#ffffff
- list.errorForeground#ff8080
- list.focusBackground#8dc8fb40
- list.focusOutline#00000000
- list.hoverBackground#ffffff0d
- list.hoverForeground#ffffff
- list.inactiveSelectionBackground#352f3d
- list.warningForeground#ffcf99
- minimap.errorHighlight#ff808080
- minimap.findMatchHighlight#b080ff80
- minimap.foregroundOpacity#ffffff40
- minimap.infoHighlight#8dc8fb80
- minimap.selectionHighlight#b080ff40
- minimap.selectionOccurrenceHighlight#b080ff
- multiDiffEditor.headerBackground#28242e
- notifications.background#28242e
- notifications.border#00000000
- notificationsErrorIcon.foreground#ff8080
- notificationsInfoIcon.foreground#8dc8fb
- notificationsWarningIcon.foreground#ffcf99
- panel.background#211d25
- panel.border#4a464f
- panelTitle.activeBackground#352f3d
- panelTitle.activeBorder#00000000
- panelTitle.activeForeground#ffffff
- panelTitle.inactiveForeground#938f9b
- peekViewTitle.background#28242e
- pickerGroup.foreground#8e47ff
- problemsErrorIcon.foreground#ff8080
- problemsInfoIcon.foreground#8dc8fb
- problemsWarningIcon.foreground#ffcf99
- progressBar.background#7138cc
- quickInput.background#211d25
- quickInput.overlayBackground#19161d80
- quickInputList.focusBackground#352f3d
- quickInputList.focusForeground#ffffff
- scmGraph.historyItemBaseRefColor#8dc8fb
- scmGraph.historyItemHoverLabelForeground#19161d
- scmGraph.historyItemRefColor#8dc8fb
- scmGraph.historyItemRemoteRefColor#8e47ff
- scrollbar.shadow#19161d
- settings.dropdownBackground#28242e
- settings.dropdownBorder#4a464f
- sideBar.background#211d25
- sideBar.border#4a464f
- sideBar.foreground#ffffff
- sideBarSectionHeader.background#211d25
- sideBarSectionHeader.border#352f3d
- sideBarTitle.background#28242e
- sideBarTitle.border#4a464f
- statusBar.background#00000000
- statusBar.debuggingBackground#8e47ff40
- statusBar.foreground#938f9b
- statusBar.noFolderBackground#00000000
- statusBarItem.hoverBackground#ffffff13
- statusBarItem.hoverForeground#ffffff
- statusBarItem.remoteBackground#00000000
- statusBarItem.remoteForeground#938f9b
- symbolIcon.arrayForeground#808aff
- symbolIcon.classForeground#ffcf99
- symbolIcon.functionForeground#8dc8fb
- symbolIcon.interfaceForeground#8e47ff
- symbolIcon.propertyForeground#938f9b
- symbolIcon.typeParameterForeground#8e47ff
- symbolIcon.variableForeground#ff8080
- tab.activeBackground#28242e
- tab.activeBorder#211d25
- tab.activeBorderTop#b080ff
- tab.activeForeground#ffffff
- tab.border#4a464f
- tab.inactiveBackground#28242e
- tab.inactiveForeground#938f9b
- terminal.ansiBlue#8dc8fb
- terminal.ansiBrightBlack#ffffff40
- terminal.ansiBrightBlue#8dc8fb
- terminal.ansiBrightCyan#80f4ff
- terminal.ansiBrightGreen#80ffb5
- terminal.ansiBrightMagenta#8e47ff
- terminal.ansiBrightRed#ff8080
- terminal.ansiBrightYellow#fff2b3
- terminal.ansiCyan#80f4ff
- terminal.ansiGreen#80ffb5
- terminal.ansiMagenta#8e47ff
- terminal.ansiRed#ff8080
- terminal.ansiYellow#fff2b3
- textLink.activeForeground#8dc8fb
- textLink.foreground#b080ff
- textPreformat.background#ffffff1a
- textPreformat.foreground#938f9b
- titleBar.activeBackground#00000000
- titleBar.border#00000000
- titleBar.inactiveBackground#00000000
- toolbar.hoverBackground#352f3d
- tree.inactiveIndentGuidesStroke#00000000
- tree.indentGuidesStroke#00000000
- welcomePage.background#211d25
- welcomePage.progress.background#28242e
- welcomePage.progress.foreground#8dc8fb
- welcomePage.tileBackground#19161d
- widget.border#ffffff33
- widget.shadow#19161d
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment | #ffffff99 | — |
| comment.line, comment.block.documentation | #ffffff99 | italic |
| constant.language.boolean.false | #ff8080 | — |
| constant.language.boolean.true | #ff8080 | — |
| constant.language.import-export-all | #8dc8fb | — |
| constant.language.null | #ff8080 | — |
| constant.language.symbol | #ff80b5 | — |
| constant.numeric | #ffafd1 | — |
| entity.name.tag | #8dc8fb | — |
| entity.name.tag.reference | #e2d3fe | — |
| entity.name.tag.yaml | #ffcf99 | — |
| entity.name.type.module | #ffcf99 | — |
| entity.name.function | #8dc8fb | — |
| entity.other.attribute-name.id | #ffcf99 | — |
| entity.other.attribute-name.class | #fff2b3 | — |
| entity.other.attribute-name | #ffcf99 | — |
| keyword | #e2d3fe | — |
| keyword.control, keyword.control.import, keyword.control.from, keyword.control.flow | #c2a0fd | — |
| keyword.operator, keyword.operator.logical | #ffffffcc | — |
| keyword.unit, keyword.other.unit | #ffafd1 | — |
| markup.bold | #c2a0fd | — |
| markup.italic | #8dc8fb | italic |
| markup.fenced_code | #ffffffcc | — |
| markup.heading | #ffffffcc | bold |
| markup.quote | #ffffffcc | italic |
| markup.underline_link | #80f4ff | — |
| meta.class | #ff80b5 | — |
| meta.jsx.children | #ffffffcc | — |
| meta.object | #80f4ff | — |
| meta.property-name.css | #808aff | — |
| meta.property-value.css | #808aff | — |
| meta.selector | #80ffb5 | — |
| meta.structure.dictionary | #808aff | — |
| meta.tag.attributes | #80f4ff | — |
| meta.type.parameters | #afb6ff | — |
| meta.var.expr | #afb6ff | — |
| punctuation.accessor, punctuation.definition.array, punctuation.definition.block, punctuation.definition.dictionary, punctuation.definition.parameters, punctuation.definition.tag, punctuation.definition.typeparameters, punctuation.separator | #ffffffcc | — |
| punctuation.definition.heading | #ffcf99 | — |
| punctuation.definition.string | #80ffb5 | — |
| punctuation.definition.template-expression | #ff8080 | — |
| punctuation.selection, punctuation.terminator | #ffffff99 | — |
| storage | #c2a0fd | — |
| string | #80ffb5 | — |
| support.class, support.class.component | #ff80b5 | — |
| support.constant.color, support.constant.font-name, support.constant.property-value | #bddffd | — |
| support.function | #afb6ff | — |
| support.type.property-name | #e2d3fe | — |
| support.type.property-name.css | #ffffffcc | — |
| support.type.vendored | #fff2b3 | — |
| variable | #80f4ff | — |
| variable.language.super | #afffd1 | italic |
| variable.language.this | #aff8ff | italic |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...