Dragan Color Theme
Publisher: Milad FathyThemes in package: 1
A Beautiful Dark Color Theme For VSCode
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#00BCD4
- activityBar.activeFocusBorder#00BCD4
- activityBar.background#121315
- activityBar.foreground#e7e7e7
- activityBarBadge.background#00BCD4
- activityBarBadge.foreground#f0f0f0
- breadcrumb.background#121315
- breadcrumb.focusForeground#00BCD4
- breadcrumb.foreground#e0e0e0
- breadcrumbPicker.background#1b1b1d
- button.background#04a1b6f6
- button.foreground#f0f0f0
- button.hoverBackground#00bbd4a8
- checkbox.border#00BCD4
- checkbox.foreground#00BCD4
- diffEditor.insertedTextBackground#66f0c213
- dropdown.background#202124
- dropdown.border#00BCD4
- dropdown.foreground#eeeeee
- editor.background#17181a
- editor.findMatchBorder#00BCD4
- editor.foldBackground#17181A
- editor.foreground#e2e2e2ec
- editor.lineHighlightBackground#2e2e2e52
- editor.selectionBackground#a0a0a033
- editor.selectionHighlightBackground#47474754
- editor.wordHighlightBackground#343F56
- editorCursor.foreground#00BCD4
- editorGroupHeader.tabsBackground#121315
- editorGroupHeader.tabsBorder#dfdfdf44
- editorGutter.addedBackground#00BCD4
- editorGutter.modifiedBackground#938464
- editorHoverWidget.background#17181a
- editorHoverWidget.foreground#cecece
- editorIndentGuide.background#97a7c826
- editorLineNumber.activeForeground#fffffff8
- editorLineNumber.foreground#94949460
- editorSuggestWidget.background#212224
- editorSuggestWidget.border#585858
- editorSuggestWidget.foreground#cecece
- editorSuggestWidget.highlightForeground#00BCD4
- editorSuggestWidget.selectedBackground#1c423cc5
- editorWhitespace.foreground#3b3a32
- editorWidget.background#17181a
- focusBorder#535353
- foreground#dadada
- gitDecoration.ignoredResourceForeground#3D4D67
- gitDecoration.modifiedResourceForeground#E3C18A
- gitDecoration.untrackedResourceForeground#70CA8E
- input.background#202124
- input.border#dfdfdf23
- input.foreground#f0f0f0
- input.placeholderForeground#c0c0c06e
- inputOption.activeBorder#00BCD4
- inputOption.activeForeground#f0f0f0
- list.activeSelectionBackground#e6e6e609
- list.activeSelectionForeground#ffffff
- list.deemphasizedForeground#00BCD4
- list.focusBackground#1a1a17
- list.focusForeground#fff
- list.focusOutline#c0c0c06e
- list.highlightForeground#00BCD4
- list.hoverBackground#1E1F21
- list.inactiveSelectionBackground#e6e6e609
- list.inactiveSelectionForeground#D5D9E2
- menu.selectionForeground#00BCD4
- menubar.selectionForeground#00BCD4
- notificationLink.foreground#f8f8f8
- panel.background#121315
- panel.border#121315
- panel.dropBorder#00BCD4
- panelInput.border#00BCD4
- panelTitle.activeBorder#00BCD4
- panelTitle.activeForeground#ffff
- pickerGroup.foreground#00BCD4
- progressBar.background#00BCD4
- scrollbarSlider.activeBackground#ffffff50
- scrollbarSlider.background#252526
- scrollbarSlider.hoverBackground#2b2b2b
- settings.dropdownBorder#00BCD4
- settings.headerForeground#00BCD4
- settings.modifiedItemIndicator#00BCD4
- sideBar.background#121315
- sideBarSectionHeader.background#121315
- sideBarSectionHeader.border#121315
- sideBarSectionHeader.foreground#00BCD4
- sideBarTitle.foreground#00BCD4
- statusBar.background#121315
- statusBar.border#121315
- statusBar.foreground#e8e8e8
- statusBar.noFolderBackground#121315
- statusBar.noFolderBorder#121315
- statusBarItem.activeBackground#00BCD4
- statusBarItem.hoverBackground#9797970a
- tab.activeBackground#292828b4
- tab.hoverBackground#292828b4
- tab.inactiveBackground#17181ac9
- tab.inactiveForeground#f0f0f0
- tab.unfocusedInactiveForeground#00BCD4
- terminal.ansiBlack#090300
- terminal.ansiBlue#01A0E4
- terminal.ansiBrightBlack#f38028
- terminal.ansiBrightBlue#01A0E4
- terminal.ansiBrightCyan#ff0ff3
- terminal.ansiBrightGreen#01A252
- terminal.ansiBrightMagenta#eb64cb
- terminal.ansiBrightRed#0a37ff
- terminal.ansiBrightWhite#240ee2
- terminal.ansiBrightYellow#FDED02
- terminal.ansiCyan#0ba9dd
- terminal.ansiGreen#01A252
- terminal.ansiMagenta#A16A94
- terminal.ansiRed#DB2D20
- terminal.ansiWhite#f37676
- terminal.ansiYellow#FDED02
- terminal.background#17181a
- terminal.border#474646
- terminalCursor.background#f53131
- textLink.foreground#00BCD4
- titleBar.activeBackground#121315
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| entity.name.tag | #00B2FF | — |
| entity.other.attribute-name | #fed404ea | — |
| entity.other.attribute-name.class.css | #c34ef1c7 | bold |
| entity.other.keyframe-offset.percentage.css, entity.other.keyframe-offset.css | #37E7AC | — |
| variable.parameter.keyframe-list.css | #FED604 | — |
| support.type.property-name.media.css | #F39C12 | — |
| support.function.misc.css | #F39C12 | — |
| support.function.calc.css | #F39C12 | — |
| support.function.gradient.css | #F39C12 | — |
| variable.css | #f15a4c | — |
| variable.argument.css | #f15a4c | — |
| meta.at-rule.media.header.css | #f15a4c | — |
| entity.other.attribute-name.pseudo-class.css | #d63384 | — |
| meta.tag.other, entity.name.tag.style, entity.name.tag.script, meta.tag.block.script, source.js.embedded punctuation.definition.tag.html, source.css.embedded punctuation.definition.tag.html | #1ab2f8 | — |
| text.html.derivative | #c5c5c5 | — |
| meta.tag.metadata.meta.void.html,punctuation.separator.key-value.html | #FED604 | — |
| meta.attribute.border.html | #FED604 | — |
| entity.other.attribute-name.id.html | #f64ab475 | — |
| punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end | #0587c4 | — |
| meta.tag string -source -punctuation, text source text meta.tag string -punctuation | #37E7AC | — |
| punctuation.section.embedded -(source string source punctuation.section.embedded), meta.brace.erb.html | #D0B344 | — |
| meta.toc-list.id | #88F2AF | — |
| string.quoted.double.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html, string.quoted.double.handlebars | #37E7AC | — |
| support.type.property-name.css | #37E7AC | — |
| meta.property-list.css | #FED604 | — |
| entity.other.attribute-name.id.css | #CC6699 | bold |
| punctuation.separator.list.comma.css | #c5c5c5 | — |
| keyword.other.unit | #FED604 | — |
| entity.name.tag.css, meta.selector.css | #00B2FF | bold |
| keyword.control.at-rule.media.css | #ab54fd | — |
| constant.other.color.rgb-value.hex.css | #FED604 | — |
| meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css | #FED604 | — |
| support.constant.color.current.css | #FED604 | — |
| constant.numeric.css | #FED604 | — |
| punctuation.definition.string.begin.css,string.quoted.double.css,punctuation.definition.string.end.css,string.quoted.double.css | #FED604 | — |
| entity.other.attribute-name.css | #37E7AC | — |
| keyword.operator.pattern.css | #37E7AC | — |
| string.quoted.double.json | #21fd6b | — |
| support.type.property-name.json | #FED604 | — |
| punctuation.definition.string.end.json,punctuation.definition.string.begin.json | #21fd6b | — |
| constant.language.json | #f533db | — |
| constant.numeric.json | #f15a4c | — |
| constant.numeric.json | #f15a4c | — |
| source.shell | #f15a4c | — |
| string.unquoted.plain.out.yaml | #f15a4c | — |
| constant.language.boolean.yaml | #FED604 | — |
| constant.numeric.integer.yaml | #F39C12 | — |
| source.ignore | #F39C12 | — |
| string.quoted.single.js,punctuation.definition.string.end.js,punctuation.definition.string.begin.js | #21fd6b | — |
| string.quoted.double.js | #21fd6b | — |
| meta.object-literal.key.js | #f15a4c | — |
| keyword.control.default.js | #f15a4c | — |
| switch-block.expr.js | #f15a4c | — |
| meta.object.member.js | #E2E2E2EC | — |
| punctuation.separator.parameter.js | #E2E2E2EC | — |
| punctuation.definition.section.case-statement.js | #E2E2E2EC | — |
| storage.modifier.async.js,constant.language.null.js,constant.language.undefined.js | #2493fa | bold |
| constant.language.boolean.true.js | #46fc55 | — |
| constant.language.boolean.false.js | #ee1f18 | — |
| support.type.object.module.js | #F39C12 | — |
| punctuation.terminator.statement.js,punctuation.separator.comma.js | #aaa8a8ec | — |
| variable.other.readwrite.js,meta.definition.variable.js,meta.var-single-variable.expr.js | #00ffd9 | bold |
| variable.language.this.js, variable.language.this.ts | #f859b1 | bold |
| entity.other.inherited-class.js | #f859b1 | underline bold |
| support.class.builtin.js | #f859b1 | bold |
| variable.other.readwrite.alias.js,meta.var.expr.js | #FED604 | bold |
| variable.parameter.js | #00ffd9 | — |
| string.template.js,punctuation.definition.string.template.begin.js,punctuation.definition.string.template.end.js | #21fd6b | bold |
| meta.template.expression.js,punctuation.definition.template-expression.begin.js, | #21fd6b | bold |
| comment.block.js. comment.line.double-slash.js | — | bold |
| punctuation.definition.template-expression.begin.js, | #21fd6b | bold |
| keyword.control.import.js,meta.import.js, keyword.control.from.js | — | bold |
| punctuation.definition.template-expression.end.js | #4d595f | — |
| punctuation.definition.template-expression.begin.js | #4d595f | — |
| meta.embedded.line.js | #00ffd9 | — |
| meta.function-call.js,variable.other.object.js | #F39C12 | bold |
| entity.name.function.js,support.variable.property.js,variable.other.property.js | #FED604 | bold |
| storage.type.js,storage.type.function.js,storage.type.class.js,storage.type.function.arrow.js,torage.modifier.js,meta.class.js | #b267e6 | bold |
| entity.name.type.class.js | #f859b1 | — |
| constant.numeric.decimal.js | #F39C12 | — |
| punctuation.section.embedded.begin.php | #aa95f7 | bold |
| punctuation.section.embedded.end.php | #aa95f7 | bold |
| punctuation.definition.variable | #E26674 | bold |
| variable.other.php,variable.other.global.php,variable.other.property.php | #E26674 | bold |
| constant.numeric.decimal.php | #F39C12 | — |
| support.function.construct.output.php,meta.function-call.php,support.class.php | #F39C12 | bold |
| string.quoted.single.php,string.quoted.double.php | #00ffd9 | — |
| constant.language.php | #FED604 | bold |
| storage.type.function.php,storage.type.php,storage.type.php,meta.function.parameter.typehinted.php,storage.type.class.php,storage.modifier.php,storage.modifier.extends.php,storage.type.trait.php,storage.modifier.final.php | #b267e6 | bold |
| entity.name.function.php,support.function.constructor.php,support.function.magic.php,support.class.builtin.php | #FED604 | bold |
| storage.modifier.implements.php | #b267e6 | bold |
| entity.name.type.class.php,variable.language.this.php,entity.name.type.trait.php | #f859b1 | bold |
| entity.other.inherited-class.php | #f859b1 | bold underline |
| entity.other.alias.php | #f859b1 | bold |
| support.class.php,meta.use.php | #f859b1 | bold |
| variable.other.global.safer.php | #E26674 | bold |
| variable.other.class.php | #E26674 | bold |
| support.function.construct.php, meta.array.php | #F39C12 | bold |
| constant.other.class.php | #F39C12 | bold |
| constant.other.php | #F39C12 | bold |
| support.other.namespace.php | #fca420 | |
| entity.name.type.namespace.php | #fca420 | |
| keyword.other.sql, keyword | #b267e6 | — |
| support.function.table.sql, source.sql | #37E7AC | — |
| keyword.operator.comparison.sql, source.sql | #0C88FF | — |
| keyword.other.DML.sql | #f8ec40 | — |
| source.sql | #f44747 | — |
| storage.modifier.sql | #0C88FF | — |
| variable.scss | #CC6699 | — |
| meta.definition.variable.scss | #E26662 | — |
| source.css.scss | #CC6699 | — |
| punctuation.separator.key-value.scss,punctuation.terminator.rule.scss,punctuation.terminator.rule.css | #c8c8c8 | — |
| punctuation.definition.string.begin.scss,punctuation.definition.string.end.scss | #37E7AC | — |
| keyword.control.at-rule.include.scss | #B267E6 | — |
| keyword.control.at-rule.mixin.scss | #B267E6 | — |
| keyword.control.at-rule.use.scss | #B267E6 | — |
| entity.name.function.scss | #B267E6 | — |
| punctuation.section.property-list.begin.bracket.curly.scss,punctuation.section.property-list.end.bracket.curly.scss | #c8c8c8 | — |
| punctuation.definition.heading.markdown, markup.heading.markdown | #0C88FF | bold |
| markup.italic.markdown | #eb0cff | italic |
| punctuation.definition.bold.markdown,markup.bold.markdown | #db1c75 | bold |
| markup.quote.markdown | #41aeec | — |
| markup.underline.link.markdown,meta.link.inline.markdown | #1f22fa | — |
| markup.underline.link.markdown,meta.link.inline.markdown | #7538e6 | — |
| markup.list.unnumbered.markdown | #e6e336 | — |
| markup.list.numbered.markdown | #d3aa25 | — |
| markup.inline.raw.string.markdown | #eb6632 | — |
| comment | #4d595f | bold |
| markup.fenced_code.block.markdown | #b132eb | — |
| punctuation.separator.key-value.css | #c2c2c2 | — |
| markup.raw.block.markdown | #2c7233 | — |
| entity.name.function.mongodb | #fca420 | — |
| variable.other.object.property.mongodb | #fca420 | — |
| string.quoted.single.mongodb,string.quoted.double.mongodb | #21fd6b | — |
| variable.other.object.mongodb,meta.function-call.mongodb,support.function.mongodb | #FED604 | — |
| variable.other.property.mongodb, constant.numeric.decimal.mongodb | #fca420 | — |
| variable.other.constant.object.property.mongodb | #fca420 | — |
| variable.other.readwrite.mongodb,meta.object-literal.key.mongodb | #f44747 | — |
| punctuation.accessor.mongodb | #e6f0ee | — |
| string.quoted.single.ts,punctuation.definition.string.end.ts,punctuation.definition.string.begin.ts | #21fd6b | — |
| string.quoted.double.ts | #21fd6b | — |
| meta.object-literal.key.ts | #f15a4c | — |
| keyword.control.default.ts | #f15a4c | — |
| switch-block.expr.ts | #f15a4c | — |
| meta.object.member.ts | #E2E2E2EC | — |
| punctuation.separator.parameter.ts | #E2E2E2EC | — |
| punctuation.definition.section.case-statement.ts | #E2E2E2EC | — |
| constant.language.undefined.ts,storage.modifier.async.ts,constant.language.null.ts,constant.language.undefined.ts | #2493fa | bold |
| constant.language.boolean.true.ts | #46fc55 | — |
| constant.language.boolean.false.ts | #ee1f18 | — |
| support.type.object.module.ts | #F39C12 | — |
| punctuation.separator.parameter.ts,punctuation.terminator.statement.ts,punctuation.separator.comma.ts | #aaa8a8ec | — |
| variable.other.readwrite.ts,meta.definition.variable.ts,meta.var-single-variable.expr.ts | #00ffd9 | bold |
| variable.language.this.ts, variable.language.this.ts | #f859b1 | bold |
| entity.other.inherited-class.ts | #f859b1 | underline bold |
| support.class.builtin.ts | #f859b1 | bold |
| variable.other.readwrite.alias.ts,meta.var.expr.ts | #FED604 | bold |
| variable.parameter.ts | #00ffd9 | — |
| string.template.ts,punctuation.definition.string.template.begin.ts,punctuation.definition.string.template.end.ts | #21fd6b | bold |
| meta.template.expression.ts,punctuation.definition.template-expression.begin.ts, | #21fd6b | bold |
| comment.block.ts. comment.line.double-slash.ts | — | bold |
| punctuation.definition.template-expression.begin.ts, | #21fd6b | bold |
| keyword.control.import.ts,meta.import.ts, keyword.control.from.ts | — | bold |
| punctuation.definition.template-expression.end.ts | #4d595f | — |
| punctuation.definition.template-expression.begin.ts | #4d595f | — |
| meta.embedded.line.ts | #00ffd9 | — |
| meta.function-call.ts,variable.other.object.ts | #F39C12 | bold |
| variable.other.enummember.ts,variable.object.property.ts,entity.name.function.ts,support.variable.property.ts,variable.other.property.ts | #FED604 | bold |
| punctuation.definition.typeparameters.end.ts, punctuation.definition.typeparameters.begin.ts, storage.modifier.ts, storage.type.ts,storage.type.function.ts,storage.type.class.ts,storage.type.function.arrow.ts,torage.modifier.ts,meta.class.ts, storage.type.interface.ts | #b267e6 | bold |
| entity.name.type.enum.ts,entity.name.type.class.ts, entity.name.type.interface.ts | #f859b1 | — |
| constant.numeric.decimal.ts | #F39C12 | — |
| storage.type.enum.ts, entity.name.type.ts,support.type.primitive.ts, support.type.builtin.ts,entity.name.type.ts | #f15a4c | — |
| punctuation.definition.tag.directive.ts, | #0587c4 | — |
| variable.other.env | #FED604 | — |
| constant.language.env,source.env | #21fd6b | — |
| keyword.operator.assignment.env | #00ffd9 | — |
| constant.numeric.env | #F39C12 | — |
| comment.line.double-slash.js, comment.line.number-sign.python | #4D595F | — |
| source.python | #00FFD9 | — |
| constant.numeric.dec.python | #F39C12 | — |
| constant.numeric.float.python | #e6e336 | — |
| string.quoted.single.python | #21FD6B | — |
| support.function.builtin.python, meta.function-call.python, entity.name.function.python, support.function.magic.python | #FED604 | — |
| punctuation.separator.dict.python, punctuation.separator.element.python | #B267E6 | — |
| keyword.control.flow.python, storage.type.function.python, storage.type.class.python | #B267E6 | — |
| entity.name.type.class.python | #F859B1 | — |
| keyword.operator.comparison.python, keyword.operator.bitwise.python | #2493fa | — |
| meta.function-call.arguments.python | #00FFD9 | — |
| meta.attribute.python | #f15a4c | — |
| constant.language.python | #f15a4c | — |
| punctuation.separator.colon.python, punctuation.separator.arguments.python | #B267E6 | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...