Skip to main content
Coding Theme

Dainty

Publisher: Alexander TeinumThemes in package: 30

Streamlined versions of popular VS Code themes

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.background#2e303cff
  • activityBar.dropBackground#282a36ff
  • activityBar.foreground#00b63dff
  • activityBar.inactiveForeground#60616bff
  • activityBarBadge.background#00b63dbf
  • activityBarBadge.foreground#ffffffff
  • badge.background#00b63dbf
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#282a36ff
  • breadcrumb.focusForeground#efeff0ff
  • breadcrumb.foreground#7c7d85ff
  • breadcrumbPicker.background#2e303cff
  • button.background#007b00ff
  • button.foreground#ffffffff
  • button.hoverBackground#008e12ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#2e303cff
  • debugToolBar.background#282a36ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#2e303cff
  • dropdown.border#2e303cff
  • dropdown.foreground#efeff0ff
  • editor.background#282a36ff
  • editor.findMatchBackground#73589a40
  • editor.findMatchHighlightBackground#73589a40
  • editor.findRangeHighlightBackground#73589a40
  • editor.focusedStackFrameHighlightBackground#73589a40
  • editor.foreground#dedfe1ff
  • editor.hoverHighlightBackground#73589a40
  • editor.inactiveSelectionBackground#73589a20
  • editor.lineHighlightBackground#2e303cff
  • editor.lineHighlightBorder#2e303cff
  • editor.rangeHighlightBackground#73589a40
  • editor.selectionBackground#73589a40
  • editor.selectionHighlightBackground#73589a20
  • editor.snippetFinalTabstopHighlightBorder#73589a40
  • editor.snippetTabstopHighlightBackground#73589a40
  • editor.stackFrameHighlightBackground#73589a40
  • editor.wordHighlightBackground#73589a20
  • editor.wordHighlightStrongBackground#73589a20
  • editorActiveLineNumber.foreground#7c7d85ff
  • editorBracketMatch.background#73589a20
  • editorBracketMatch.border#b289eeff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#abacb1ff
  • editorError.foreground#db303bff
  • editorGroup.border#2e303cff
  • editorGroup.dropBackground#282a36ff
  • editorGroupHeader.noTabsBackground#282a36ff
  • editorGroupHeader.tabsBackground#2e303cff
  • editorGutter.addedBackground#006900ff
  • editorGutter.background#282a36ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#af001dff
  • editorGutter.modifiedBackground#624888ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#2e303cff
  • editorHoverWidget.border#2e303cff
  • editorIndentGuide.activeBackground#3e404bff
  • editorIndentGuide.background#353743ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#7c7d85ff
  • editorLineNumber.foreground#60616bff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#db303bff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#005800ff
  • editorOverviewRuler.border#2e303cff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#9b0010ff
  • editorOverviewRuler.errorForeground#db303bbf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#513977ff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#282a36ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#2e303cff
  • editorSuggestWidget.border#2e303cff
  • editorSuggestWidget.foreground#efeff0ff
  • editorSuggestWidget.highlightForeground#efeff0ff
  • editorSuggestWidget.selectedBackground#353743ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#2e303cff
  • editorWidget.border#2e303cff
  • errorForeground#db303bff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#73589aff
  • foreground#dedfe1ff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#7c7d85ff
  • gitDecoration.modifiedResourceForeground#97a238ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#00b63dff
  • input.background#282a36ff
  • input.foreground#efeff0ff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#00b63dff
  • inputValidation.errorBackground#4a0000ff
  • inputValidation.errorBorder#770000ff
  • inputValidation.infoBackground#282a36ff
  • inputValidation.infoBorder#484a55ff
  • inputValidation.warningBackground#070900ff
  • inputValidation.warningBorder#262f00ff
  • list.activeSelectionBackground#353743ff
  • list.activeSelectionForeground#efeff0ff
  • list.dropBackground#282a36ff
  • list.errorForeground#db303bff
  • list.focusBackground#353743ff
  • list.highlightForeground#efeff0ff
  • list.hoverBackground#353743ff
  • list.inactiveFocusBackground#353743ff
  • list.inactiveSelectionBackground#353743ff
  • list.inactiveSelectionForeground#efeff0ff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#2e303cff
  • menu.foreground#bcbdc1ff
  • menu.selectionBackground#353743ff
  • menu.selectionForeground#efeff0ff
  • menu.separatorBackground#484a55ff
  • menubar.selectionBackground#353743ff
  • menubar.selectionForeground#efeff0ff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#2e303cff
  • notificationLink.foreground#00b63dff
  • notifications.background#2e303cff
  • notifications.border#2e303cff
  • panel.background#2e303cff
  • panel.border#2e303cff
  • panel.dropBackground#282a36ff
  • panelTitle.activeBorder#00b63dff
  • panelTitle.activeForeground#efeff0ff
  • panelTitle.inactiveForeground#abacb1ff
  • peekView.border#2e303cff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#2e303cff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#282a36ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#2e303cff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#141621ff
  • scrollbarSlider.activeBackground#60616bbf
  • scrollbarSlider.background#484a55bf
  • scrollbarSlider.hoverBackground#54555fbf
  • settings.checkboxBackground#282a36ff
  • settings.checkboxBorder#60616bff
  • settings.checkboxForeground#efeff0ff
  • settings.dropdownBackground#2e303cff
  • settings.dropdownBorder#2e303cff
  • settings.dropdownForeground#efeff0ff
  • settings.dropdownListBorder#3e404bff
  • settings.headerForeground#ffdfffff
  • settings.modifiedItemIndicator#73589aff
  • settings.numberInputBackground#2e303cff
  • settings.numberInputForeground#efeff0ff
  • settings.textInputBackground#2e303cff
  • settings.textInputForeground#efeff0ff
  • sideBar.background#2e303cff
  • sideBar.dropBackground#282a36ff
  • sideBar.foreground#abacb1ff
  • sideBarSectionHeader.background#2e303cff
  • sideBarSectionHeader.foreground#60616bff
  • sideBarTitle.foreground#60616bff
  • statusBar.background#353743ff
  • statusBar.debuggingBackground#871500ff
  • statusBar.debuggingForeground#abacb1ff
  • statusBar.foreground#abacb1ff
  • statusBar.noFolderBackground#45105eff
  • statusBar.noFolderForeground#abacb1ff
  • tab.activeBackground#2e303cff
  • tab.activeBorder#00b63dff
  • tab.activeForeground#efeff0ff
  • tab.activeModifiedBorder#00b63dbf
  • tab.border#2e303cff
  • tab.inactiveBackground#2e303cff
  • tab.inactiveForeground#abacb1ff
  • tab.inactiveModifiedBorder#00b63dbf
  • tab.unfocusedActiveForeground#efeff0ff
  • tab.unfocusedActiveModifiedBorder#00b63d80
  • tab.unfocusedInactiveForeground#abacb1ff
  • tab.unfocusedInactiveModifiedBorder#00b63d80
  • terminal.ansiBlack#21222cff
  • terminal.ansiBlue#bd93f9ff
  • terminal.ansiBrightBlack#6272a4ff
  • terminal.ansiBrightBlue#d6acffff
  • terminal.ansiBrightCyan#a4ffffff
  • terminal.ansiBrightGreen#69ff94ff
  • terminal.ansiBrightMagenta#ff80cdff
  • terminal.ansiBrightRed#ff6e6eff
  • terminal.ansiBrightWhite#ffffffff
  • terminal.ansiBrightYellow#ffffa5ff
  • terminal.ansiCyan#8be9fdff
  • terminal.ansiGreen#50fa7bff
  • terminal.ansiMagenta#ff80cdff
  • terminal.ansiRed#ff5555ff
  • terminal.ansiWhite#f8f8f2ff
  • terminal.ansiYellow#f1fa8cff
  • terminal.background#282a36ff
  • terminal.border#2e303cff
  • terminal.foreground#dedfe1ff
  • terminal.selectionBackground#73589a40
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#2e303cff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#00b63dff
  • textLink.foreground#00b63dff
  • textPreformat.foreground#ff80cdff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#2e303cff
  • titleBar.activeForeground#abacb1ff
  • titleBar.inactiveBackground#2e303cff
  • titleBar.inactiveForeground#60616bff
  • widget.shadow#1e202bff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#f8f8f2ff
