Ukiyo Theme
Publisher: zcericolaThemes in package: 1
A VS Code theme designed with a balanced color palette to be easy on the eyes and provide functional syntax highlighting.
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#121212
- activityBar.dropBackground#32323244
- activityBarBadge.background#15b6a6
- activityBarBadge.foreground#121212
- badge.background#15b6a6
- badge.foreground#121212
- breadcrumb.activeSelectionForeground#d3d3d3
- breadcrumb.foreground#d3d3d3
- breadcrumbPicker.background#323232
- button.background#15b6a6
- button.foreground#121212
- button.hoverBackground#18d6c3
- debugExceptionWidget.background#323232
- debugIcon.disconnectForeground#eb7f7f
- debugIcon.pauseForeground#10bed5
- debugIcon.restartForeground#15b6a6
- debugIcon.startForeground#15b6a6
- debugIcon.stepBackForeground#10bed5
- debugIcon.stepIntoForeground#10bed5
- debugIcon.stepOutForeground#10bed5
- debugIcon.stepOverForeground#10bed5
- diffEditor.border#444444
- diffEditor.insertedTextBackground#92D19244
- diffEditor.removedTextBackground#f2777a44
- editor.background#121212
- editor.findMatchBackground#101010
- editor.findMatchBorder#d3d3d3
- editor.findMatchHighlightBackground#d0cd7b44
- editor.findMatchHighlightBorder#d3d3d3
- editor.findRangeHighlightBorder#d0cd7b44
- editor.foreground#d3d3d3
- editor.lineHighlightBackground#222222
- editor.selectionBackground#323232
- editorBracketMatch.background#323232
- editorCodeLens.foreground#d3d3d3
- editorCursor.foreground#d3d3d3
- editorError.foreground#eb7f7f
- editorHoverWidget.foreground#d3d3d3
- editorLightBulb.foreground#15b6a6
- editorLineNumber.activeForeground#d0cd7b
- editorLineNumber.foreground#505050
- editorSuggestWidget.background#121212
- editorSuggestWidget.border#121212
- editorSuggestWidget.foreground#d3d3d3
- editorSuggestWidget.highlightForeground#d0cd7b
- editorSuggestWidget.selectedBackground#323232
- editorWarning.foreground#d0cd7b
- editorWidget.background#323232
- editorWidget.foreground#d3d3d3
- errorForeground#eb7f7f
- extensionButton.prominentBackground#15b6a6
- extensionButton.prominentForeground#121212
- extensionButton.prominentHoverBackground#18d6c3
- focusBorder#323232
- foreground#d3d3d3
- gitDecoration.addedResourceForeground#15b6a6
- gitDecoration.deletedResourceForeground#eb7f7f
- gitDecoration.modifiedResourceForeground#d0cd7b
- gitDecoration.untrackedResourceForeground#f9af8f
- input.background#121212
- input.border#323232
- input.foreground#d3d3d3
- input.placeholderForeground#727272
- inputValidation.warningBackground#323232
- inputValidation.warningBorder#d0cd7b
- inputValidation.warningForeground#d0cd7b
- list.activeSelectionBackground#323232
- list.focusBackground#323232
- list.focusForeground#d3d3d3
- list.hoverBackground#323232
- list.inactiveSelectionBackground#505050
- minimapGutter.addedBackground#15b6a6
- minimapGutter.deletedBackground#eb7f7f
- minimapGutter.modifiedBackground#d0cd7b
- notificationCenterHeader.background#323232
- notificationCenterHeader.foreground#d3d3d3
- panel.background#121212
- peekView.border#121212
- peekViewEditor.background#121212
- peekViewEditor.matchHighlightBackground#121212
- peekViewResult.background#121212
- peekViewResult.matchHighlightBackground#121212
- peekViewResult.selectionBackground#444444
- pickerGroup.foreground#d3d3d3
- scrollbarSlider.activeBackground#88888880
- scrollbarSlider.background#44444480
- scrollbarSlider.hoverBackground#66666680
- searchEditor.findMatchBackground#d0cd7b44
- searchEditor.findMatchBorder#d0cd7b
- settings.numberInputBackground#121212
- settings.textInputBackground#121212
- sideBar.background#121212
- sideBarSectionHeader.background#323232
- sideBarSectionHeader.border#323232
- statusBar.background#282323
- statusBar.debuggingBackground#15b6a6
- statusBar.debuggingForeground#121212
- statusBar.foreground#909090
- statusBar.noFolderBackground#21252B
- statusBarItem.hoverBackground#111
- tab.activeBackground#505050
- tab.activeBorder#10bed5
- tab.inactiveBackground#323232
- tab.unfocusedActiveBorder#10bed5
- terminal.ansiBlack#666666
- terminal.ansiBlue#10bed5
- terminal.ansiBrightBlack#505050
- terminal.ansiBrightBlue#76D0E0
- terminal.ansiBrightCyan#CFCE6F
- terminal.ansiBrightGreen#B5DED8
- terminal.ansiBrightMagenta#a59be9
- terminal.ansiBrightRed#DF9DAC
- terminal.ansiBrightWhite#efefef
- terminal.ansiBrightYellow#d0cd7b
- terminal.ansiCyan#62CFCF
- terminal.ansiGreen#15b6a6
- terminal.ansiMagenta#a59be9
- terminal.ansiRed#eb7f7f
- terminal.ansiWhite#a59be9
- terminal.ansiYellow#d0cd7b
- terminal.background#121212
- terminal.foreground#a59be9
- terminalCursor.foreground#d3d3d3
- textLink.activeForeground#10bed5
- textLink.foreground#10bed5
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| string, constant.other.symbol, entity.other.inherited-class, punctuation.definition.string, markup.underline.link.image.markdown, string.other.link, markup.raw.inline, markup.inserted, markup.inserted.git_gutter, string.other.link.title.markdown, variable.parameter.url.scss, string.quoted.double.json | #a59be9 | — |
| keyword, keyword.operator.expression.typeof, variable.language.this, storage, support.function.construct.output.php, keyword.operator.new, markup.inline.raw.string.markdown, keyword.operator.expression.import.js, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js | #d0cd7b | italic |
| entity.other.attribute-name, entity.other.attribute-name.class.css, markup.heading punctuation.definition.heading, entity.name.section, entity.other.attribute-name.class.css, string.unquoted.alias.graphql | #d0cd7b | — |
| variable.other.property.php, variable.other.member.php, entity.name.function.php, meta.function-call, meta.property-value, meta.selector, entity.name.function.ts, entity.name.function.js, entity.name.function.tsx, entity, meta, meta.embedded.expression.js | #f78686 | italic |
| support.class, entity.name.type.class, meta.entity.new.name.expr, entity.name.tag.structure.any.html, meta.tag.structure.any.html, punctuation.definition.tag.html, meta.tag.sgml.doctype.html, keyword.other.special-method, entity.name.type, entity.name.tag, support.variable.dom.js, meta.tag.structure.any.html, markup.bold, punctuation.definition.bold, entity.name.type.ts, support.variable.dom.ts, entity.name.function.graphql, entity.name.function.tagged-template.js | #a59be9 | — |
| meta.type.annotation.ts, support.type.primitive.ts, support.type.primitive.tsx, entity.name.type.ts, meta.type.annotation.ts, variable.other.jsdoc, support.variable.property.js, support.variable.property.tsx, support.variable.property.ts, entity.other.attribute-name.js | #f9af8f | — |
| variable.parameter, variable.parameter.ts, variable.parameter.js, variable.parameter.tsx, entity.tag.tagbraces.nunjucks, string.unquoted.filter-pipe.nunjucks, punctuation.colon.graphql, string.unquoted.graphql, support.type | #15b6a6 | — |
| comment, punctuation.definition.comment, punctuation.separator, markup.underline.link.markdown, punctuation.definition.metadata.markdown | #727272 | — |
| punctuation.definition.variable, variable, variable.language.this.php, markup.deleted, markup.deleted.git_gutter, invalid.illegal, string.unquoted.tag-string.nunjucks, variable.language.js, variable.language.ts | #10bed5 | — |
| entity.other.attribute-name.pseudo-class.css, constant.other.php, markup.italic.markdown, punctuation.definition.italic.markdown, string.regexp, entity.other.attribute-name.pseudo-element.css, meta.image.inline.markdown, string.other.link.description.markdown, variable.other.readwrite.ts, meta.object.member.ts, meta.objectliteral.ts, meta.object.member.ts, meta.objectliteral.ts, meta.var.expr.ts, source.ts, support.type.property-name.css | #10bed5 | — |
| constant.numeric, keyword.other.unit, markup.quote, constant.language, constant.character.escape.json, constant.character.escape, constant.character.escape.backslash.regexp | #eb7f7f | — |
| support.function, entity.other.attribute-name.id, markup.italic, punctuation.definition.italic, markup.changed, markup.changed.git_gutter, support.constant.property-value, variable.other.property.js | #15b6a6 | — |
| keyword.operator, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css, keyword.operator, punctuation.accessor.js, punctuation.definition.block.tag.jsdoc, storage.type.class.jsdoc, invalid.deprecated.entity.other.attribute-name.html | #d0cd7b | — |
| punctuation.definition.block, meta.parameters, punctuation.definition.parameters, meta.brace.round, punctuation.definition.dictionary, punctuation.section, punctuation.terminator.statement, support.variable.property.dom.js, punctuation.definition.parameters, punctuation.definition.array, entity.name.function, meta.require, support.function.any-method, meta.tag.sgml.html, punctuation.section.embedded, variable.interpolation, variable.object.property.ts, variable.object.property.tsx, meta.brace.square, punctuation.definition.array, punctuation.definition.binding-pattern.object.js, meta.selectionset.graphql, meta.object.member.ts, punctuation, meta, text.html, source.yaml, string.unquoted.plain.out.yaml, markup.underline.link.markdown, punctuation.definition.metadata.markdown, meta.objectliteral.ts, punctuation.separator, punctuation.separator.key-value | #d3d3d3 | — |
| entity.name.tag.reference, meta.embedded.block.php, meta.embedded.line.php, keyword.other.phpdoc.php, meta.separator, variable.object.property.ts, variable.object.property.tsx, support.variable.property.dom.js, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.instance.jsdoc, variable.graphql, meta.property-name.css, meta.property-name.js, meta.object.property.ts, meta.object-literal.key, entity.tag | #d3d3d3 | — |
| support.type.property-name.json, entity.name.tag.yaml | #d0cd7b | — |