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#1c2137ff
  • activityBar.dropBackground#161b31ff
  • activityBar.foreground#8099f4ff
  • activityBar.inactiveForeground#52556bff
  • activityBarBadge.background#8099f4bf
  • activityBarBadge.foreground#fdfeffff
  • badge.background#8099f4bf
  • badge.foreground#fdfeffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#161b31ff
  • breadcrumb.focusForeground#ecedfeff
  • breadcrumb.foreground#6f7287ff
  • breadcrumbPicker.background#1c2137ff
  • button.background#4262b7ff
  • button.foreground#fdfeffff
  • button.hoverBackground#5773caff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#1c2137ff
  • debugToolBar.background#161b31ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#1c2137ff
  • dropdown.border#1c2137ff
  • dropdown.foreground#ecedfeff
  • editor.background#161b31ff
  • editor.findMatchBackground#59657f40
  • editor.findMatchHighlightBackground#59657f40
  • editor.findRangeHighlightBackground#59657f40
  • editor.focusedStackFrameHighlightBackground#59657f40
  • editor.foreground#dadbedff
  • editor.hoverHighlightBackground#59657f40
  • editor.inactiveSelectionBackground#59657f20
  • editor.lineHighlightBackground#1c2137ff
  • editor.lineHighlightBorder#1c2137ff
  • 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#6f7287ff
  • editorBracketMatch.background#59657f20
  • editorBracketMatch.border#7f9dd6ff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#cad5ffff
  • editorError.foreground#a96162ff
  • editorGroup.border#1c2137ff
  • editorGroup.dropBackground#161b31ff
  • editorGroupHeader.noTabsBackground#161b31ff
  • editorGroupHeader.tabsBackground#1c2137ff
  • editorGutter.addedBackground#006153ff
  • editorGutter.background#161b31ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#833e42ff
  • editorGutter.modifiedBackground#48556eff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#1c2137ff
  • editorHoverWidget.border#1c2137ff
  • editorIndentGuide.activeBackground#2e3148ff
  • editorIndentGuide.background#24283fff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#6f7287ff
  • editorLineNumber.foreground#52556bff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#a96162ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#005144ff
  • editorOverviewRuler.border#1c2137ff
  • 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#161b31ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#1c2137ff
  • editorSuggestWidget.border#1c2137ff
  • editorSuggestWidget.foreground#ecedfeff
  • editorSuggestWidget.highlightForeground#ecedfeff
  • editorSuggestWidget.selectedBackground#24283fff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#1c2137ff
  • editorWidget.border#1c2137ff
  • errorForeground#a96162ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#59657fff
  • foreground#dadbedff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#6f7287ff
  • gitDecoration.modifiedResourceForeground#ab9b60ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#4cac9aff
  • input.background#161b31ff
  • input.foreground#ecedfeff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#8099f4ff
  • inputValidation.errorBackground#2e0000ff
  • inputValidation.errorBorder#52121aff
  • inputValidation.infoBackground#161b31ff
  • inputValidation.infoBorder#393c52ff
  • inputValidation.warningBackground#170000ff
  • inputValidation.warningBorder#342a00ff
  • list.activeSelectionBackground#24283fff
  • list.activeSelectionForeground#ecedfeff
  • list.dropBackground#161b31ff
  • list.errorForeground#a96162ff
  • list.focusBackground#24283fff
  • list.highlightForeground#ecedfeff
  • list.hoverBackground#24283fff
  • list.inactiveFocusBackground#24283fff
  • list.inactiveSelectionBackground#24283fff
  • list.inactiveSelectionForeground#ecedfeff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#1c2137ff
  • menu.foreground#b5b7caff
  • menu.selectionBackground#24283fff
  • menu.selectionForeground#ecedfeff
  • menu.separatorBackground#393c52ff
  • menubar.selectionBackground#24283fff
  • menubar.selectionForeground#ecedfeff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#1c2137ff
  • notificationLink.foreground#8099f4ff
  • notifications.background#1c2137ff
  • notifications.border#1c2137ff
  • panel.background#1c2137ff
  • panel.border#1c2137ff
  • panel.dropBackground#161b31ff
  • panelTitle.activeBorder#8099f4ff
  • panelTitle.activeForeground#ecedfeff
  • panelTitle.inactiveForeground#a3a5b8ff
  • peekView.border#1c2137ff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#1c2137ff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#161b31ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#1c2137ff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#00001dff
  • scrollbarSlider.activeBackground#52556bbf
  • scrollbarSlider.background#393c52bf
  • scrollbarSlider.hoverBackground#45485ebf
  • settings.checkboxBackground#161b31ff
  • settings.checkboxBorder#52556bff
  • settings.checkboxForeground#ecedfeff
  • settings.dropdownBackground#1c2137ff
  • settings.dropdownBorder#1c2137ff
  • settings.dropdownForeground#ecedfeff
  • settings.dropdownListBorder#2e3148ff
  • settings.headerForeground#e0edffff
  • settings.modifiedItemIndicator#59657fff
  • settings.numberInputBackground#1c2137ff
  • settings.numberInputForeground#ecedfeff
  • settings.textInputBackground#1c2137ff
  • settings.textInputForeground#ecedfeff
  • sideBar.background#1c2137ff
  • sideBar.dropBackground#161b31ff
  • sideBar.foreground#a3a5b8ff
  • sideBarSectionHeader.background#1c2137ff
  • sideBarSectionHeader.foreground#52556bff
  • sideBarTitle.foreground#52556bff
  • statusBar.background#24283fff
  • statusBar.debuggingBackground#871500ff
  • statusBar.debuggingForeground#a3a5b8ff
  • statusBar.foreground#a3a5b8ff
  • statusBar.noFolderBackground#45105eff
  • statusBar.noFolderForeground#a3a5b8ff
  • tab.activeBackground#1c2137ff
  • tab.activeBorder#8099f4ff
  • tab.activeForeground#ecedfeff
  • tab.activeModifiedBorder#8099f4bf
  • tab.border#1c2137ff
  • tab.inactiveBackground#1c2137ff
  • tab.inactiveForeground#a3a5b8ff
  • tab.inactiveModifiedBorder#8099f4bf
  • tab.unfocusedActiveForeground#ecedfeff
  • tab.unfocusedActiveModifiedBorder#8099f480
  • tab.unfocusedInactiveForeground#a3a5b8ff
  • tab.unfocusedInactiveModifiedBorder#8099f480
  • terminal.ansiBlack#161b31ff
  • terminal.ansiBlue#93b1ebff
  • terminal.ansiBrightBlack#52556bff
  • terminal.ansiBrightBlue#93b1ebff
  • terminal.ansiBrightCyan#5ebdd9ff
  • terminal.ansiBrightGreen#61c0aeff
  • terminal.ansiBrightMagenta#caa1dbff
  • terminal.ansiBrightRed#e99a9aff
  • terminal.ansiBrightWhite#fdfeffff
  • terminal.ansiBrightYellow#bfae73ff
  • terminal.ansiCyan#5ebdd9ff
  • terminal.ansiGreen#005144ff
  • terminal.ansiMagenta#caa1dbff
  • terminal.ansiRed#712f33ff
  • terminal.ansiWhite#dadbedff
  • terminal.ansiYellow#bfae73ff
  • terminal.background#161b31ff
  • terminal.border#1c2137ff
  • terminal.foreground#dadbedff
  • terminal.selectionBackground#59657f40
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#1c2137ff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#8099f4ff
  • textLink.foreground#8099f4ff
  • textPreformat.foreground#caa1dbff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#1c2137ff
  • titleBar.activeForeground#a3a5b8ff
  • titleBar.inactiveBackground#1c2137ff
  • titleBar.inactiveForeground#52556bff
  • widget.shadow#0c1026ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...