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#f4f7ffff
  • activityBar.dropBackground#fdffffff
  • activityBar.foreground#006aeeff
  • activityBar.inactiveForeground#acb6ccff
  • activityBarBadge.background#006aeebf
  • activityBarBadge.foreground#fdffffff
  • badge.background#006aeebf
  • badge.foreground#fdffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#fdffffff
  • breadcrumb.focusForeground#002957ff
  • breadcrumb.foreground#8996b2ff
  • breadcrumbPicker.background#f4f7ffff
  • button.background#009bffff
  • button.foreground#fdffffff
  • button.hoverBackground#008affff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#f4f7ffff
  • debugToolBar.background#fdffffff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#f4f7ffff
  • dropdown.border#f4f7ffff
  • dropdown.foreground#002957ff
  • editor.background#fdffffff
  • editor.findMatchBackground#5e98ed40
  • editor.findMatchHighlightBackground#5e98ed40
  • editor.findRangeHighlightBackground#5e98ed40
  • editor.focusedStackFrameHighlightBackground#5e98ed40
  • editor.foreground#0f3763ff
  • editor.hoverHighlightBackground#5e98ed40
  • editor.inactiveSelectionBackground#5e98ed20
  • editor.lineHighlightBackground#f4f7ffff
  • editor.lineHighlightBorder#f4f7ffff
  • editor.rangeHighlightBackground#5e98ed40
  • editor.selectionBackground#5e98ed40
  • editor.selectionHighlightBackground#5e98ed20
  • editor.snippetFinalTabstopHighlightBorder#5e98ed40
  • editor.snippetTabstopHighlightBackground#5e98ed40
  • editor.stackFrameHighlightBackground#5e98ed40
  • editor.wordHighlightBackground#5e98ed20
  • editor.wordHighlightStrongBackground#5e98ed20
  • editorActiveLineNumber.foreground#8996b2ff
  • editorBracketMatch.background#5e98ed20
  • editorBracketMatch.border#0068d2ff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#50658aff
  • editorError.foreground#e54c5dff
  • editorGroup.border#f4f7ffff
  • editorGroup.dropBackground#fdffffff
  • editorGroupHeader.noTabsBackground#fdffffff
  • editorGroupHeader.tabsBackground#f4f7ffff
  • editorGutter.addedBackground#00bfa3ff
  • editorGutter.background#fdffffff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#ff707cff
  • editorGutter.modifiedBackground#70a8feff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#f4f7ffff
  • editorHoverWidget.border#f4f7ffff
  • editorIndentGuide.activeBackground#dbe0edff
  • editorIndentGuide.background#e8ecf7ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#8996b2ff
  • editorLineNumber.foreground#acb6ccff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#e54c5dff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#00d0b3ff
  • editorOverviewRuler.border#f4f7ffff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#ff818bff
  • editorOverviewRuler.errorForeground#e54c5dbf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#81b8ffff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#fdffffff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#f4f7ffff
  • editorSuggestWidget.border#f4f7ffff
  • editorSuggestWidget.foreground#002957ff
  • editorSuggestWidget.highlightForeground#002957ff
  • editorSuggestWidget.selectedBackground#e8ecf7ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#f4f7ffff
  • editorWidget.border#f4f7ffff
  • errorForeground#e54c5dff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#5e98edff
  • foreground#0f3763ff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#8996b2ff
  • gitDecoration.modifiedResourceForeground#746200ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#007962ff
  • input.background#fdffffff
  • input.foreground#002957ff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#006aeeff
  • inputValidation.errorBackground#ffccd2ff
  • inputValidation.errorBorder#ff9fa7ff
  • inputValidation.infoBackground#fdffffff
  • inputValidation.infoBorder#cdd3e3ff
  • inputValidation.warningBackground#fffd8cff
  • inputValidation.warningBorder#ebd162ff
  • list.activeSelectionBackground#e8ecf7ff
  • list.activeSelectionForeground#002957ff
  • list.dropBackground#fdffffff
  • list.errorForeground#e54c5dff
  • list.focusBackground#e8ecf7ff
  • list.highlightForeground#002957ff
  • list.hoverBackground#e8ecf7ff
  • list.inactiveFocusBackground#e8ecf7ff
  • list.inactiveSelectionBackground#e8ecf7ff
  • list.inactiveSelectionForeground#002957ff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#f4f7ffff
  • menu.foreground#3d557dff
  • menu.selectionBackground#e8ecf7ff
  • menu.selectionForeground#002957ff
  • menu.separatorBackground#cdd3e3ff
  • menubar.selectionBackground#e8ecf7ff
  • menubar.selectionForeground#002957ff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#f4f7ffff
  • notificationLink.foreground#006aeeff
  • notifications.background#f4f7ffff
  • notifications.border#f4f7ffff
  • panel.background#f4f7ffff
  • panel.border#f4f7ffff
  • panel.dropBackground#fdffffff
  • panelTitle.activeBorder#006aeeff
  • panelTitle.activeForeground#002957ff
  • panelTitle.inactiveForeground#50658aff
  • peekView.border#f4f7ffff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#f4f7ffff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#fdffffff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#f4f7ffff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#8996b2ff
  • scrollbarSlider.activeBackground#acb6ccbf
  • scrollbarSlider.background#cdd3e3bf
  • scrollbarSlider.hoverBackground#bdc5d8bf
  • settings.checkboxBackground#fdffffff
  • settings.checkboxBorder#acb6ccff
  • settings.checkboxForeground#002957ff
  • settings.dropdownBackground#f4f7ffff
  • settings.dropdownBorder#f4f7ffff
  • settings.dropdownForeground#002957ff
  • settings.dropdownListBorder#dbe0edff
  • settings.headerForeground#002b70ff
  • settings.modifiedItemIndicator#5e98edff
  • settings.numberInputBackground#f4f7ffff
  • settings.numberInputForeground#002957ff
  • settings.textInputBackground#f4f7ffff
  • settings.textInputForeground#002957ff
  • sideBar.background#f4f7ffff
  • sideBar.dropBackground#fdffffff
  • sideBar.foreground#50658aff
  • sideBarSectionHeader.background#f4f7ffff
  • sideBarSectionHeader.foreground#acb6ccff
  • sideBarTitle.foreground#acb6ccff
  • statusBar.background#e8ecf7ff
  • statusBar.debuggingBackground#ff7b42ff
  • statusBar.debuggingForeground#50658aff
  • statusBar.foreground#50658aff
  • statusBar.noFolderBackground#ffa3ffff
  • statusBar.noFolderForeground#50658aff
  • tab.activeBackground#f4f7ffff
  • tab.activeBorder#006aeeff
  • tab.activeForeground#002957ff
  • tab.activeModifiedBorder#006aeebf
  • tab.border#f4f7ffff
  • tab.inactiveBackground#f4f7ffff
  • tab.inactiveForeground#50658aff
  • tab.inactiveModifiedBorder#006aeebf
  • tab.unfocusedActiveForeground#002957ff
  • tab.unfocusedActiveModifiedBorder#006aee80
  • tab.unfocusedInactiveForeground#50658aff
  • tab.unfocusedInactiveModifiedBorder#006aee80
  • terminal.ansiBlack#001e4cff
  • terminal.ansiBlue#0078e5ff
  • terminal.ansiBrightBlack#647598ff
  • terminal.ansiBrightBlue#0078e5ff
  • terminal.ansiBrightCyan#008ac2ff
  • terminal.ansiBrightGreen#008b72ff
  • terminal.ansiBrightMagenta#a053c4ff
  • terminal.ansiBrightRed#d1384eff
  • terminal.ansiBrightWhite#fdffffff
  • terminal.ansiBrightYellow#867300ff
  • terminal.ansiCyan#008ac2ff
  • terminal.ansiGreen#008b72ff
  • terminal.ansiMagenta#a053c4ff
  • terminal.ansiRed#d1384eff
  • terminal.ansiWhite#fdffffff
  • terminal.ansiYellow#867300ff
  • terminal.background#fdffffff
  • terminal.border#f4f7ffff
  • terminal.foreground#0f3763ff
  • terminal.selectionBackground#5e98ed40
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#f4f7ffff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#006aeeff
  • textLink.foreground#006aeeff
  • textPreformat.foreground#7c319fff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#f4f7ffff
  • titleBar.activeForeground#50658aff
  • titleBar.inactiveBackground#f4f7ffff
  • titleBar.inactiveForeground#acb6ccff
  • widget.shadow#dbe0edff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...