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#2c3039ff
  • activityBar.dropBackground#262a33ff
  • activityBar.foreground#00b495ff
  • activityBar.inactiveForeground#5f6168ff
  • activityBarBadge.background#00b495bf
  • activityBarBadge.foreground#ffffffff
  • badge.background#00b495bf
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#262a33ff
  • breadcrumb.focusForeground#efefefff
  • breadcrumb.foreground#7b7d82ff
  • breadcrumbPicker.background#2c3039ff
  • button.background#00795eff
  • button.foreground#ffffffff
  • button.hoverBackground#008c6fff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#2c3039ff
  • debugToolBar.background#262a33ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#2c3039ff
  • dropdown.border#2c3039ff
  • dropdown.foreground#efefefff
  • editor.background#262a33ff
  • editor.findMatchBackground#59657f40
  • editor.findMatchHighlightBackground#59657f40
  • editor.findRangeHighlightBackground#59657f40
  • editor.focusedStackFrameHighlightBackground#59657f40
  • editor.foreground#dfdfdfff
  • editor.hoverHighlightBackground#59657f40
  • editor.inactiveSelectionBackground#59657f20
  • editor.lineHighlightBackground#2c3039ff
  • editor.lineHighlightBorder#2c3039ff
  • editor.rangeHighlightBackground#59657f40
  • editor.selectionBackground#59657f40
  • editor.selectionHighlightBackground#59657f20
  • editor.snippetFinalTabstopHighlightBorder#59657f40
  • editor.snippetTabstopHighlightBackground#59657f40
  • editor.stackFrameHighlightBackground#59657f40
  • editor.wordHighlightBackground#59657f20
  • editor.wordHighlightStrongBackground#59657f20
  • editorActiveLineNumber.foreground#7b7d82ff
  • editorBracketMatch.background#59657f20
  • editorBracketMatch.border#7f9dd6ff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#ffffffff
  • editorError.foreground#a96162ff
  • editorGroup.border#2c3039ff
  • editorGroup.dropBackground#262a33ff
  • editorGroupHeader.noTabsBackground#262a33ff
  • editorGroupHeader.tabsBackground#2c3039ff
  • editorGutter.addedBackground#006153ff
  • editorGutter.background#262a33ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#833e42ff
  • editorGutter.modifiedBackground#48556eff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#2c3039ff
  • editorHoverWidget.border#2c3039ff
  • editorIndentGuide.activeBackground#3c4048ff
  • editorIndentGuide.background#333740ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#7b7d82ff
  • editorLineNumber.foreground#5f6168ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#a96162ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#005144ff
  • editorOverviewRuler.border#2c3039ff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#712f33ff
  • editorOverviewRuler.errorForeground#a96162bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#39455eff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#262a33ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#2c3039ff
  • editorSuggestWidget.border#2c3039ff
  • editorSuggestWidget.foreground#efefefff
  • editorSuggestWidget.highlightForeground#efefefff
  • editorSuggestWidget.selectedBackground#333740ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#2c3039ff
  • editorWidget.border#2c3039ff
  • errorForeground#a96162ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#59657fff
  • foreground#dfdfdfff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#7b7d82ff
  • gitDecoration.modifiedResourceForeground#ab9b60ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#4cac9aff
  • input.background#262a33ff
  • input.foreground#efefefff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#00b495ff
  • inputValidation.errorBackground#2e0000ff
  • inputValidation.errorBorder#52121aff
  • inputValidation.infoBackground#262a33ff
  • inputValidation.infoBorder#474a52ff
  • inputValidation.warningBackground#170000ff
  • inputValidation.warningBorder#342a00ff
  • list.activeSelectionBackground#333740ff
  • list.activeSelectionForeground#efefefff
  • list.dropBackground#262a33ff
  • list.errorForeground#a96162ff
  • list.focusBackground#333740ff
  • list.highlightForeground#efefefff
  • list.hoverBackground#333740ff
  • list.inactiveFocusBackground#333740ff
  • list.inactiveSelectionBackground#333740ff
  • list.inactiveSelectionForeground#efefefff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#2c3039ff
  • menu.foreground#bcbdbeff
  • menu.selectionBackground#333740ff
  • menu.selectionForeground#efefefff
  • menu.separatorBackground#474a52ff
  • menubar.selectionBackground#333740ff
  • menubar.selectionForeground#efefefff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#2c3039ff
  • notificationLink.foreground#00b495ff
  • notifications.background#2c3039ff
  • notifications.border#2c3039ff
  • panel.background#2c3039ff
  • panel.border#2c3039ff
  • panel.dropBackground#262a33ff
  • panelTitle.activeBorder#00b495ff
  • panelTitle.activeForeground#efefefff
  • panelTitle.inactiveForeground#abacaeff
  • peekView.border#2c3039ff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#2c3039ff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#262a33ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#2c3039ff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#12161eff
  • scrollbarSlider.activeBackground#5f6168bf
  • scrollbarSlider.background#474a52bf
  • scrollbarSlider.hoverBackground#52555cbf
  • settings.checkboxBackground#262a33ff
  • settings.checkboxBorder#5f6168ff
  • settings.checkboxForeground#efefefff
  • settings.dropdownBackground#2c3039ff
  • settings.dropdownBorder#2c3039ff
  • settings.dropdownForeground#efefefff
  • settings.dropdownListBorder#3c4048ff
  • settings.headerForeground#e0edffff
  • settings.modifiedItemIndicator#59657fff
  • settings.numberInputBackground#2c3039ff
  • settings.numberInputForeground#efefefff
  • settings.textInputBackground#2c3039ff
  • settings.textInputForeground#efefefff
  • sideBar.background#2c3039ff
  • sideBar.dropBackground#262a33ff
  • sideBar.foreground#abacaeff
  • sideBarSectionHeader.background#2c3039ff
  • sideBarSectionHeader.foreground#5f6168ff
  • sideBarTitle.foreground#5f6168ff
  • statusBar.background#333740ff
  • statusBar.debuggingBackground#871500ff
  • statusBar.debuggingForeground#abacaeff
  • statusBar.foreground#abacaeff
  • statusBar.noFolderBackground#45105eff
  • statusBar.noFolderForeground#abacaeff
  • tab.activeBackground#2c3039ff
  • tab.activeBorder#00b495ff
  • tab.activeForeground#efefefff
  • tab.activeModifiedBorder#00b495bf
  • tab.border#2c3039ff
  • tab.inactiveBackground#2c3039ff
  • tab.inactiveForeground#abacaeff
  • tab.inactiveModifiedBorder#00b495bf
  • tab.unfocusedActiveForeground#efefefff
  • tab.unfocusedActiveModifiedBorder#00b49580
  • tab.unfocusedInactiveForeground#abacaeff
  • tab.unfocusedInactiveModifiedBorder#00b49580
  • terminal.ansiBlack#262a33ff
  • terminal.ansiBlue#93b1ebff
  • terminal.ansiBrightBlack#5f6168ff
  • terminal.ansiBrightBlue#93b1ebff
  • terminal.ansiBrightCyan#5ebdd9ff
  • terminal.ansiBrightGreen#61c0aeff
  • terminal.ansiBrightMagenta#caa1dbff
  • terminal.ansiBrightRed#e99a9aff
  • terminal.ansiBrightWhite#ffffffff
  • terminal.ansiBrightYellow#bfae73ff
  • terminal.ansiCyan#5ebdd9ff
  • terminal.ansiGreen#005144ff
  • terminal.ansiMagenta#caa1dbff
  • terminal.ansiRed#712f33ff
  • terminal.ansiWhite#dfdfdfff
  • terminal.ansiYellow#bfae73ff
  • terminal.background#262a33ff
  • terminal.border#2c3039ff
  • terminal.foreground#dfdfdfff
  • terminal.selectionBackground#59657f40
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#2c3039ff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#00b495ff
  • textLink.foreground#00b495ff
  • textPreformat.foreground#caa1dbff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#2c3039ff
  • titleBar.activeForeground#abacaeff
  • titleBar.inactiveBackground#2c3039ff
  • titleBar.inactiveForeground#5f6168ff
  • widget.shadow#1c2028ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...