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#112334ff
  • activityBar.dropBackground#0a1d2eff
  • activityBar.foreground#a69ee3ff
  • activityBar.inactiveForeground#4b5765ff
  • activityBarBadge.background#a69ee3bf
  • activityBarBadge.foreground#ffffffff
  • badge.background#a69ee3bf
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#0a1d2eff
  • breadcrumb.focusForeground#edeef0ff
  • breadcrumb.foreground#6a7480ff
  • breadcrumbPicker.background#112334ff
  • button.background#726cacff
  • button.foreground#ffffffff
  • button.hoverBackground#827cbeff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#112334ff
  • debugToolBar.background#0a1d2eff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#112334ff
  • dropdown.border#112334ff
  • dropdown.foreground#edeef0ff
  • editor.background#0a1d2eff
  • editor.findMatchBackground#3878b040
  • editor.findMatchHighlightBackground#3878b040
  • editor.findRangeHighlightBackground#3878b040
  • editor.focusedStackFrameHighlightBackground#3878b040
  • editor.foreground#dadce0ff
  • editor.hoverHighlightBackground#3878b040
  • editor.inactiveSelectionBackground#3878b020
  • editor.lineHighlightBackground#112334ff
  • editor.lineHighlightBorder#112334ff
  • editor.rangeHighlightBackground#3878b040
  • editor.selectionBackground#3878b040
  • editor.selectionHighlightBackground#3878b020
  • editor.snippetFinalTabstopHighlightBorder#3878b040
  • editor.snippetTabstopHighlightBackground#3878b040
  • editor.stackFrameHighlightBackground#3878b040
  • editor.wordHighlightBackground#3878b020
  • editor.wordHighlightStrongBackground#3878b020
  • editorActiveLineNumber.foreground#6a7480ff
  • editorBracketMatch.background#3878b020
  • editorBracketMatch.border#a69ee3ff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#a0a6aeff
  • editorError.foreground#b57057ff
  • editorGroup.border#112334ff
  • editorGroup.dropBackground#0a1d2eff
  • editorGroupHeader.noTabsBackground#0a1d2eff
  • editorGroupHeader.tabsBackground#112334ff
  • editorGutter.addedBackground#00708eff
  • editorGutter.background#0a1d2eff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#92513aff
  • editorGutter.modifiedBackground#22699fff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#112334ff
  • editorHoverWidget.border#112334ff
  • editorIndentGuide.activeBackground#253344ff
  • editorIndentGuide.background#1a2a3bff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#6a7480ff
  • editorLineNumber.foreground#4b5765ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#b57057ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#00617eff
  • editorOverviewRuler.border#112334ff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#82432cff
  • editorOverviewRuler.errorForeground#b57057bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#025a8fff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#0a1d2eff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#112334ff
  • editorSuggestWidget.border#112334ff
  • editorSuggestWidget.foreground#edeef0ff
  • editorSuggestWidget.highlightForeground#edeef0ff
  • editorSuggestWidget.selectedBackground#1a2a3bff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#112334ff
  • editorWidget.border#112334ff
  • errorForeground#b57057ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#3878b0ff
  • foreground#dadce0ff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#6a7480ff
  • gitDecoration.modifiedResourceForeground#35b5c9ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#3eb4d3ff
  • input.background#0a1d2eff
  • input.foreground#edeef0ff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#a69ee3ff
  • inputValidation.errorBackground#3e0500ff
  • inputValidation.errorBorder#652a16ff
  • inputValidation.infoBackground#0a1d2eff
  • inputValidation.infoBorder#303e4eff
  • inputValidation.warningBackground#002637ff
  • inputValidation.warningBorder#00485bff
  • list.activeSelectionBackground#1a2a3bff
  • list.activeSelectionForeground#edeef0ff
  • list.dropBackground#0a1d2eff
  • list.errorForeground#b57057ff
  • list.focusBackground#1a2a3bff
  • list.highlightForeground#edeef0ff
  • list.hoverBackground#1a2a3bff
  • list.inactiveFocusBackground#1a2a3bff
  • list.inactiveSelectionBackground#1a2a3bff
  • list.inactiveSelectionForeground#edeef0ff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#112334ff
  • menu.foreground#b3b8beff
  • menu.selectionBackground#1a2a3bff
  • menu.selectionForeground#edeef0ff
  • menu.separatorBackground#303e4eff
  • menubar.selectionBackground#1a2a3bff
  • menubar.selectionForeground#edeef0ff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#112334ff
  • notificationLink.foreground#a69ee3ff
  • notifications.background#112334ff
  • notifications.border#112334ff
  • panel.background#112334ff
  • panel.border#112334ff
  • panel.dropBackground#0a1d2eff
  • panelTitle.activeBorder#a69ee3ff
  • panelTitle.activeForeground#edeef0ff
  • panelTitle.inactiveForeground#a0a6aeff
  • peekView.border#112334ff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#112334ff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#0a1d2eff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#112334ff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#00031aff
  • scrollbarSlider.activeBackground#4b5765bf
  • scrollbarSlider.background#303e4ebf
  • scrollbarSlider.hoverBackground#3d4a59bf
  • settings.checkboxBackground#0a1d2eff
  • settings.checkboxBorder#4b5765ff
  • settings.checkboxForeground#edeef0ff
  • settings.dropdownBackground#112334ff
  • settings.dropdownBorder#112334ff
  • settings.dropdownForeground#edeef0ff
  • settings.dropdownListBorder#253344ff
  • settings.headerForeground#bcf4ffff
  • settings.modifiedItemIndicator#3878b0ff
  • settings.numberInputBackground#112334ff
  • settings.numberInputForeground#edeef0ff
  • settings.textInputBackground#112334ff
  • settings.textInputForeground#edeef0ff
  • sideBar.background#112334ff
  • sideBar.dropBackground#0a1d2eff
  • sideBar.foreground#a0a6aeff
  • sideBarSectionHeader.background#112334ff
  • sideBarSectionHeader.foreground#4b5765ff
  • sideBarTitle.foreground#4b5765ff
  • statusBar.background#1a2a3bff
  • statusBar.debuggingBackground#9c2b07ff
  • statusBar.debuggingForeground#a0a6aeff
  • statusBar.foreground#a0a6aeff
  • statusBar.noFolderBackground#592572ff
  • statusBar.noFolderForeground#a0a6aeff
  • tab.activeBackground#112334ff
  • tab.activeBorder#a69ee3ff
  • tab.activeForeground#edeef0ff
  • tab.activeModifiedBorder#a69ee3bf
  • tab.border#112334ff
  • tab.inactiveBackground#112334ff
  • tab.inactiveForeground#a0a6aeff
  • tab.inactiveModifiedBorder#a69ee3bf
  • tab.unfocusedActiveForeground#edeef0ff
  • tab.unfocusedActiveModifiedBorder#a69ee380
  • tab.unfocusedInactiveForeground#a0a6aeff
  • tab.unfocusedInactiveModifiedBorder#a69ee380
  • terminal.ansiBlack#0a1d2eff
  • terminal.ansiBlue#b8b0f6ff
  • terminal.ansiBrightBlack#4b5765ff
  • terminal.ansiBrightBlue#b8b0f6ff
  • terminal.ansiBrightCyan#51cac3ff
  • terminal.ansiBrightGreen#56c6e6ff
  • terminal.ansiBrightMagenta#b8b0f6ff
  • terminal.ansiBrightRed#efa489ff
  • terminal.ansiBrightWhite#ffffffff
  • terminal.ansiBrightYellow#4ec8dcff
  • terminal.ansiCyan#51cac3ff
  • terminal.ansiGreen#00617eff
  • terminal.ansiMagenta#b8b0f6ff
  • terminal.ansiRed#82432cff
  • terminal.ansiWhite#dadce0ff
  • terminal.ansiYellow#4ec8dcff
  • terminal.background#0a1d2eff
  • terminal.border#112334ff
  • terminal.foreground#dadce0ff
  • terminal.selectionBackground#3878b040
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#112334ff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#a69ee3ff
  • textLink.foreground#a69ee3ff
  • textPreformat.foreground#b8b0f6ff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#112334ff
  • titleBar.activeForeground#a0a6aeff
  • titleBar.inactiveBackground#112334ff
  • titleBar.inactiveForeground#4b5765ff
  • widget.shadow#001324ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...