Ion Theme
Publisher: Marko MilicThemes in package: 4
Dark and Light themes for Visual Studio Code
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.activeBorder#0078d4
- activityBar.background#F7F8FA
- activityBar.border#EBECF0
- activityBar.foreground#000
- activityBarBadge.background#BCBEC4
- activityBarBadge.foreground#191a1c
- breadcrumb.background#F7F8FA
- commandCenter.activeBackground#2e5ec1
- commandCenter.activeBorder#27282E
- commandCenter.background#3369d6
- commandCenter.border#27282E
- commandCenter.inactiveBorder#383A42
- debugToolBar.background#F7F8FA
- editor.background#ffffff
- editor.findMatchBackground#A6D2FF
- editor.findMatchBorder#0004
- editor.findMatchHighlightBackground#FCBD3866
- editor.foreground#000000
- editor.lineHighlightBackground#F5F8FE
- editor.selectionBackground#A6D2FF
- editor.selectionHighlightBackground#DDDBFC7F
- editor.wordHighlightBackground#DDDBFC80
- editor.wordHighlightStrongBackground#FCD8E87F
- editorGroupHeader.noTabsBackground#F7F8FA
- editorGroupHeader.tabsBackground#F7F8FA
- editorGroupHeader.tabsBorder#EBECF0
- editorGutter.background#fff
- editorIndentGuide.activeBackground#AEB3C2
- editorIndentGuide.background#EBECF0
- editorInlayHint.background#fafafa
- editorInlayHint.foreground#999
- editorLineNumber.activeForeground#767A8A
- editorLineNumber.dimmedForeground#767A8A
- editorLineNumber.foreground#b9beca
- editorOverviewRuler.background#F7F8FA
- editorOverviewRuler.border#F7F8FA
- editorWidget.background#F7F8FA
- editorWidget.border#EBECF0
- focusBorder#AEB3C2
- gitDecoration.addedResourceForeground#3e7718
- gitDecoration.modifiedResourceForeground#0050c1
- list.activeSelectionBackground#CFDEFC
- list.activeSelectionForeground#000
- list.focusAndSelectionOutline#CFDEFC
- list.focusBackground#dfdfdf
- list.focusForeground#000
- list.focusOutline#dfdfdf
- list.hoverBackground#dfdfdf
- list.hoverForeground#000
- list.inactiveSelectionBackground#dfdfdf
- list.inactiveSelectionForeground#000
- minimap.background#F7F8FA
- minimapSlider.background#3a3a3a33
- panel.background#F7F8FA
- panel.border#EBECF0
- panelSection.border#EBECF0
- panelSectionHeader.background#F7F8FA
- panelSectionHeader.border#EBECF0
- scrollbarSlider.background#3a3a3a33
- sideBar.background#F7F8FA
- sideBar.border#EBECF0
- sideBar.foreground#000000
- sideBarSectionHeader.background#F7F8FA
- sideBarSectionHeader.border#EBECF0
- statusBar.background#F7F8FA
- statusBar.border#EBECF0
- statusBar.debuggingBackground#5EB563
- statusBar.debuggingForeground#000
- statusBar.foreground#000
- statusBar.noFolderBackground#F7F8FA
- statusBarItem.remoteBackground#F7F8FA
- statusBarItem.remoteForeground#000
- tab.activeBackground#F9FEF9
- tab.activeBorder#005bc3
- tab.activeForeground#000
- tab.border#EBECF0
- tab.hoverForeground#000
- tab.inactiveBackground#F7F8FA
- tab.inactiveForeground#777
- terminal.ansiBlack#6e6e6e
- terminal.ansiBlue#0087ff
- terminal.ansiBrightBlack#1c1c1c
- terminal.ansiBrightBlue#808080
- terminal.ansiBrightCyan#8a8a8a
- terminal.ansiBrightGreen#585858
- terminal.ansiBrightMagenta#5f5faf
- terminal.ansiBrightRed#d75f00
- terminal.ansiBrightWhite#ffffd7
- terminal.ansiBrightYellow#626262
- terminal.ansiCyan#00afaf
- terminal.ansiGreen#5f8700
- terminal.ansiMagenta#af005f
- terminal.ansiRed#d70000
- terminal.ansiWhite#e4e4e4
- terminal.ansiYellow#af8700
- terminal.background#FFF
- terminal.foreground#000000
- titleBar.activeBackground#FFFFFF
- titleBar.activeForeground#080808
- titleBar.border#00000000
- titleBar.inactiveBackground#FFFFFF
- titleBar.inactiveForeground#6C707E
- tree.indentGuidesStroke#AEB3C2
- widget.border#EBECF0
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #8C8C8C | italic |
| string, string.quoted, string.template, punctuation.definition.string | #067D17 | — |
| constant.character.escape, string.quoted constant.character.escape | #0037A6 | — |
| constant.numeric | #1750EB | — |
| constant.language.boolean | #0033B3 | — |
| constant, constant.language, constant.character | #0033B3 | — |
| keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete, keyword.operator.typeof, keyword.operator.instanceof, keyword.operator.void, keyword.operator.in, keyword.operator.of | #0033B3 | — |
| storage.type, storage.modifier | #0033B3 | — |
| keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.relational, keyword.operator.bitwise, keyword.operator.increment, keyword.operator.decrement, keyword.operator.ternary, punctuation.separator.key-value | #000000 | — |
| punctuation, punctuation.definition, punctuation.terminator, punctuation.separator, punctuation.section, punctuation.accessor, meta.brace | #000000 | — |
| entity.name.function, meta.function-call entity.name.function, support.function, meta.method.identifier entity.name.function | #00627A | — |
| meta.method entity.name.function, meta.method.declaration entity.name.function | #00627A | — |
| entity.name.class, entity.name.type.class, entity.name.type, support.class, support.type | #000000 | — |
| entity.name.type.interface, entity.other.inherited-class | #000000 | — |
| entity.name.type.enum | #000000 | — |
| entity.name.namespace, entity.name.module, entity.name.type.module | #000000 | — |
| variable, variable.other, variable.language | #000000 | — |
| variable.parameter, meta.parameter | #000000 | — |
| variable.other.property, variable.other.object.property, meta.object-literal.key, support.variable.property | #871094 | — |
| entity.name.type.parameter, storage.type.generic | #007E8A | — |
| meta.decorator, entity.name.function.decorator, storage.type.annotation, punctuation.definition.annotation, meta.annotation | #9E880D | — |
| entity.name.tag, punctuation.definition.tag, meta.tag.sgml | #0033B3 | — |
| entity.other.attribute-name | #000000 | — |
| support.function.builtin, support.variable.dom, support.constant | #00627A | — |
| invalid, invalid.illegal | #DE1B2E | — |
| invalid.deprecated | #000000 | strikethrough |
| string.regexp, constant.other.character-class.regexp, constant.character.escape.backslash.regexp | #264EFF | — |
| *url*, *link*, *uri* | — | underline |
| markup.heading, markup.heading entity.name, entity.name.section | #0033B3 | bold |
| markup.bold, punctuation.definition.bold | — | bold |
| markup.italic, punctuation.definition.italic | — | italic |
| markup.underline | — | underline |
| markup.inline.raw, markup.fenced_code, markup.raw | #067D17 | — |
| markup.quote | #8C8C8C | italic |
| markup.underline.link, string.other.link | #006DCC | — |
| markup.list, punctuation.definition.list | #000000 | — |
| markup.inserted | #067D17 | — |
| markup.deleted | #DE1B2E | — |
| markup.changed | #0033B3 | — |
| support.type.property-name.json, source.json meta.structure.dictionary.json string.quoted.double.json | #871094 | — |
| source.json meta.structure.dictionary.value.json string.quoted.double.json | #067D17 | — |
| entity.name.tag.yaml | #0033B3 | — |
| entity.name.type.anchor.yaml, punctuation.definition.anchor.yaml, variable.other.alias.yaml | #0000E6 | — |
| support.type.property-name.css, meta.property-name.css | #0033B3 | — |
| support.constant.property-value.css, meta.property-value.css | #000000 | — |
| entity.other.attribute-name.class.css, entity.other.attribute-name.id.css | #9E880D | — |
| keyword.other.unit.css | #1750EB | — |
| entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css | #9E880D | — |
| entity.name.tag.html, punctuation.definition.tag.html | #0033B3 | — |
| entity.other.attribute-name.html | #000000 | — |
| string.quoted.double.html, string.quoted.single.html | #067D17 | — |
| entity.name.tag.xml, entity.name.tag.localname.xml | #0033B3 | — |
| entity.other.attribute-name.xml | #000000 | — |
| entity.name.tag.namespace.xml | #008077 | — |
| variable.other.normal.shell, punctuation.definition.variable.shell | #000000 | — |
| support.function.builtin.shell | #0033B3 | — |
| keyword.other.sql, keyword.other.DML.sql | #0033B3 | — |
| source.java, meta.class.java, meta.class.body.java, meta.method.java, meta.method.body.java | #000000 | — |
| punctuation.definition.parameters.varargs.java, punctuation.separator.delimiter.java, punctuation.definition.annotation-arguments.begin.bracket.round.java, punctuation.definition.annotation-arguments.end.bracket.round.java, source.java punctuation.definition.parameters.begin.bracket.round.java, source.java punctuation.definition.parameters.end.bracket.round.java, source.java punctuation.terminator.java, source.java punctuation.separator.period.java, source.java meta.brace.round.java, source.java meta.brace.square.java, source.java meta.brace.curly.java | #000000 | — |
| storage.type.annotation.java, punctuation.definition.annotation.java | #9E880D | — |
| storage.modifier.package.java, storage.modifier.import.java | #0033B3 | — |
| storage.type.java, storage.type.object.array.java, storage.type.generic.java | #000000 | — |
| meta.method.identifier.java entity.name.function.java | #00627A | — |
| variable.other.definition.java | #000000 | — |
| meta.method.body.java meta.definition.variable.java variable.other.definition.java | #000000 | underline |
| source.kotlin, meta.class.kotlin, meta.class.body.kotlin | #000000 | — |
| storage.type.annotation.kotlin, punctuation.definition.annotation.kotlin | #9E880D | — |
| entity.name.function.kotlin | #00627A | — |
| source.ts, source.tsx | #000000 | — |
| entity.name.type.ts, entity.name.type.tsx, support.type.primitive.ts, support.type.primitive.tsx | #000000 | — |
| entity.name.type.interface.ts, entity.name.type.interface.tsx | #000000 | — |
| entity.name.type.enum.ts, entity.name.type.enum.tsx | #000000 | — |
| entity.name.type.module.ts, entity.name.type.module.tsx | #000000 | — |
| entity.name.namespace.ts, entity.name.namespace.tsx | #000000 | — |
| entity.name.type.parameter.ts, entity.name.type.parameter.tsx | #007E8A | — |
| source.js, source.jsx | #000000 | — |
| variable.other.readwrite.js, variable.other.readwrite.jsx | #2A8C7C | — |
| variable.other.constant.js, variable.other.constant.jsx | #871094 | — |
| variable.language.this.js, variable.language.this.jsx, support.variable.dom.js, support.variable.object.process.js, support.variable.object.node.js | #830091 | — |
| string.regexp.js, string.regexp.jsx | #264EFF | — |
| entity.name.tag.jsx, punctuation.definition.tag.jsx, entity.name.tag.tsx, punctuation.definition.tag.tsx | #AD6339 | — |
| support.class.component.jsx, support.class.component.tsx | #AD6339 | — |
| source.python | #000000 | — |
| variable.language.self.python, variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python | #0033B3 | — |
| support.function.magic.python | #0033B3 | italic |
| entity.name.function.decorator.python, meta.function.decorator.python | #9E880D | — |
| meta.fstring.python, storage.type.string.python | #067D17 | — |
| source.go | #000000 | — |
| entity.name.package.go | #805900 | — |
| entity.name.import.go | #067D17 | — |
| entity.name.function.go, support.function.go | #286D73 | — |
| entity.name.type.go, support.type.go, storage.type.go | #336ECC | — |
| support.function.builtin.go, constant.language.go | #0033B3 | — |
| source.rust | #000000 | — |
| entity.name.type.lifetime.rust, punctuation.definition.lifetime.rust | #007E8A | — |
| entity.name.function.macro.rust, meta.macro.rust | #0033B3 | — |
| meta.attribute.rust, punctuation.definition.attribute.rust | #9E880D | — |
| variable.language.self.rust | #0033B3 | — |
| source.c, source.cpp | #000000 | — |
| meta.preprocessor.c, meta.preprocessor.cpp, keyword.control.directive.c, keyword.control.directive.cpp | #0033B3 | — |
| entity.name.function.preprocessor.c, entity.name.function.preprocessor.cpp | #0033B3 | — |
| source.cs | #000000 | — |
| meta.attribute.cs | #9E880D | — |
| source.groovy | #000000 | — |
| storage.type.annotation.groovy, punctuation.definition.annotation.groovy | #9E880D | — |
| meta.interpolation.groovy, punctuation.section.embedded.groovy | #000000 | — |
| source.php, text.html.php | #000000 | — |
| variable.other.php, punctuation.definition.variable.php | #000000 | — |
| source.ruby | #000000 | — |
| constant.language.symbol.ruby, punctuation.definition.symbol.ruby | #871094 | — |
| source.scala | #000000 | — |
| entity.name.class.annotation.scala | #9E880D | — |
| source.swift | #000000 | — |
| meta.attribute.swift, storage.modifier.attribute.swift | #9E880D | — |
| source.dart | #000000 | — |
| storage.type.annotation.dart | #9E880D | — |
| entity.name.tag.template.html.vue | #0033B3 | — |
| source.graphql | #000000 | — |
| support.type.graphql, entity.name.type.graphql | #000000 | — |
| keyword.other.special-method.dockerfile | #0033B3 | — |
| entity.name.function.target.makefile | #00627A | — |
| variable.other.makefile | #871094 | — |
| entity.name.section.group-title.ini | #9E880D | — |
| keyword.other.definition.ini | #0033B3 | — |
| keyword.key.toml, support.type.property-name.toml | #0033B3 | — |
| entity.name.table.toml, support.type.property-name.table.toml | #9E880D | — |
| support.constant.property-value.properties, keyword.other.definition.properties | #0083080 | — |
| markup.inserted.diff, meta.diff.header.to-file | #067D17 | — |
| markup.deleted.diff, meta.diff.header.from-file | #DE1B2E | — |
| markup.changed.diff | #0033B3 | — |
| meta.diff.range.unified | #9E880D | — |
| log.error, markup.error.log | #DE1B2E | — |
| log.warning, markup.warning.log | #8C4F00 | — |
| log.info, markup.info.log | #0033B3 | — |
| log.date, constant.other.timestamp.log | #9E880D | — |
| keyword.todo, comment.line.todo, keyword.other.todo | #008DDE | italic |
| keyword.fixme, comment.line.fixme, keyword.other.fixme | #DE1B2E | italic bold |