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#152331ff
  • activityBar.dropBackground#0e1d2bff
  • activityBar.foreground#5eb4aeff
  • activityBar.inactiveForeground#4d5663ff
  • activityBarBadge.background#5eb4aebf
  • activityBarBadge.foreground#ffffffff
  • badge.background#5eb4aebf
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#0e1d2bff
  • breadcrumb.focusForeground#edeeefff
  • breadcrumb.foreground#6b737eff
  • breadcrumbPicker.background#152331ff
  • button.background#24807bff
  • button.foreground#ffffffff
  • button.hoverBackground#38908bff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#152331ff
  • debugToolBar.background#0e1d2bff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#152331ff
  • dropdown.border#152331ff
  • dropdown.foreground#edeeefff
  • editor.background#0e1d2bff
  • editor.findMatchBackground#4c77a240
  • editor.findMatchHighlightBackground#4c77a240
  • editor.findRangeHighlightBackground#4c77a240
  • editor.focusedStackFrameHighlightBackground#4c77a240
  • editor.foreground#dadcdfff
  • editor.hoverHighlightBackground#4c77a240
  • editor.inactiveSelectionBackground#4c77a220
  • editor.lineHighlightBackground#152331ff
  • editor.lineHighlightBorder#152331ff
  • editor.rangeHighlightBackground#4c77a240
  • editor.selectionBackground#4c77a240
  • editor.selectionHighlightBackground#4c77a220
  • editor.snippetFinalTabstopHighlightBorder#4c77a240
  • editor.snippetTabstopHighlightBackground#4c77a240
  • editor.stackFrameHighlightBackground#4c77a240
  • editor.wordHighlightBackground#4c77a220
  • editor.wordHighlightStrongBackground#4c77a220
  • editorActiveLineNumber.foreground#6b737eff
  • editorBracketMatch.background#4c77a220
  • editorBracketMatch.border#a6a0d5ff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#a1a6adff
  • editorError.foreground#ab7561ff
  • editorGroup.border#152331ff
  • editorGroup.dropBackground#0e1d2bff
  • editorGroupHeader.noTabsBackground#0e1d2bff
  • editorGroupHeader.tabsBackground#152331ff
  • editorGutter.addedBackground#0a6e84ff
  • editorGutter.background#0e1d2bff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#895643ff
  • editorGutter.modifiedBackground#3c6791ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#152331ff
  • editorHoverWidget.border#152331ff
  • editorIndentGuide.activeBackground#273341ff
  • editorIndentGuide.background#1d2a39ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#6b737eff
  • editorLineNumber.foreground#4d5663ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#ab7561ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#005f75ff
  • editorOverviewRuler.border#152331ff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#794836ff
  • editorOverviewRuler.errorForeground#ab7561bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#2b5982ff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#0e1d2bff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#152331ff
  • editorSuggestWidget.border#152331ff
  • editorSuggestWidget.foreground#edeeefff
  • editorSuggestWidget.highlightForeground#edeeefff
  • editorSuggestWidget.selectedBackground#1d2a39ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#152331ff
  • editorWidget.border#152331ff
  • errorForeground#ab7561ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#4c77a2ff
  • foreground#dadcdfff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#6b737eff
  • gitDecoration.modifiedResourceForeground#5db2c1ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#62b1c9ff
  • input.background#0e1d2bff
  • input.foreground#edeeefff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#5eb4aeff
  • inputValidation.errorBackground#370d00ff
  • inputValidation.errorBorder#5d2f1eff
  • inputValidation.infoBackground#0e1d2bff
  • inputValidation.infoBorder#323e4bff
  • inputValidation.warningBackground#002430ff
  • inputValidation.warningBorder#004654ff
  • list.activeSelectionBackground#1d2a39ff
  • list.activeSelectionForeground#edeeefff
  • list.dropBackground#0e1d2bff
  • list.errorForeground#ab7561ff
  • list.focusBackground#1d2a39ff
  • list.highlightForeground#edeeefff
  • list.hoverBackground#1d2a39ff
  • list.inactiveFocusBackground#1d2a39ff
  • list.inactiveSelectionBackground#1d2a39ff
  • list.inactiveSelectionForeground#edeeefff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#152331ff
  • menu.foreground#b4b8bdff
  • menu.selectionBackground#1d2a39ff
  • menu.selectionForeground#edeeefff
  • menu.separatorBackground#323e4bff
  • menubar.selectionBackground#1d2a39ff
  • menubar.selectionForeground#edeeefff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#152331ff
  • notificationLink.foreground#5eb4aeff
  • notifications.background#152331ff
  • notifications.border#152331ff
  • panel.background#152331ff
  • panel.border#152331ff
  • panel.dropBackground#0e1d2bff
  • panelTitle.activeBorder#5eb4aeff
  • panelTitle.activeForeground#edeeefff
  • panelTitle.inactiveForeground#a1a6adff
  • peekView.border#152331ff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#152331ff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#0e1d2bff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#152331ff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#000318ff
  • scrollbarSlider.activeBackground#4d5663bf
  • scrollbarSlider.background#323e4bbf
  • scrollbarSlider.hoverBackground#3f4956bf
  • settings.checkboxBackground#0e1d2bff
  • settings.checkboxBorder#4d5663ff
  • settings.checkboxForeground#edeeefff
  • settings.dropdownBackground#152331ff
  • settings.dropdownBorder#152331ff
  • settings.dropdownForeground#edeeefff
  • settings.dropdownListBorder#273341ff
  • settings.headerForeground#c9f3ffff
  • settings.modifiedItemIndicator#4c77a2ff
  • settings.numberInputBackground#152331ff
  • settings.numberInputForeground#edeeefff
  • settings.textInputBackground#152331ff
  • settings.textInputForeground#edeeefff
  • sideBar.background#152331ff
  • sideBar.dropBackground#0e1d2bff
  • sideBar.foreground#a1a6adff
  • sideBarSectionHeader.background#152331ff
  • sideBarSectionHeader.foreground#4d5663ff
  • sideBarTitle.foreground#4d5663ff
  • statusBar.background#1d2a39ff
  • statusBar.debuggingBackground#9c2b07ff
  • statusBar.debuggingForeground#a1a6adff
  • statusBar.foreground#a1a6adff
  • statusBar.noFolderBackground#592572ff
  • statusBar.noFolderForeground#a1a6adff
  • tab.activeBackground#152331ff
  • tab.activeBorder#5eb4aeff
  • tab.activeForeground#edeeefff
  • tab.activeModifiedBorder#5eb4aebf
  • tab.border#152331ff
  • tab.inactiveBackground#152331ff
  • tab.inactiveForeground#a1a6adff
  • tab.inactiveModifiedBorder#5eb4aebf
  • tab.unfocusedActiveForeground#edeeefff
  • tab.unfocusedActiveModifiedBorder#5eb4ae80
  • tab.unfocusedInactiveForeground#a1a6adff
  • tab.unfocusedInactiveModifiedBorder#5eb4ae80
  • terminal.ansiBlack#0e1d2bff
  • terminal.ansiBlue#b9b2e8ff
  • terminal.ansiBrightBlack#4d5663ff
  • terminal.ansiBrightBlue#b9b2e8ff
  • terminal.ansiBrightCyan#71c6c0ff
  • terminal.ansiBrightGreen#75c3dcff
  • terminal.ansiBrightMagenta#b9b2e8ff
  • terminal.ansiBrightRed#e4a993ff
  • terminal.ansiBrightWhite#ffffffff
  • terminal.ansiBrightYellow#70c5d4ff
  • terminal.ansiCyan#71c6c0ff
  • terminal.ansiGreen#005f75ff
  • terminal.ansiMagenta#b9b2e8ff
  • terminal.ansiRed#794836ff
  • terminal.ansiWhite#dadcdfff
  • terminal.ansiYellow#70c5d4ff
  • terminal.background#0e1d2bff
  • terminal.border#152331ff
  • terminal.foreground#dadcdfff
  • terminal.selectionBackground#4c77a240
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#152331ff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#5eb4aeff
  • textLink.foreground#5eb4aeff
  • textPreformat.foreground#b9b2e8ff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#152331ff
  • titleBar.activeForeground#a1a6adff
  • titleBar.inactiveBackground#152331ff
  • titleBar.inactiveForeground#4d5663ff
  • widget.shadow#001221ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#dadcdfff
