Cotton Candy Theme
Publisher: forgngThemes in package: 1
Colorful Dark Theme
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#282c34
- activityBar.foreground#d8d7cb
- activityBarBadge.background#9795F1
- activityBarBadge.foreground#d8d7cb
- badge.background#ffc600
- badge.foreground#282A36
- button.background#000
- button.foreground#d8d7cb
- button.hoverBackground#282A36
- contrastBorder#212121
- debugToolBar.background#212121
- dropdown.background#282A36
- dropdown.border#d8d7cb
- dropdown.foreground#d8d7cb
- editor.background#21252b
- editor.findMatchBackground#000
- editor.findMatchHighlightBackground#ffffff40
- editor.findRangeHighlightBackground#f54291
- editor.foreground#d8d7cb
- editor.hoverHighlightBackground#ffffff40
- editor.inactiveSelectionBackground#44475A75
- editor.lineHighlightBackground#44475A
- editor.lineHighlightBorder#44475A
- editor.rangeHighlightBackground#44475A
- editor.selectionBackground#44475A
- editor.selectionHighlightBorder#d8d7cb
- editor.wordHighlightBackground#44475A
- editor.wordHighlightBorder#1de9b6
- editor.wordHighlightStrongBorder#d8d7cb
- editorCodeLens.foreground#f54291
- editorCursor.foreground#fff
- editorError.foreground#f54291
- editorGroup.border#eb5bcb
- editorGroup.dropBackground#44475A7F
- editorGroupHeader.noTabsBackground#21252b
- editorGutter.background#282A36
- editorHoverWidget.background#322957
- editorHoverWidget.border#00cee6
- editorIndentGuide.background#d8d7cb40
- editorLineNumber.foreground#484c7f
- editorLink.activeForeground#ff9800
- editorMarkerNavigation.background#000000
- editorMarkerNavigationError.background#00cee6
- editorMarkerNavigationInfo.background#00cee6
- editorMarkerNavigationWarning.background#00cee6
- editorOverviewRuler.border#44475A
- editorRuler.foreground#f54291
- editorSuggestWidget.background#322957
- editorSuggestWidget.border#00cee6
- editorSuggestWidget.foreground#d8d7cb
- editorSuggestWidget.highlightForeground#00cee6
- editorSuggestWidget.selectedBackground#006372
- editorWhitespace.foreground#68bcd2
- editorWidget.background#282A36
- editorWidget.border#00cee6
- foreground#d8d7cb
- input.background#282c34
- input.foreground#d8d7cb
- inputValidation.errorBorder#e4508f
- inputValidation.infoBorder#9795F1
- inputValidation.warningBorder#ff9800
- list.activeSelectionBackground#44475A
- list.activeSelectionForeground#d8d7cb
- list.dropBackground#44475A
- list.focusBackground#44475A
- list.hoverBackground#44475A
- list.inactiveSelectionBackground#44475A
- panel.background#322957
- peekViewEditor.background#000000
- peekViewEditor.matchHighlightBackground#795548
- peekViewEditorGutter.background#212121
- peekViewResult.background#212121
- peekViewResult.fileForeground#d8d7cb
- peekViewResult.lineForeground#d8d7cb
- peekViewResult.matchHighlightBackground#322957
- peekViewResult.selectionBackground#44475A
- peekViewResult.selectionForeground#d8d7cb
- peekViewTitle.background#212121
- peekViewTitleDescription.foreground#d8d7cb
- peekViewTitleLabel.foreground#fff
- pickerGroup.border#eb5bcb
- pickerGroup.foreground#eb5bcb
- progressBar.background#eb5bcb
- selection.background#9795F1
- sideBar.background#21222C
- sideBar.foreground#d8d7cb
- sideBarSectionHeader.background#282A36
- sideBarSectionHeader.foreground#d8d7cb
- sideBarTitle.foreground#d8d7cb
- statusBar.background#21222C
- statusBar.foreground#d8d7cb
- statusBarItem.prominentBackground#eb5bcb
- statusBarItem.prominentHoverBackground#ff9800
- tab.activeBackground#21252b
- tab.activeBorder#1de9b6
- tab.activeForeground#d8d7cb
- tab.hoverBackground#484c7f
- tab.inactiveBackground#282A36
- tab.inactiveForeground#d8d7cbBF
- titleBar.activeBackground#282c34
- titleBar.activeForeground#d8d7cb
- titleBar.inactiveBackground#21222C
- titleBar.inactiveForeground#7f848e
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| source | #d8d7cb | — |
| string, punctuation.definition.string | #00faac | |
| keyword.other.tsx | #d8d7cb | |
| comment.block, comment.block.documentation.phpdoc.php, string.quoted.docstring.multi.python, string.unquoted.heredoc.shell, comment.block.documentation.js, comment.block.html | #32afa9 | bold |
| comment, punctuation.definition.comment | #7f848e | italic |
| support.class.console.tsx, support.function.console, support.class.console, support.function.builtin.python, support.function.builtin, support.function.core.rust, support.function.swift, keyword.other | #ff4874 | — |
| punctuation.definition.group.regexp | #DF7599 | — |
| keyword.import, keyword.control.import, keyword.other.import, keyword.control.from, keyword.control.default, support.type.object.module.js, keyword.control.export, keyword.other.using.cs, meta.require.ruby, keyword.control.at-rule.import.scss, meta.at-rule.import.scss | #e040fb | italic |
| constant.language.boolean, constant.language, constant.numeric, constant.language.python, constant.language.java, constant.language.go, constant.other.boolean, constant.other.object, constant.language.symbol.hashkey.ruby, constant.language.null, constant.other.symbol.elixir, constant.other.symbol.double-quoted.elixir, constant.keyword.clojure | #FFC785 | |
| keyword.control, keyword.control.flow | #F7D009 | — |
| punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end | #FFC785 | — |
| punctuation.section.embedded.begin, punctuation.section.embedded.end | #d8d7cb | — |
| constant.character.escape | #d8d7cb | — |
| meta.jsx.children,punctuation.separator.comma, meta.brace.square, meta.brace.round, punctuation, constant.character.brace, constant.character.end | #f0efe2 | |
| keyword.operator.relational, keyword.operator.logical, keyword.operator.ternary, keyword.operator.comparison, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.type.annotation, keyword.operator.spread, keyword.operator.rest | #fff | |
| punctuation.decorator, punctuation.definition.annotation.java, punctuation.definition.decorator.python | #75dfbb | bold |
| meta.decorator, storage.type.annotation.java, entity.name.function.decorator.python | #FF9AA2 | bold |
| keyword.other.namespace.php, keyword.other.use.php, keyword.other.use-as.php, keyword.other.namespace.cs | #9795F1 | bold |
| meta.definition.function.ts, meta.definition.function.tsx, meta.definition.function.js, meta.definition.function.jsx, meta.definition.method.ts, meta.definition.method.tsx, meta.definition.method.js, meta.definition.method.jsx, entity.name.function.python | #f0efe2 | italic bold underline |
| storage.type.function, keyword.function, keyword.other.fn, storage.modifier.async, keyword.other.await.cs | #FFC785 | italic bold |
| meta.method.declaration, meta.function.tsx | #eb5bcb | |
| storage.type.function.arrow | #1de9b6 | bold |
| meta.function-call, meta.function-call.generic.python, support.function.go, support.function.any-method.builtin.less, support.function.kotlin, meta.method-call.coffee, source.elixir.embedded.source, entity.name.function.target.makefile | #3dc7b9 | bold |
| meta.object-literal.key | #75BBB9 | |
| support.constant | #75BBB9 | |
| variable.other.property, support.variable.property, variable.other.object.property, support.variable.object.node, variable.other.member.terraform | #FF9AA2 | |
| keyword.other.new, keyword.operator.new | #1de9b6 | bold |
| keyword.operator, variable.language.this, variable.language.this.java, variable.language.self, keyword.other.this | #EBCA57 | — |
| entity.name.type.class, entity.name.type.js, keyword.other.class.cs, storage.type.interface.ts, storage.type.interface.tsx, storage.type.type.ts, storage.type.type.tsx, storage.type.enum.ts, storage.type.enum.tsx, support.class, storage.class.std.rust, meta.class.instance.constructor.coffee, entity.name.type.interface.cs, meta.body.class.cpp | #EBCA57 | bold |
| keyword.other.interface.cs | #68bcd2 | bold |
| entity.other.inherited-class, meta.inheritance-clause.swift | #F5B5FC | italic |
| variable.other.readwrite.alias, storage.modifier.import.java, entity.name.import, entity.name.type.namespace.cs | #86cbee | — |
| storage.modifier, keyword.other.var.cs | #68bcd2 | italic |
| storage.type, keyword.declaration.stable.scala, keyword.other.declaration-specifier.swift, keyword.type.cs | #00cee6 | — |
| variable.other.assignment.go, meta.definition.variable, variable.other.readwrite, variable.other.constant, variable.other.php, constant.other.declaration.scala, variable.other.declaration.scala, variable.assignment.coffee, variable.other.ruby, variable.language.dart, entity.name.variable.property.cs, entity.name.variable.field.cs, entity.name.variable.local.cs, meta.body.function.definition.cpp, variable.language.elixir, variable.other.object, variable.other.makefile | #f181c4 | |
| variable.parameter, variable.parameter.function-call.python, parameter.variable.function.elixir | #DE8FFF | |
| source.tsx, source.ts, source.jsx, source.js | #eff195 | |
| variable.object.property | #f181c4 | |
| support.variable.object.process | #eff195 | |
| variable.other.enummember.ts, variable.other.enummember.tsx | #eff195 | |
| storage.type.function.tsx, storage.type.function.ts, storage.type.function.jsx, storage.type.function.js | — | bold |
| support.function.console | #eff195 | |
| meta.jsx.children.ts, meta.jsx.children.tsx, meta.jsx.children.js, meta.jsx.children.jsx | #f0efe2 | |
| keyword.operator.optional.ts, keyword.operator.optional.tsx | #F7D009 | |
| keyword.operator.type.tsx | #F7D009 | |
| entity.name.type.tsx, entity.name.type.ts, support.type.primitive.ts, support.type.builtin.ts, support.type.primitive.tsx, support.type.builtin.tsx, meta.type.annotation.tsx | #9795F1 | italic |
| meta.type.parameters.tsx, meta.definition.property.tsx | #00cee6 | — |
| variable.object.property.tsx, variable.object.property.ts | #68bcd2 | |
| punctuation.definition.typeparameters.begin.ts, punctuation.definition.typeparameters.end.ts, punctuation.definition.typeparameters.begin.tsx, punctuation.definition.typeparameters.end.tsx | #00cee6 | bold |
| meta.type.function.return.tsx, meta.return.type.tsx | #FFC9E7 | bold |
| keyword.generator.asterisk | #1de9b6 | bold |
| storage.type.class.jsdoc | #1de9b6 | bold |
| meta.embedded.block.graphql | #efca8c | |
| meta.arguments.graphql | #00CEE6 | |
| keyword.operator.nulltype.graphql | #00CEE6 | |
| string.unquoted.graphql | #75BBB9 | |
| punctuation.operation.graphql | #DF7599 | |
| variable.parameter.graphql | #DF7599 | |
| keyword.operation.graphql, support.type.graphql, support.type.builtin.graphql, support.type.enum.graphql, keyword.fragment.graphql | #72D6C9 | bold |
| keyword.type.graphql | #9795F1 | bold |
| keyword.input.graphql | #DF7599 | bold |
| keyword.enum.graphql | #FFC785 | bold |
| constant.character.enum.graphql | #FFC785 | bold |
| meta.type.object.graphql | #e5b0ea | bold |
| entity.name.tag, support.class.component, meta.tag.inline.any, entity.name.tag.localname.xml, source.svelte, source.jest.snap | #9795F1 | bold |
| meta.tag.attributes, entity.other.attribute-name.html, entity.other.attribute-name.localname.xml, entity.other.attribute-name.xml, entity.other.attribute-name.tsx, entity.other.attribute-name.tag.pug | #efca8c | |
| entity.name.tag.xml | #FF77AF | |
| text.xml, text.html.vue-html | #f0efe2 | |
| punctuation.definition.typeparameters, punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.tag.xml | #F7D009 | |
| entity.name.tag.script.html | #DF7599 | |
| meta.tag.inline.any.html, meta.tag.block.any.html | #f0efe2 | |
| entity.name.tag.style.html | #FFC785 | |
| text.html.derivative | #72D6C9 | |
| meta.directive.vue | #DF7599 | bold |
| keyword.blade | #FFC785 | bold |
| entity.name.tag.liquid | #DF7599 | |
| punctuation.tag.liquid, variable.other.liquid | #efca8c | |
| text.html.liquid | #F5B5FC | |
| punctuation.section.embedded.begin.erb, punctuation.section.embedded.end.erb | #00CEE6 | |
| source.ruby.embedded.erb | #DF7599 | |
| variable.scss, sass-script-maps, support.constant.property-value.css, variable.other.less, meta.property-value.css | #DF7599 | |
| meta.embedded.line.css | #DF7599 | |
| support.type.property-name.css | #FFC785 | |
| meta.property-list.scss, meta.property-list.css | #1DE9B6 | |
| keyword.other.important | #F7D009 | |
| entity.name.tag.css | #DE8FFF | bold |
| entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.class, entity.other.attribute-name.id.css | #9795F1 | bold |
| entity.other.attribute-name.pseudo-class.css | #1DE9B6 | bold italic |
| support.type.vendored.property-name.css | #FEC8FE | |
| constant.numeric.css, keyword.other.unit.px.css, keyword.other.unit.px.scss, support.constant.property-value.css, support.constant.font-name.css, support.constant.color.w3c-standard-color-name, keyword.other.unit | #00bfa5 | bold |
| punctuation.definition.keyword.scss | #F7D009 | bold |
| punctuation.section.property-list.begin.bracket.curly.css, punctuation.section.property-list.end.bracket.curly.css, punctuation.section.property-list.begin.bracket.curly.scss, punctuation.section.property-list.end.bracket.curly.scss | #FF77AF | bold |
| keyword.control.at-rule.media, keyword.operator.logical.scss, keyword.operator.logical.css, meta.at-rule.media.scss, keyword.control.operator.css | #00CEE6 | |
| support.constant.media.css, support.type.property-name.media | #FFC785 | |
| entity.other.attribute-name.pseudo-class | #00CEE6 | |
| entity.name.tag.reference.scss, entity.name.tag.wildcard.css, source.css | #00CEE6 | bold |
| comment.line.number-sign.shebang.shell | #9795F1 | bold |
| source.shell | #f0efe2 | bold |
| punctuation.definition.string.begin.shell | #FF9AA2 | bold |
| string.interpolated.dollar.shell, keyword.control.heredoc-token.shell | #FFC785 | bold |
| variable.other.positional.shell, punctuation.definition.variable.shell, variable.other.normal.shell | #DF7599 | bold |
| punctuation.definition.logical-expression.shell | #FFC785 | |
| meta.scope.if-block.shell | #00CEE6 | |
| heading.1.markdown | #a374d5 | bold |
| markup.inline.raw.string.markdown | #1de9b6 | bold |
| heading.2.markdown, heading.3.markdown, heading.4.markdown, heading.5.markdown, heading.6.markdown | #be97dc | bold |
| meta.paragraph.markdown | #75BBB9 | |
| punctuation.definition.list.begin.markdown | #FFC785 | |
| markup.underline.link.markdown | #cacfff | underline |
| string.other.link.title.markdown | #DF7599 | underline |
| string.other.link.description.markdown | #FF9AA2 | |
| punctuation.definition.string.begin.markdown | #F5B5FC | |
| punctuation.definition.bold.markdown | #efca8c | bold |
| punctuation.definition.italic.markdown | #efca8c | bold |
| markup.fenced_code.block.markdown | #8ed6ff | |
| source.env | #1de9b6 | |
| support.function.builtin.terraform | #FFC785 | |
| punctuation.definition.entity.ini, entity.other.attribute-name.table.array.toml, entity.other.attribute-name.table.toml | #DF7599 | |
| entity.name.section.group-title.ini, punctuation.definition.table.toml, punctuation.definition.table.array.toml | #FFC785 | |
| keyword.key.toml, keyword.other.definition.ini, entity.name.tag.yaml | #9795F1 | bold |
| support.type.property-name.json, variable.other.env | #9795F1 | bold |
| text.gitignore, source.ini,source.ignore | #cfd8dc | |
| support.type.project.buildscript.gradle, support.type.project.allprojects.gradle | #9795F1 | bold |
| source.gradle | #FFC785 | |
| meta.method.groovy | #DF7599 | |
| punctuation.definition.block.sequence.item.yaml | #f0efe2 | |
| source.nginx, constant.language.module | #9795F1 | |
| constant.language.module.core | #9795F1 | |
| source.nginx | #72D6C9 | |
| source.dockerfile | #72D6C9 | |
| keyword.other.special-method.dockerfile | #9795F1 | |
| keyword.other.sql,keyword.other.DML.sql | #DF7599 | bold |
| keyword.other.LUW.sql | #8ed6ff | bold |
| source.sql | #f0efe2 | |
| constant.other.database-name.sql | #be97dc | |
| keyword.other.alias.sql | #99e1e5 | |
| keyword.control.import.python | — | |
| source.python | #f181c4 | |
| meta.member.access.python | #8ed6ff | |
| storage.type.function.python | #FFC785 | bold |
| support.type.exception.python | #be97dc | |
| meta.function-call.arguments.python | #D8D7CB | |
| punctuation.separator.dict.python | #F6C3E5 | |
| keyword.operator.logical.python | #FF77AF | |
| support.function.builtin.python | #75BBB9 | |
| meta.item-access.arguments.python | #f0f696 | bold |
| meta.item-access.python | #9795F1 | bold |
| constant.character.format.placeholder.other.python | #9795F1 | bold |
| support.type.python | #9795F1 | italic |
| support.function.magic.python | #f0efe2 | |
| punctuation.definition.variable.php | #9795F1 | bold |
| keyword.other.function.use.php | #F7D009 | italic bold |
| entity.name.type.namespace.php | #FFC785 | bold |
| keyword.operator.class.php | #00CEE6 | bold |
| keyword.other.phpdoc.php | #3dc7b9 | bold |
| keyword.other.type.php | #249ef5 | bold |
| storage.modifier.extends.php, storage.type.class.php, storage.modifier.php, storage.modifier | #00CEE6 | bold |
| punctuation.section.embedded.begin.php | #EB64B9 | bold |
| support.other.namespace.php | #FFC785 | italic |
| keyword.blade | #EB64B9 | |
| keyword.operator.class.php | #FFC785 | |
| keyword.other.class.php | #00CEE6 | |
| meta.method.body.java | #00CEE6 | bold |
| keyword.other.package.java, keyword.other.kotlin | #DF7599 | bold |
| entity.name.package.scala | #DF7599 | bold |
| keyword.declaration.scala | #9795F1 | |
| entity.name.class.declaration, entity.name.class, meta.class.kotlin | #efca8c | |
| meta.block | #8ed6ff | |
| entity.name.type.go | #00cee6 | |
| keyword.struct.go | #DF7599 | |
| keyword.package.go | #DF7599 | bold |
| keyword.type.go, entity.name.package.go | #9795F1 | bold |
| keyword.operator.address.go | #1de9b6 | |
| meta.attribute.rust, entity.name.type.rust | #9795F1 | |
| source.rust | #f0efe2 | |
| keyword.other.rust | #be97dc | |
| storage.modifier.lifetime.rust | #DF7599 | |
| meta.type_params.rust | #DF7599 | |
| support.function.std.rust | #8ed6ff | |
| keyword.other.where.rust | #00CEE6 | |
| support.type.core.rust | #F7D009 | |
| keyword.other.declaration-specifier.accessibility.swift | #9795F1 | — |
| keyword.reserved.swift | #DE8FFF | — |
| meta.tag.swift | #00CEE6 | — |
| keyword.operator.comparison.coffee | #F7D009 | |
| punctuation.section.embedded.coffee | #DF7599 | |
| entity.name.type.module.ruby | #DF7599 | |
| constant.language.symbol.ruby | #8ed6ff | |
| keyword.other.special-method.ruby | #9795F1 | |
| keyword.declaration.dart | #9795F1 | |
| entity.name.variable.parameter.cs | #FF9AA2 | italic |
| punctuation.definition.typeparameters.begin.cs, punctuation.definition.typeparameters.end.cs | #00CEE6 | |
| entity.name.type.type-parameter.cs | #1de9b6 | |
| meta.body.namespace.cpp, entity.name.namespace.cpp, keyword.other.typedef.cpp | #8ed6ff | |
| keyword.operator.cpp | #F7D009 | |
| variable.other.macro.argument.cpp | #1de9b6 | |
| punctuation.separator.pointer-access.cpp | #1de9b6 | |
| entity.name.scope-resolution.template.definition.cpp, entity.name.scope-resolution.template.call.cpp, entity.name.scope-resolution.cpp | #FFC785 | |
| storage.modifier.reference.cpp, storage.modifier.pointer.cpp | #FFC785 | |
| storage.modifier.specifier.const.cpp | #FFC785 | |
| punctuation.section.regexp.begin.elixir,punctuation.section.list.begin.elixir,punctuation.section.embedded.elixir | #00CEE6 | |
| punctuation.section.expression.begin.clojure, punctuation.section.expression.end.trailing.clojure | #F7D009 | |
| entity.global.clojure | #00CEE6 | |
| meta.scope.recipe.makefile | #00CEE6 | |
| support.function.target.PHONY.makefile | #9795F1 | |
| meta.scope.prerequisites.makefile | #F7D009 |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...