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#2aa8dfff
  • activityBar.inactiveForeground#60616bff
  • activityBarBadge.background#2aa8dfbf
  • activityBarBadge.foreground#ffffffff
  • badge.background#2aa8dfbf
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#282a36ff
  • breadcrumb.focusForeground#efeff0ff
  • breadcrumb.foreground#7c7d85ff
  • breadcrumbPicker.background#2e303cff
  • button.background#0070a2ff
  • button.foreground#ffffffff
  • button.hoverBackground#0082b6ff
  • 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#306c8a40
  • editor.findMatchHighlightBackground#306c8a40
  • editor.findRangeHighlightBackground#306c8a40
  • editor.focusedStackFrameHighlightBackground#306c8a40
  • editor.foreground#dedfe1ff
  • editor.hoverHighlightBackground#306c8a40
  • editor.inactiveSelectionBackground#306c8a20
  • editor.lineHighlightBackground#2e303cff
  • editor.lineHighlightBorder#2e303cff
  • editor.rangeHighlightBackground#306c8a40
  • editor.selectionBackground#306c8a40
  • editor.selectionHighlightBackground#306c8a20
  • editor.snippetFinalTabstopHighlightBorder#306c8a40
  • editor.snippetTabstopHighlightBackground#306c8a40
  • editor.stackFrameHighlightBackground#306c8a40
  • editor.wordHighlightBackground#306c8a20
  • editor.wordHighlightStrongBackground#306c8a20
  • editorActiveLineNumber.foreground#7c7d85ff
  • editorBracketMatch.background#306c8a20
  • editorBracketMatch.border#2aa8dfff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#97979bff
  • editorError.foreground#d7363aff
  • editorGroup.border#2e303cff
  • editorGroup.dropBackground#282a36ff
  • editorGroupHeader.noTabsBackground#282a36ff
  • editorGroupHeader.tabsBackground#2e303cff
  • editorGutter.addedBackground#006806ff
  • editorGutter.background#282a36ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#ac001cff
  • editorGutter.modifiedBackground#1a5b79ff
  • 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#d7363aff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#005700ff
  • editorOverviewRuler.border#2e303cff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#98000fff
  • editorOverviewRuler.errorForeground#d7363abf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#004b68ff
  • 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#d7363aff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#306c8aff
  • foreground#dedfe1ff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#7c7d85ff
  • gitDecoration.modifiedResourceForeground#9aa14aff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#00b552ff
  • input.background#282a36ff
  • input.foreground#efeff0ff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#2aa8dfff
  • inputValidation.errorBackground#480000ff
  • inputValidation.errorBorder#740000ff
  • inputValidation.infoBackground#282a36ff
  • inputValidation.infoBorder#484a55ff
  • inputValidation.warningBackground#070700ff
  • inputValidation.warningBorder#272e00ff
  • list.activeSelectionBackground#353743ff
  • list.activeSelectionForeground#efeff0ff
  • list.dropBackground#282a36ff
  • list.errorForeground#d7363aff
  • 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#2aa8dfff
  • notifications.background#2e303cff
  • notifications.border#2e303cff
  • panel.background#2e303cff
  • panel.border#2e303cff
  • panel.dropBackground#282a36ff
  • panelTitle.activeBorder#2aa8dfff
  • 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#bcf5ffff
  • settings.modifiedItemIndicator#306c8aff
  • 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#2aa8dfff
  • tab.activeForeground#efeff0ff
  • tab.activeModifiedBorder#2aa8dfbf
  • tab.border#2e303cff
  • tab.inactiveBackground#2e303cff
  • tab.inactiveForeground#abacb1ff
  • tab.inactiveModifiedBorder#2aa8dfbf
  • tab.unfocusedActiveForeground#efeff0ff
  • tab.unfocusedActiveModifiedBorder#2aa8df80
  • tab.unfocusedInactiveForeground#abacb1ff
  • tab.unfocusedInactiveModifiedBorder#2aa8df80
  • terminal.ansiBlack#282a36ff
  • terminal.ansiBlue#57c7ffff
  • terminal.ansiBrightBlack#686868ff
  • terminal.ansiBrightBlue#57c7ffff
  • terminal.ansiBrightCyan#9aedfeff
  • terminal.ansiBrightGreen#5af78eff
  • terminal.ansiBrightMagenta#ff79d0ff
  • terminal.ansiBrightRed#ff5c57ff
  • terminal.ansiBrightWhite#eff0ebff
  • terminal.ansiBrightYellow#f3f99dff
  • terminal.ansiCyan#9aedfeff
  • terminal.ansiGreen#5af78eff
  • terminal.ansiMagenta#ff79d0ff
  • terminal.ansiRed#ff5c57ff
  • terminal.ansiWhite#f1f1f0ff
  • terminal.ansiYellow#f3f99dff
  • terminal.background#282a36ff
  • terminal.border#2e303cff
  • terminal.foreground#dedfe1ff
  • terminal.selectionBackground#306c8a40
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#2e303cff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#2aa8dfff
  • textLink.foreground#2aa8dfff
  • textPreformat.foreground#ff79d0ff
  • 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#eff0ebff