emphasisitalic
strongbold
header#000080
comment#6b737eff
constant.language#b9b2e8ff
constant.numeric#9ae8ffff
constant.regexp#cbc4fbff
entity.name.tag#b9b2e8ff
entity.name.tag.css#cbc4fbff
entity.other.attribute-name#a5cefeff
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#a5cefeff
invalid#f44747
markup.underlineunderline
markup.bold#b9b2e8ffbold
markup.heading#b9b2e8ffbold
markup.italicitalic
markup.inserted#9ae8ffff
markup.deleted#aaeac6ff
markup.changed#b9b2e8ff
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#6796e6
markup.inline.raw#aaeac6ff
punctuation.definition.tag#8e949dff
meta.preprocessor#b9b2e8ff
meta.preprocessor.string#aaeac6ff
meta.preprocessor.numeric#9ae8ffff
meta.structure.dictionary.key.python#dadcdfff
meta.diff.header#b9b2e8ff
storage#b9b2e8ff
storage.type#b9b2e8ff
storage.modifier#b9b2e8ff
string#aaeac6ff
string.tag#aaeac6ff
string.value#aaeac6ff
string.regexp#aaeac6ff
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#b4b8bdff
meta.template.expression#d4d4d4
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#dadcdfff
keyword#b9b2e8ff
keyword.control#b9b2e8ff
keyword.operator#b4b8bdff
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python#b9b2e8ff
keyword.other.unit#9ae8ffff
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#b9b2e8ff
support.function.git-rebase#a5cefeff
constant.sha.git-rebase#9ae8ffff
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4d4d4
variable.language#b9b2e8ff
entity.name.function, support.function, support.constant.handlebars#a5cefeff
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#a5cefeff
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#a5cefeff
keyword.control#b9b2e8ff
variable, meta.definition.variable.name, support.variable, entity.name.variable#dadcdfff
meta.object-literal.key#dadcdfff
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#aaeac6ff
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#8e949dff
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#cbc4fbff
keyword.operator.or.regexp, keyword.control.anchor.regexp#b4b8bdff
keyword.operator.quantifier.regexp#9ae8ffff
constant.character#b9b2e8ff
constant.character.escape#8e949dff
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
string.quoted.double.html#aaeac6ff
string.template#aaeac6ff
storage.type.function#b9b2e8ff
support.class.component.js#b9b2e8ff
variable.parameter#dadcdfff
variable.other.property#dadcdfff
support.function, support.constant.handlebars#a5cefeff
support.type, support.class, support.constant.math#b9b2e8ff
support.type.vendored.property-name, support.type.property-name#dadcdfff
support.function#a5cefeff
variable.other.constant#dadcdfff
meta.brace.round, meta.brace.square, meta.brace.angle, punctuation#8e949dff
support.type.property-name.json#dadcdfff
storage.type.function.arrow.js, storage.type.function.arrow.ts, storage.type.function.arrow.tsx#b4b8bdff
punctuation.definition.keyword.css, punctuation.definition.directive.c, punctuation.definition.heading.markdown#b9b2e8ff
entity.name.type.class, entity.name.type.module#a5cefeff
punctuation.definition.comment, punctuation.definition.list.begin.markdown#6b737eff
markup.headingnormal

Shiki preview

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

Loading...