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#151e2dff
  • activityBar.dropBackground#0e1827ff
  • activityBar.foreground#c391d8ff
  • activityBar.inactiveForeground#4c525fff
  • activityBarBadge.background#c391d8bf
  • activityBarBadge.foreground#ffffffff
  • badge.background#c391d8bf
  • badge.foreground#ffffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#0e1827ff
  • breadcrumb.focusForeground#edeeefff
  • breadcrumb.foreground#6b707bff
  • breadcrumbPicker.background#151e2dff
  • button.background#8d5ea1ff
  • button.foreground#ffffffff
  • button.hoverBackground#9e6eb3ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#151e2dff
  • debugToolBar.background#0e1827ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#151e2dff
  • dropdown.border#151e2dff
  • dropdown.foreground#edeeefff
  • editor.background#0e1827ff
  • editor.findMatchBackground#5171a740
  • editor.findMatchHighlightBackground#5171a740
  • editor.findRangeHighlightBackground#5171a740
  • editor.focusedStackFrameHighlightBackground#5171a740
  • editor.foreground#dadbdeff
  • editor.hoverHighlightBackground#5171a740
  • editor.inactiveSelectionBackground#5171a720
  • editor.lineHighlightBackground#151e2dff
  • editor.lineHighlightBorder#151e2dff
  • editor.rangeHighlightBackground#5171a740
  • editor.selectionBackground#5171a740
  • editor.selectionHighlightBackground#5171a720
  • editor.snippetFinalTabstopHighlightBorder#5171a740
  • editor.snippetTabstopHighlightBackground#5171a740
  • editor.stackFrameHighlightBackground#5171a740
  • editor.wordHighlightBackground#5171a720
  • editor.wordHighlightStrongBackground#5171a720
  • editorActiveLineNumber.foreground#6b707bff
  • editorBracketMatch.background#5171a720
  • editorBracketMatch.border#86a5deff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#a0a3abff
  • editorError.foreground#c06467ff
  • editorGroup.border#151e2dff
  • editorGroup.dropBackground#0e1827ff
  • editorGroupHeader.noTabsBackground#0e1827ff
  • editorGroupHeader.tabsBackground#151e2dff
  • editorGutter.addedBackground#006f44ff
  • editorGutter.background#0e1827ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#9b4349ff
  • editorGutter.modifiedBackground#406296ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#151e2dff
  • editorHoverWidget.border#151e2dff
  • editorIndentGuide.activeBackground#272e3eff
  • editorIndentGuide.background#1d2535ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#6b707bff
  • editorLineNumber.foreground#4c525fff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#c06467ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#006037ff
  • editorOverviewRuler.border#151e2dff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#8a343bff
  • editorOverviewRuler.errorForeground#c06467bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#305386ff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#0e1827ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#151e2dff
  • editorSuggestWidget.border#151e2dff
  • editorSuggestWidget.foreground#edeeefff
  • editorSuggestWidget.highlightForeground#edeeefff
  • editorSuggestWidget.selectedBackground#1d2535ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#151e2dff
  • editorWidget.border#151e2dff
  • errorForeground#c06467ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#5171a7ff
  • foreground#dadbdeff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#6b707bff
  • gitDecoration.modifiedResourceForeground#cd985fff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#57b585ff
  • input.background#0e1827ff
  • input.foreground#edeeefff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#c391d8ff
  • inputValidation.errorBackground#420000ff
  • inputValidation.errorBorder#6c1723ff
  • inputValidation.infoBackground#0e1827ff
  • inputValidation.infoBorder#323948ff
  • inputValidation.warningBackground#320c00ff
  • inputValidation.warningBorder#562e00ff
  • list.activeSelectionBackground#1d2535ff
  • list.activeSelectionForeground#edeeefff
  • list.dropBackground#0e1827ff
  • list.errorForeground#c06467ff
  • list.focusBackground#1d2535ff
  • list.highlightForeground#edeeefff
  • list.hoverBackground#1d2535ff
  • list.inactiveFocusBackground#1d2535ff
  • list.inactiveSelectionBackground#1d2535ff
  • list.inactiveSelectionForeground#edeeefff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#151e2dff
  • menu.foreground#b3b6bcff
  • menu.selectionBackground#1d2535ff
  • menu.selectionForeground#edeeefff
  • menu.separatorBackground#323948ff
  • menubar.selectionBackground#1d2535ff
  • menubar.selectionForeground#edeeefff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#151e2dff
  • notificationLink.foreground#c391d8ff
  • notifications.background#151e2dff
  • notifications.border#151e2dff
  • panel.background#151e2dff
  • panel.border#151e2dff
  • panel.dropBackground#0e1827ff
  • panelTitle.activeBorder#c391d8ff
  • panelTitle.activeForeground#edeeefff
  • panelTitle.inactiveForeground#a0a3abff
  • peekView.border#151e2dff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#151e2dff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#0e1827ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#151e2dff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#000118ff
  • scrollbarSlider.activeBackground#4c525fbf
  • scrollbarSlider.background#323948bf
  • scrollbarSlider.hoverBackground#3e4553bf
  • settings.checkboxBackground#0e1827ff
  • settings.checkboxBorder#4c525fff
  • settings.checkboxForeground#edeeefff
  • settings.dropdownBackground#151e2dff
  • settings.dropdownBorder#151e2dff
  • settings.dropdownForeground#edeeefff
  • settings.dropdownListBorder#272e3eff
  • settings.headerForeground#d1efffff
  • settings.modifiedItemIndicator#5171a7ff
  • settings.numberInputBackground#151e2dff
  • settings.numberInputForeground#edeeefff
  • settings.textInputBackground#151e2dff
  • settings.textInputForeground#edeeefff
  • sideBar.background#151e2dff
  • sideBar.dropBackground#0e1827ff
  • sideBar.foreground#a0a3abff
  • sideBarSectionHeader.background#151e2dff
  • sideBarSectionHeader.foreground#4c525fff
  • sideBarTitle.foreground#4c525fff
  • statusBar.background#1d2535ff
  • statusBar.debuggingBackground#774500ff
  • statusBar.debuggingForeground#a0a3abff
  • statusBar.foreground#a0a3abff
  • statusBar.noFolderBackground#55206eff
  • statusBar.noFolderForeground#a0a3abff
  • tab.activeBackground#151e2dff
  • tab.activeBorder#c391d8ff
  • tab.activeForeground#edeeefff
  • tab.activeModifiedBorder#c391d8bf
  • tab.border#151e2dff
  • tab.inactiveBackground#151e2dff
  • tab.inactiveForeground#a0a3abff
  • tab.inactiveModifiedBorder#c391d8bf
  • tab.unfocusedActiveForeground#edeeefff
  • tab.unfocusedActiveModifiedBorder#c391d880
  • tab.unfocusedInactiveForeground#a0a3abff
  • tab.unfocusedInactiveModifiedBorder#c391d880
  • terminal.ansiBlack#0e1827ff
  • terminal.ansiBlue#99b7f2ff
  • terminal.ansiBrightBlack#4c525fff
  • terminal.ansiBrightBlue#99b7f2ff
  • terminal.ansiBrightCyan#3dc6eaff
  • terminal.ansiBrightGreen#6ac897ff
  • terminal.ansiBrightMagenta#d1a7e1ff
  • terminal.ansiBrightRed#fc999bff
  • terminal.ansiBrightWhite#ffffffff
  • terminal.ansiBrightYellow#e1aa70ff
  • terminal.ansiCyan#3dc6eaff
  • terminal.ansiGreen#006037ff
  • terminal.ansiMagenta#d1a7e1ff
  • terminal.ansiRed#8a343bff
  • terminal.ansiWhite#dadbdeff
  • terminal.ansiYellow#e1aa70ff
  • terminal.background#0e1827ff
  • terminal.border#151e2dff
  • terminal.foreground#dadbdeff
  • terminal.selectionBackground#5171a740
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#151e2dff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#c391d8ff
  • textLink.foreground#c391d8ff
  • textPreformat.foreground#d1a7e1ff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#151e2dff
  • titleBar.activeForeground#a0a3abff
  • titleBar.inactiveBackground#151e2dff
  • titleBar.inactiveForeground#4c525fff
  • widget.shadow#000b1dff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...