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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...