Skip to main content
Coding Theme

Wizza

Publisher: Jeffrey OvermeerThemes in package: 1

Wizza is a dark theme for Visual Studio Code. The dark background provides a pleasant contrast. Specially optimized for HTML, CSS and Javascript coding.

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#20232A
  • activityBar.foreground#d7dae0
  • activityBarBadge.background#4d78cc
  • activityBarBadge.foreground#f8fafd
  • badge.background#20232A
  • button.background#404754
  • debugToolBar.background#15181B
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#15181B
  • dropdown.border#15181B
  • editor.background#20232A
  • editor.findMatchBackground#42557b
  • editor.findMatchBorder#457dff
  • editor.findMatchHighlightBackground#6199ff2f
  • editor.foreground#abb2bf
  • editor.lineHighlightBackground#2c313c
  • editor.selectionBackground#67769660
  • editor.selectionHighlightBackground#ffffff10
  • editor.selectionHighlightBorder#dddddd
  • editor.wordHighlightBackground#d2e0ff2f
  • editor.wordHighlightBorder#7f848e
  • editor.wordHighlightStrongBackground#abb2bf26
  • editor.wordHighlightStrongBorder#7f848e
  • editorActiveLineNumber.foreground#737984
  • editorBracketMatch.background#515a6b
  • editorBracketMatch.border#515a6b
  • editorCursor.background#ffffffc9
  • editorCursor.foreground#528bff
  • editorError.foreground#c24038
  • editorGroup.background#181a1f
  • editorGroup.border#181a1f
  • editorGroupHeader.tabsBackground#15181B
  • editorHoverWidget.background#15181B
  • editorHoverWidget.border#181a1f
  • editorIndentGuide.activeBackground#c8c8c859
  • editorIndentGuide.background#3b4048
  • editorLineNumber.activeForeground#abb2bf
  • editorLineNumber.foreground#495162
  • editorMarkerNavigation.background#15181B
  • editorRuler.foreground#abb2bf26
  • editorSuggestWidget.background#15181B
  • editorSuggestWidget.border#181a1f
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWarning.foreground#d19a66
  • editorWhitespace.foreground#3b4048
  • editorWidget.background#15181B
  • focusBorder#464646
  • input.background#1d1f23
  • list.activeSelectionBackground#2c313a
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#383e4a
  • list.highlightForeground#c5c5c5
  • list.hoverBackground#292d35
  • list.inactiveSelectionBackground#2c313a
  • list.inactiveSelectionForeground#d7dae0
  • list.warningForeground#d19a66
  • menu.foreground#c8c8c8
  • meta.objectliteral.js#82AAFF
  • panelSectionHeader.background#15181B
  • peekViewEditor.background#1b1d23
  • peekViewEditor.matchHighlightBackground#29244b
  • peekViewResult.background#22262b
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566660
  • scrollbarSlider.hoverBackground#5a637580
  • sideBar.background#15181B
  • sideBarSectionHeader.background#20232A
  • source.elm#5f7e97
  • statusBar.background#15181B
  • statusBar.debuggingBackground#cc6633
  • statusBar.debuggingBorder#66017a
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#15181B
  • statusBarItem.hoverBackground#2c313a
  • statusBarItem.remoteBackground#4d78cc
  • statusBarItem.remoteForeground#f8fafd
  • string.quoted.single.js#ffffff
  • tab.activeBackground#20232A
  • tab.activeForeground#dcdcdc
  • tab.border#181a1f
  • tab.hoverBackground#323842
  • tab.inactiveBackground#15181B
  • tab.unfocusedHoverBackground#323842
  • terminal.ansiBlack#3f4451
  • terminal.ansiBlue#4aa5f0
  • terminal.ansiBrightBlack#4f5666
  • terminal.ansiBrightBlue#4dc4ff
  • terminal.ansiBrightCyan#4cd1e0
  • terminal.ansiBrightGreen#a5e075
  • terminal.ansiBrightMagenta#de73ff
  • terminal.ansiBrightRed#ff616e
  • terminal.ansiBrightWhite#d7dae0
  • terminal.ansiBrightYellow#f0a45d
  • terminal.ansiCyan#42b3c2
  • terminal.ansiGreen#8cc265
  • terminal.ansiMagenta#c162de
  • terminal.ansiRed#e05561
  • terminal.ansiWhite#e6e6e6
  • terminal.ansiYellow#d18f52
  • terminal.background#20232A
  • terminal.border#abb2bf
  • terminal.foreground#abb2bf
  • terminal.selectionBackground#abb2bf30
  • textLink.foreground#61afef
  • titleBar.activeBackground#20232A
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#15181B
  • titleBar.inactiveForeground#6b717d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
