Kaii Code Themes
Publisher: little-kaiiThemes in package: 2
dark vs code themes by little-kaii
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#0E131B
- activityBarBadge.background#48bdb1
- activityBarBadge.foreground#0E131B
- badge.background#53c6ba
- badge.foreground#0E131B
- button.background#53c6bad5
- button.foreground#0E131B
- debugToolBar.background#0E131Bd2
- debugToolBar.border#b38098
- diffEditor.insertedTextBackground#00809B33
- dropdown.background#131c2a
- dropdown.border#181A1F
- editor.background#0E131B
- editor.findMatchBackground#f386bf55
- editor.findMatchHighlightBackground#f386bf33
- editor.foreground#c8d1df
- editor.lineHighlightBackground#131c2a
- editor.selectionBackground#2a3b5a
- editor.selectionHighlightBackground#2a3b5a77
- editor.wordHighlightBackground#484e5b33
- editor.wordHighlightBorder#7f848e
- editor.wordHighlightStrongBackground#abb2bf26
- editor.wordHighlightStrongBorder#7f848e
- editorBracketHighlight.foreground1#e6a36fdd
- editorBracketHighlight.foreground2#88abf9dd
- editorBracketHighlight.foreground3#53c6bacc
- editorBracketHighlight.foreground4#ba7bcc
- editorBracketMatch.background#131c2a
- editorBracketMatch.border#6c8093c5
- editorBracketPairGuide.activeBackground1#e6a36fdd
- editorBracketPairGuide.activeBackground2#88abf9dd
- editorBracketPairGuide.activeBackground3#53c6bacc
- editorBracketPairGuide.activeBackground4#ba7bcc
- editorCursor.background#c8d1df
- editorCursor.foreground#88abf9
- editorError.foreground#d1696980
- editorGroup.border#181A1F
- editorGroup.emptyBackground#0E131B
- editorGroupHeader.tabsBackground#111722
- editorGutter.addedBackground#98c379
- editorGutter.deletedBackground#ba7bcc
- editorGutter.modifiedBackground#88abf9d5
- editorHoverWidget.background#0E131Bd2
- editorHoverWidget.border#6c8093
- editorIndentGuide.activeBackground1#6c8093
- editorIndentGuide.background2#1e293e
- editorLightBulb.foreground#88abf9
- editorLightBulbAutoFix.foreground#e8c37d
- editorLineNumber.activeForeground#a8b6cc
- editorLineNumber.foreground#6c809370
- editorMarkerNavigation.background#0E131B
- editorOverviewRuler.border#1e293e
- editorRuler.foreground#1e293e
- editorSuggestWidget.background#0E131Bd2
- editorSuggestWidget.border#6c8093
- editorSuggestWidget.foreground#a8b6cc
- editorSuggestWidget.highlightForeground#88abf9
- editorSuggestWidget.selectedBackground#1e293e
- editorUnnecessaryCode.opacity#000000b2
- editorWarning.foreground#e0c084d5
- editorWhitespace.foreground#6c809370
- editorWidget.background#0E131B
- focusBorder#6c8093
- gitDecoration.addedResourceForeground#88abf9d5
- gitDecoration.conflictingResourceForeground#e16ba0
- gitDecoration.deletedResourceForeground#88abf9d5
- gitDecoration.ignoredResourceForeground#6c80939d
- gitDecoration.modifiedResourceForeground#88abf9d5
- gitDecoration.submoduleResourceForeground#6c8093
- gitDecoration.untrackedResourceForeground#98c379
- icon.foreground#6c8093
- input.background#131c2a
- list.activeSelectionBackground#1e293e
- list.activeSelectionForeground#c8d1df
- list.dropBackground#1e293e
- list.errorForeground#d16969
- list.focusBackground#292d35
- list.highlightForeground#C5C5C5
- list.hoverBackground#111722
- list.hoverForeground#c8d1df
- list.inactiveSelectionBackground#131c2a
- list.inactiveSelectionForeground#c8d1df
- list.warningForeground#e8c37d
- panel.border#1e293e
- peekViewEditor.matchHighlightBackground#131c2a
- sash.hoverBorder#2a3b5a
- scrollbarSlider.activeBackground#2a3b5a
- scrollbarSlider.background#1e293e
- scrollbarSlider.hoverBackground#24324c
- settings.checkboxBorder#c8d1df
- settings.checkboxForeground#7ecec6
- settings.modifiedItemIndicator#88abf9
- sideBar.background#0E131B
- sideBar.border#1e293e
- sideBar.foreground#6c8093
- sideBarSectionHeader.background#0E131B
- statusBar.background#111722
- statusBar.debuggingBackground#ECBDCEd9
- statusBar.debuggingBorder#0E131Bd2
- statusBar.debuggingForeground#0E131B
- statusBar.foreground#6c8093c5
- statusBar.noFolderBackground#0E131B
- statusBarItem.hoverBackground#131c2a
- tab.activeBackground#0E131B
- tab.activeBorderTop#88abf9
- tab.activeForeground#c8d1df
- tab.border#0E131B
- tab.inactiveBackground#111722
- tab.inactiveForeground#6c8093
- terminal.ansiBlack#0E131Bd2
- terminal.ansiBlue#7ecec6
- terminal.ansiGreen#98c379
- terminal.ansiYellow#e8c37d
- terminal.background#0E131B
- terminal.foreground#c8d1df
- textBlockQuote.background#131c2a
- titleBar.activeBackground#0E131B
- titleBar.activeForeground#c8d1df
- titleBar.inactiveBackground#0E131B
- titleBar.inactiveForeground#6B717D
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| support.type.object.module | #88abf9 | — |
| variable.language.this, support.variable.property.js, variable.language.arguments.js, variable.language.self.js, variable.language.proto.js, variable.language.constructor.js, variable.language.prototype.js | #4ec9b0 | italic |
| support.variable.dom.js, support.variable | #e8c37d | |
| support.function.dom.js | #53c6ba | |
| variable.language.super | #d16969 | italic |
| meta.brace.square, meta.brace.round | #6c8093 | |
| keyword.operator.new | #569cd6 | — |
| keyword.control | #d16969 | — |
| support.variable.property.dom.js, variable.other.property | #c8d1df | — |
| punctuation.section.embedded | #6c8093 | |
| meta.tag | #c8d1df | — |
| support.class.component | #e8c37d | — |
| source.graphql support.type.graphql, source.graphql support.type.enum.graphql | #88abf9 | — |
| meta.variables.graphql support.type.graphql | #c8d1df | — |
| support.type.builtin.graphql | #e8c37d | — |
| variable.graphql | #E6A26F | — |
| keyword.operator.nulltype.graphql | #f386bf | — |
| source.graphql string.block.description.graphql.DOCSTRING, source.graphql string.block.description.graphql.DOCSTRING punctuation.definition.string.graphql, string.description.graphql, punctuation.definition.string.graphql | #b38098 | italic |
| punctuation.definition.string.graphql, meta.embedded.block.graphql | #6c8093 | — |
| meta.arguments.graphql variable.graphql, support.type.builtin.graphql | #e8c37d | — |
| source.js meta.variables.graphql support.type.graphql | #88abf9 | — |
| source.css meta.property-list.media-query | #88abf9 | — |
| source.css variable.other.readwrite | #c8d1df | — |
| source.css meta.property-name.media-query, source.css constant.other.color, punctuation.definition.constant.css | #c8d1df | — |
| source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name, support.type.vendored.property-name | #88abf9 | — |
| source.css keyword.control.at-rule, source.sass keyword.control.at-rule, source.scss keyword.control.at-rule, source.less keyword.control.at-rule, source.stylus keyword.control.at-rule, source.postcss keyword.control.at-rule | #d16969 | — |
| entity.other.attribute-name.parent-selector-suffix punctuation.definition.entity | #88abf9 | — |
| constant.numeric, keyword.other.unit | #c8d1df | — |
| source.css entity.name.tag.reference, source.sass entity.name.tag.reference, source.scss entity.name.tag.reference, source.less entity.name.tag.reference, source.stylus entity.name.tag.reference, source.postcss entity.name.tag.reference | #6c8093 | |
| source.css support.constant.property-value, source.sass support.constant.property-value, source.scss support.constant.property-value, source.less support.constant.property-value, source.stylus support.constant.property-value, source.postcss support.constant.property-value | #c8d1df | |
| source.css variable, source.sass variable, source.scss variable, source.less variable, source.stylus variable, source.postcss variable | #f386bf | |
| source.css meta.property-value, source.sass meta.property-value, source.scss meta.property-value, source.less meta.property-value, source.stylus meta.property-value, source.postcss meta.property-value | #6c8093 | |
| entity.other.attribute-name.class | #e8c37d | italic |
| source.sass keyword.control | #53c6ba | — |
| source.css support.constant, source.sass support.constant, source.scss support.constant, source.less support.constant, source.stylus support.constant, source.postcss support.constant | #c8d1df | — |
| constant.keyword.clojure | #E6A26F | — |
| keyword.control.clojure | #ba7bcc | italic |
| meta.symbol.clojure, meta.var.clojure | #c8d1df | |
| storage.control.clojure | #ba7bcc | |
| meta.expression.clojure | #f386bf | |
| entity.global.clojure | #53c6ba | |
| meta.symbol.namespace.clojure | #53c6ba | italic |
| entity.name.function.clojure | #88abf9 | — |
| meta.objectliteral | #ce9178 | — |
| meta.object-literal.key | #E6AC6F | — |
| keyword.operator | #c8d1df | — |
| comment, punctuation.definition.comment | #6c8093 | italic |
| variable, variable.other.object., string constant.other.placeholder, support.type.graphql | #88abf9 | — |
| constant.other.color, variable.parameter | #88abf9 | — |
| invalid, invalid.illegal | #c8d1df | — |
| keyword, storage.type, storage.modifier | #569cd6 | — |
| keyword.operator.type.annotation.ts, constant.other.color, punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.string, keyword.other.template, keyword.other.substitution | #6c8093 | — |
| punctuation.accessor | #6c8093 | — |
| entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter | #53c6ba | — |
| entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method | #53c6ba | — |
| meta.block variable.other | #88abf9 | — |
| support.other.variable, string.other.link | #88abf9 | — |
| variable.other.constant, constant.language, support.constant, constant.character, constant.escape, keyword.other | #e8c37d | — |
| constant.language.undefined | #6c8093 | — |
| string, constant.other.symbol, constant.other.key, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, source.css meta.attribute-selector | #c8d1df | |
| entity.name, support.class, support.orther.namespace.use.php, entity.other.inherited-class, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types | #e8c37d | — |
| support.type | #4ec9b0 | — |
| entity.name.module.js, variable.import.parameter.js, variable.other.class.js | #c8d1df | — |
| variable.language | #c8d1df | italic |
| entity.name.method.js | #53c6ba | italic |
| meta.class-method.js entity.name.function.js, variable.function.constructor | #53c6ba | — |
| entity.other.attribute-name, text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name | #E6AC6F | italic |
| markup.inserted | #98c379 | — |
| markup.deleted | #c8d1df | — |
| markup.changed | #e8c37d | — |
| string.regexp | #98c379 | — |
| punctuation.definition.group.regexp | #ce9178 | — |
| constant.other.character-class.regexp | #E6A26F | — |
| string.regexp punctuation.definition.character-class.regexp | #88abf9 | — |
| string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end | #c8d1df | — |
| constant.character.escape | #53c6ba | — |
| *url*, *link*, *uri* | — | underline |
| tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js | #53c6ba | italic |
| source.js constant.other.object.key.js string.unquoted.label.js | #c8d1df | italic |
| source.json meta.structure.dictionary.json support.type.property-name.json | #E6A26F | — |
| text.html.markdown, punctuation.definition.list_item.markdown | #bbc6d8 | — |
| text.html.markdown markup.inline.raw.string.markdown | #87f1ae | — |
| text.html.markdown markup.inline.raw.markdown | #C792EA | — |
| text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown | #c8d1df | — |
| text.html.markdown meta.dummy.line-break | #0e131b | — |
| markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown | #c983ef | — |
| markup.italic | #c8d1df | italic |
| markup.bold, markup.bold string | #c8d1df | bold |
| markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string | #c8d1df | bold |
| markup.underline | #E6AC6F | underline |
| markup.strike | #9ba2ad | italic strikethrough |
| markup.quote punctuation.definition.blockquote.markdown | #c8d1df | — |
| markup.quote | #5b8d74 | italic |
| string.other.link.title.markdown | #53c6ba | — |
| string.other.link.description.title.markdown | #ba7bcc | — |
| constant.other.reference.link.markdown | #E6AC6F | — |
| markup.raw.block | #ba7bcc | — |
| markup.raw.block.fenced.markdown | #00000050 | — |
| punctuation.definition.fenced.markdown | #00000050 | — |
| markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end | #c8d1df | — |
| variable.language.fenced.markdown | #c8d1df | — |
| meta.separator | #c8d1df | bold |
| markup.table | #c8d1df | — |
| token.info-token | #53c6ba | — |
| token.warn-token | #e8c37d | — |
| token.error-token | #88abf9 | — |
| token.debug-token | #ba7bcc | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...