emphasisitalic
strongbold
header#000080
comment#6272a4ff
constant.language#bd93f9ff
constant.numeric#bd93f9ff
constant.regexp#ff79c6ff
entity.name.tag#ff79c6ff
entity.name.tag.css#ffaaf7ff
entity.other.attribute-name#50fa7bff
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss#50fa7bff
invalid#f44747
markup.underlineunderline
markup.bold#ff79c6ffbold
markup.heading#ff79c6ffbold
markup.italicitalic
markup.inserted#bd93f9ff
markup.deleted#f1fa8cff
markup.changed#ff79c6ff
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#6796e6
markup.inline.raw#f1fa8cff
punctuation.definition.tag#9b9ca2ff
meta.preprocessor#ff79c6ff
meta.preprocessor.string#f1fa8cff
meta.preprocessor.numeric#bd93f9ff
meta.structure.dictionary.key.python#dedfe1ff
meta.diff.header#ff79c6ff
storage#ff79c6ff
storage.type#ff79c6ff
storage.modifier#ff79c6ff
string#f1fa8cff
string.tag#f1fa8cff
string.value#f1fa8cff
string.regexp#f1fa8cff
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#bcbdc1ff
meta.template.expression#d4d4d4
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#f8f8f2ff
keyword#ff79c6ff
keyword.control#ff79c6ff
keyword.operator#bcbdc1ff
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python#ff79c6ff
keyword.other.unit#bd93f9ff
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#ff79c6ff
support.function.git-rebase#8be9fdff
constant.sha.git-rebase#bd93f9ff
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4d4d4
variable.language#ff79c6ff
entity.name.function, support.function, support.constant.handlebars#50fa7bff
meta.return-type, support.class, support.type, entity.name.type, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#8be9fdff
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#8be9fdff
keyword.control#ff79c6ff
variable, meta.definition.variable.name, support.variable, entity.name.variable#f8f8f2ff
meta.object-literal.key#dedfe1ff
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#f1fa8cff
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#9b9ca2ff
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#ff79c6ff
keyword.operator.or.regexp, keyword.control.anchor.regexp#bcbdc1ff
keyword.operator.quantifier.regexp#bd93f9ff
constant.character#ff79c6ff
constant.character.escape#9b9ca2ff
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
string.quoted.double.html#f1fa8cff
string.template#f1fa8cff
storage.type.function#ff79c6ff
support.class.component.js#ff79c6ff
variable.parameter#ffb86cff
variable.other.property#dedfe1ff
support.function, support.constant.handlebars#8be9fdff
support.type, support.class, support.constant.math#8be9fdff
support.type.vendored.property-name, support.type.property-name#dedfe1ff
support.function#8be9fdff
variable.other.constant#f8f8f2ff
meta.brace.round, meta.brace.square, meta.brace.angle, punctuation#9b9ca2ff
support.type.property-name.json#dedfe1ff
storage.type.function.arrow.js, storage.type.function.arrow.ts, storage.type.function.arrow.tsx#bcbdc1ff
punctuation.definition.keyword.css, punctuation.definition.directive.c, punctuation.definition.heading.markdown#ff79c6ff
entity.name.type.class, entity.name.type.module#8be9fdff
punctuation.definition.comment, punctuation.definition.list.begin.markdown#6272a4ff
markup.headingnormal

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Dainty - Coding Theme