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#122c48ff
  • activityBar.dropBackground#092642ff
  • activityBar.foreground#35a0ffff
  • activityBar.inactiveForeground#4b5e7bff
  • activityBarBadge.background#35a0ffbf
  • activityBarBadge.foreground#f3ffffff
  • badge.background#35a0ffbf
  • badge.foreground#f3ffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#092642ff
  • breadcrumb.focusForeground#e2f0ffff
  • breadcrumb.foreground#697a97ff
  • breadcrumbPicker.background#122c48ff
  • button.background#0069d3ff
  • button.foreground#f3ffffff
  • button.hoverBackground#007ae7ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#122c48ff
  • debugToolBar.background#092642ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#122c48ff
  • dropdown.border#122c48ff
  • dropdown.foreground#e2f0ffff
  • editor.background#092642ff
  • editor.findMatchBackground#59657f40
  • editor.findMatchHighlightBackground#59657f40
  • editor.findRangeHighlightBackground#59657f40
  • editor.focusedStackFrameHighlightBackground#59657f40
  • editor.foreground#d1dff8ff
  • editor.hoverHighlightBackground#59657f40
  • editor.inactiveSelectionBackground#59657f20
  • editor.lineHighlightBackground#122c48ff
  • editor.lineHighlightBorder#122c48ff
  • 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#697a97ff
  • editorBracketMatch.background#59657f20
  • editorBracketMatch.border#52a0ffff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#9babc6ff
  • editorError.foreground#a96162ff
  • editorGroup.border#122c48ff
  • editorGroup.dropBackground#092642ff
  • editorGroupHeader.noTabsBackground#092642ff
  • editorGroupHeader.tabsBackground#122c48ff
  • editorGutter.addedBackground#00680cff
  • editorGutter.background#092642ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#833e42ff
  • editorGutter.modifiedBackground#48556eff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#122c48ff
  • editorHoverWidget.border#122c48ff
  • editorIndentGuide.activeBackground#263c59ff
  • editorIndentGuide.background#1b3350ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#697a97ff
  • editorLineNumber.foreground#4b5e7bff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#a96162ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#005700ff
  • editorOverviewRuler.border#122c48ff
  • 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#092642ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#122c48ff
  • editorSuggestWidget.border#122c48ff
  • editorSuggestWidget.foreground#e2f0ffff
  • editorSuggestWidget.highlightForeground#e2f0ffff
  • editorSuggestWidget.selectedBackground#1b3350ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#122c48ff
  • editorWidget.border#122c48ff
  • errorForeground#a96162ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#59657fff
  • foreground#d1dff8ff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#697a97ff
  • gitDecoration.modifiedResourceForeground#ab9b60ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#00b555ff
  • input.background#092642ff
  • input.foreground#e2f0ffff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#35a0ffff
  • inputValidation.errorBackground#2e0000ff
  • inputValidation.errorBorder#52121aff
  • inputValidation.infoBackground#092642ff
  • inputValidation.infoBorder#314663ff
  • inputValidation.warningBackground#170000ff
  • inputValidation.warningBorder#342a00ff
  • list.activeSelectionBackground#1b3350ff
  • list.activeSelectionForeground#e2f0ffff
  • list.dropBackground#092642ff
  • list.errorForeground#a96162ff
  • list.focusBackground#1b3350ff
  • list.highlightForeground#e2f0ffff
  • list.hoverBackground#1b3350ff
  • list.inactiveFocusBackground#1b3350ff
  • list.inactiveSelectionBackground#1b3350ff
  • list.inactiveSelectionForeground#e2f0ffff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#122c48ff
  • menu.foreground#acbcd7ff
  • menu.selectionBackground#1b3350ff
  • menu.selectionForeground#e2f0ffff
  • menu.separatorBackground#314663ff
  • menubar.selectionBackground#1b3350ff
  • menubar.selectionForeground#e2f0ffff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#122c48ff
  • notificationLink.foreground#35a0ffff
  • notifications.background#122c48ff
  • notifications.border#122c48ff
  • panel.background#122c48ff
  • panel.border#122c48ff
  • panel.dropBackground#092642ff
  • panelTitle.activeBorder#35a0ffff
  • panelTitle.activeForeground#e2f0ffff
  • panelTitle.inactiveForeground#9babc6ff
  • peekView.border#122c48ff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#122c48ff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#092642ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#122c48ff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#00112cff
  • scrollbarSlider.activeBackground#4b5e7bbf
  • scrollbarSlider.background#314663bf
  • scrollbarSlider.hoverBackground#3e526fbf
  • settings.checkboxBackground#092642ff
  • settings.checkboxBorder#4b5e7bff
  • settings.checkboxForeground#e2f0ffff
  • settings.dropdownBackground#122c48ff
  • settings.dropdownBorder#122c48ff
  • settings.dropdownForeground#e2f0ffff
  • settings.dropdownListBorder#263c59ff
  • settings.headerForeground#e0edffff
  • settings.modifiedItemIndicator#59657fff
  • settings.numberInputBackground#122c48ff
  • settings.numberInputForeground#e2f0ffff
  • settings.textInputBackground#122c48ff
  • settings.textInputForeground#e2f0ffff
  • sideBar.background#122c48ff
  • sideBar.dropBackground#092642ff
  • sideBar.foreground#9babc6ff
  • sideBarSectionHeader.background#122c48ff
  • sideBarSectionHeader.foreground#4b5e7bff
  • sideBarTitle.foreground#4b5e7bff
  • statusBar.background#1b3350ff
  • statusBar.debuggingBackground#871500ff
  • statusBar.debuggingForeground#9babc6ff
  • statusBar.foreground#9babc6ff
  • statusBar.noFolderBackground#45105eff
  • statusBar.noFolderForeground#9babc6ff
  • tab.activeBackground#122c48ff
  • tab.activeBorder#35a0ffff
  • tab.activeForeground#e2f0ffff
  • tab.activeModifiedBorder#35a0ffbf
  • tab.border#122c48ff
  • tab.inactiveBackground#122c48ff
  • tab.inactiveForeground#9babc6ff
  • tab.inactiveModifiedBorder#35a0ffbf
  • tab.unfocusedActiveForeground#e2f0ffff
  • tab.unfocusedActiveModifiedBorder#35a0ff80
  • tab.unfocusedInactiveForeground#9babc6ff
  • tab.unfocusedInactiveModifiedBorder#35a0ff80
  • terminal.ansiBlack#092642ff
  • terminal.ansiBlue#6ab4ffff
  • terminal.ansiBrightBlack#4b5e7bff
  • terminal.ansiBrightBlue#6ab4ffff
  • terminal.ansiBrightCyan#5ebdd9ff
  • terminal.ansiBrightGreen#00ca68ff
  • terminal.ansiBrightMagenta#d596ffff
  • terminal.ansiBrightRed#e99a9aff
  • terminal.ansiBrightWhite#f3ffffff
  • terminal.ansiBrightYellow#bfae73ff
  • terminal.ansiCyan#5ebdd9ff
  • terminal.ansiGreen#005700ff
  • terminal.ansiMagenta#d596ffff
  • terminal.ansiRed#712f33ff
  • terminal.ansiWhite#d1dff8ff
  • terminal.ansiYellow#bfae73ff
  • terminal.background#092642ff
  • terminal.border#122c48ff
  • terminal.foreground#d1dff8ff
  • terminal.selectionBackground#59657f40
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#122c48ff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#35a0ffff
  • textLink.foreground#35a0ffff
  • textPreformat.foreground#d596ffff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#122c48ff
  • titleBar.activeForeground#9babc6ff
  • titleBar.inactiveBackground#122c48ff
  • titleBar.inactiveForeground#4b5e7bff
  • widget.shadow#001c37ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...