markup.changed, meta.diff.header.git, meta.diff.header.from-file, meta.diff.header.to-file#a2bffc
markup.deleted.diff#EF535090
markup.inserted.diff#d1e993ff
Global settings#d6deeb
comment#b5b6b7
string#a8daa8
string.quoted, variable.other.readwrite.js#a8daa8
support.constant.math#d1e993
constant.numeric, constant.character.numeric#fc69a3
constant.language, punctuation.definition.constant, variable.other.constant#82AAFF
constant.character, constant.other#82AAFF
constant.character.escape#F78C6C
string.regexp, string.regexp keyword.other#5ca7e4
meta.function punctuation.separator.comma#5f7e97
variable#d1e993
punctuation.accessor, keyword#d2a8ee
storage, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx#d2a8ee
storage.type#d2a8ee
storage.type.function.arrow.js
entity.name.class, meta.class entity.name.type.class#ffcb8b
entity.other.inherited-class#d1e993
entity.name.function#d2a8ee
punctuation.definition.tag, meta.tag#b5b6b7
entity.name.tag, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html#F36A6C
entity.other.attribute-name#ffdd94
entity.name.tag.custom#f78c6c
support.function, support.constant#82AAFF
support.constant.meta.property-value#DBCA7F
support.type, support.class#d1e993
support.variable.dom#d1e993
invalid#ffffff
invalid.deprecated#ffffff
keyword.operator#DBCA7F
keyword.operator.relational#d2a8ee
keyword.operator.assignment#d2a8ee
keyword.operator.arithmetic#d2a8ee
keyword.operator.bitwise#d2a8ee
keyword.operator.increment#d2a8ee
keyword.operator.ternary#d2a8ee
comment.line.double-slash#637777
object#cdebf7
constant.language.null#ff5874
meta.brace#d6deeb
meta.delimiter.period#d2a8ee
punctuation.definition.string#d9f5dd
punctuation.definition.string.begin.markdown#ff5874
constant.language.boolean#ff5874
object.comma#ffffff
variable.parameter.function#DBCA7F
support.type.vendor.property-name, support.constant.vendor.property-value, support.type.property-name, meta.property-list entity.name.tag#80CBC4
meta.property-list entity.name.tag.reference#57eaf1
constant.other.color.rgb-value punctuation.definition.constant#F78C6C
constant.other.color#FFEB95
keyword.other.unit#FFEB95
meta.selector#d2a8ee
entity.other.attribute-name.id#FAD430
meta.property-name#80CBC4
entity.name.tag.doctype, meta.tag.sgml.doctype#d2a8ee
punctuation.definition.parameters#d9f5dd
keyword.control.operator#DBCA7F
keyword.operator.logical#d2a8ee
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property#baebe2
variable.other.object.property#faf39f
variable.other.object.js
entity.name.function#82AAFF
keyword.operator.comparison, keyword.control.flow.js, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.ruby, keyword.control.module.ruby, keyword.control.class.ruby, keyword.control.def.ruby, keyword.control.loop.js, keyword.control.loop.ts, keyword.control.import.js, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.from.js, keyword.control.from.ts, keyword.control.from.tsx, keyword.operator.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx#d2a8ee
keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.switch.js, keyword.control.switch.ts#d2a8ee
support.constant, keyword.other.special-method, keyword.other.new, keyword.other.debugger, keyword.control#DBCA7F
support.function#d1e993
invalid.broken#020e14
invalid.unimplemented#ffffff
invalid.illegal#ffffff
variable.language#DBCA7F
support.variable.property#DBCA7F
variable.function#82AAFF
variable.interpolation#ec5f67
meta.function-call#82AAFF
punctuation.section.embedded#d3423e
punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array#d6deeb
punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list#d9f5dd
string.template meta.template.expression#d3423e
string.template punctuation.definition.string#d6deeb
italic#d2a8ee
bold#d1e993bold
quote#697098
raw#80CBC4
variable.assignment.coffee#31e1eb
variable.parameter.function.coffee#d6deeb
variable.assignment.coffee#DBCA7F
variable.other.readwrite.cs#d6deeb
entity.name.type.class.cs, storage.type.cs#ffcb8b
entity.name.type.namespace.cs#B2CCD6
string.unquoted.preprocessor.message.cs#d6deeb
punctuation.separator.hash.cs, keyword.preprocessor.region.cs, keyword.preprocessor.endregion.cs#ffcb8bbold
variable.other.object.cs#B2CCD6
entity.name.type.enum.cs#d1e993
string.interpolated.single.dart, string.interpolated.double.dart#FFCB8B
support.class.dart#FFCB8B
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css, support.constant.property-value.css#FFB163
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#DBCA7F
keyword.other.unit.css#FFEB95
meta.attribute-selector.css entity.other.attribute-name.attribute, variable.other.readwrite.js#F78C6C
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#82AAFF
source.elixir entity.name.function#d1e993
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#82AAFF
source.elixir punctuation.definition.string#d1e993
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#d1e993
source.elixir .punctuation.binary.elixir#d2a8ee
constant.keyword.clojure#DBCA7F
source.go meta.function-call.go#DDDDDD
source.go keyword.package.go, source.go keyword.import.go, source.go keyword.function.go, source.go keyword.type.go, source.go keyword.struct.go, source.go keyword.interface.go, source.go keyword.const.go, source.go keyword.var.go, source.go keyword.map.go, source.go keyword.channel.go, source.go keyword.control.go#d2a8ee
source.go constant.language.go, source.go constant.other.placeholder.go#ff5874
entity.name.function.preprocessor.cpp, entity.scope.name.cpp#DBCA7Fff
meta.namespace-block.cpp#e0dec6
storage.type.language.primitive.cpp#ff5874
meta.preprocessor.macro.cpp#d6deeb
variable.parameter#ffcb8b
variable.other.readwrite.powershell#82AAFF
support.function.powershell#DBCA7Fff
entity.other.attribute-name.id.html#d1e993
punctuation.definition.tag.html#6ae9f0
meta.tag.sgml.doctype.html#d2a8ee
meta.class entity.name.type.class.js#ffcb8b
meta.method.declaration storage.type.js#82AAFF
terminator.js#d6deeb
meta.js punctuation.definition.js#d6deeb
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc#5f7e97
variable.other.jsdoc, variable.other.phpdoc#78ccf0
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other#d6deeb
variable.parameter.function.js#7986E7
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx#d6deeb
variable.js, variable.other.js#d6deeb
entity.name.type.js, entity.name.type.module.js#ffcb8b
support.class.js#d6deeb
support.type.property-name.json#DBCA7F
support.constant.json#d1e993
meta.structure.dictionary.value.json string.quoted.double#c789d6
string.quoted.double.json punctuation.definition.string.json#80CBC4
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#ff5874
variable.other.object.js#DBCA7F
variable.other.ruby#d6deeb
entity.name.type.class.ruby#ecc48d
constant.language.symbol.hashkey.ruby#DBCA7F
constant.language.symbol.ruby#DBCA7F
entity.name.tag.less#DBCA7F
keyword.other.unit.css#FFEB95
meta.attribute-selector.less entity.other.attribute-name.attribute#F78C6C
markup.heading.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#82b1ff
markup.italic.markdown#d2a8ee
markup.bold.markdown#d1e993bold
markup.quote.markdown#697098
markup.inline.raw.markdown#80CBC4
markup.underline.link.markdown, markup.underline.link.image.markdown#ff869a
string.other.link.title.markdown, string.other.link.description.markdown#d6deeb
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string#82b1ff
punctuation.definition.metadata.markdown#DBCA7F
beginning.punctuation.definition.list.markdown#82b1ff
markup.inline.raw.string.markdown#d1e993
variable.other.php, variable.other.property.php#bec5d4
support.class.php#ffcb8b
meta.function-call.php punctuation#d6deeb
variable.other.global.php#d1e993
variable.other.global.php punctuation.definition.variable#d1e993
constant.language.python#ff5874
variable.parameter.function.python, meta.function-call.arguments.python#82AAFF
meta.function-call.python, meta.function-call.generic.python#B2CCD6
punctuation.python#d6deeb
entity.name.function.decorator.python#d1e993
source.python variable.language.special#8EACE3
keyword.control#d2a8ee
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass#d1e993
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#82AAFF
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#bec5d4
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute#F78C6C
entity.name.tag.scss, entity.name.tag.sass#DBCA7F
keyword.other.unit.scss, keyword.other.unit.sass#FFEB95
variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.object.ts, variable.other.object.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts#d6deeb
entity.name.type.ts, entity.name.type.tsx#ffcb8b
support.class.node.ts, support.class.node.tsx#82AAFF
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type#5f7e97
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block#d6deeb
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#82AAFF
meta.tag.js meta.jsx.children.tsx#82AAFF
entity.name.tag.yaml#DBCA7F
variable.other.readwrite.js, variable.parameter#d7dbe0
support.class.component.js, support.class.component.tsx#f78c6c
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#d6deeb
meta.class entity.name.type.class.tsx#ffcb8b
entity.name.type.tsx, entity.name.type.module.tsx#ffcb8b
meta.class.ts meta.var.expr.ts storage.type.ts, meta.class.tsx meta.var.expr.tsx storage.type.tsx#D2A8EE
meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx#82AAFF
meta.property-list.css meta.property-value.css variable.other.less, meta.property-list.scss variable.scss, meta.property-list.sass variable.sass, meta.brace, keyword.operator.operator, keyword.operator.or.regexp, keyword.operator.expression.in, keyword.operator.relational, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.type, keyword.operator, keyword, punctuation.definintion.string, punctuation, variable.other.readwrite.js, storage.type, source.css, string.quoted
Wizza by Jeffrey Overmeer - VS Code Theme