emphasisitalic
strongbold
header#000080
comment#616263ff
constant.language#5af78eff
constant.numeric#5af78eff
constant.regexp#ff79d0ff
entity.name.tag#ff5c57ff
entity.name.tag.css#9aedfeff
entity.other.attribute-name#f3f99dff
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#f3f99dff
invalid#f44747
markup.underlineunderline
markup.bold#ff6ac1ffbold
markup.heading#ff6ac1ffbold
markup.italicitalic
markup.inserted#5af78eff
markup.deleted#5af78eff
markup.changed#ff6ac1ff
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#6796e6
markup.inline.raw#5af78eff
punctuation.definition.tag#9b9ca2ff
meta.preprocessor#ff6ac1ff
meta.preprocessor.string#5af78eff
meta.preprocessor.numeric#5af78eff
meta.structure.dictionary.key.python#ff5c57ff
meta.diff.header#ff6ac1ff
storage#ff6ac1ff
storage.type#f3f99dff
storage.modifier#f3f99dff
string#5af78eff
string.tag#5af78eff
string.value#5af78eff
string.regexp#5af78eff
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#ff6ac1ff
meta.template.expression#d4d4d4
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#eff0ebff
keyword#ff6ac1ff
keyword.control#ff6ac1ff
keyword.operator#ff6ac1ff
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python#ff6ac1ff
keyword.other.unit#5af78eff
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#ff6ac1ff
support.function.git-rebase#57c7ffff
constant.sha.git-rebase#5af78eff
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4d4d4
variable.language#ff6ac1ff
entity.name.function, support.function, support.constant.handlebars#57c7ffff
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#9aedfeff
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#9aedfeff
keyword.control#ff6ac1ff
variable, meta.definition.variable.name, support.variable, entity.name.variable#eff0ebff
meta.object-literal.key#ff5c57ff
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#5af78eff
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#ff79d0ff
keyword.operator.or.regexp, keyword.control.anchor.regexp#ff6ac1ff
keyword.operator.quantifier.regexp#5af78eff
constant.character#ff6ac1ff
constant.character.escape#9b9ca2ff
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
string.quoted.double.html#5af78eff
string.template#5af78eff
storage.type.function#f3f99dff
support.class.component.js#ff5c57ff
variable.parameter#dedfe1ff
variable.other.property#dedfe1ff
support.function, support.constant.handlebars#57c7ffff
support.type, support.class, support.constant.math#9aedfeff
support.type.vendored.property-name, support.type.property-name#ff5c57ff
support.function#57c7ffff
variable.other.constant#f3f99dff
meta.brace.round, meta.brace.square, meta.brace.angle, punctuation#9b9ca2ff
support.type.property-name.json#ff5c57ff
storage.type.function.arrow.js, storage.type.function.arrow.ts, storage.type.function.arrow.tsx#ff6ac1ff
punctuation.definition.keyword.css, punctuation.definition.directive.c, punctuation.definition.heading.markdown#ff6ac1ff
entity.name.type.class, entity.name.type.module#9aedfeff
punctuation.definition.comment, punctuation.definition.list.begin.markdown#616263ff
markup.headingnormal

Shiki preview

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

Loading...