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#000a24ff
  • activityBar.dropBackground#00011fff
  • activityBar.foreground#0078f4ff
  • activityBar.inactiveForeground#29354cff
  • activityBarBadge.background#0078f4bf
  • activityBarBadge.foreground#b2b9cbff
  • badge.background#0078f4bf
  • badge.foreground#b2b9cbff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#00011fff
  • breadcrumb.focusForeground#a4acbeff
  • breadcrumb.foreground#414c62ff
  • breadcrumbPicker.background#000a24ff
  • button.background#0051c5ff
  • button.foreground#b2b9cbff
  • button.hoverBackground#005dd4ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#000a24ff
  • debugToolBar.background#00011fff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#000a24ff
  • dropdown.border#000a24ff
  • dropdown.foreground#a4acbeff
  • editor.background#00011fff
  • editor.findMatchBackground#8a00a340
  • editor.findMatchHighlightBackground#8a00a340
  • editor.findRangeHighlightBackground#8a00a340
  • editor.focusedStackFrameHighlightBackground#8a00a340
  • editor.foreground#969eb1ff
  • editor.hoverHighlightBackground#8a00a340
  • editor.inactiveSelectionBackground#8a00a320
  • editor.lineHighlightBackground#000a24ff
  • editor.lineHighlightBorder#000a24ff
  • editor.rangeHighlightBackground#8a00a340
  • editor.selectionBackground#8a00a340
  • editor.selectionHighlightBackground#8a00a320
  • editor.snippetFinalTabstopHighlightBorder#8a00a340
  • editor.snippetTabstopHighlightBackground#8a00a340
  • editor.stackFrameHighlightBackground#8a00a340
  • editor.wordHighlightBackground#8a00a320
  • editor.wordHighlightStrongBackground#8a00a320
  • editorActiveLineNumber.foreground#414c62ff
  • editorBracketMatch.background#8a00a320
  • editorBracketMatch.border#b932d0ff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#6a7388ff
  • editorError.foreground#933840ff
  • editorGroup.border#000a24ff
  • editorGroup.dropBackground#00011fff
  • editorGroupHeader.noTabsBackground#00011fff
  • editorGroupHeader.tabsBackground#000a24ff
  • editorGutter.addedBackground#005134ff
  • editorGutter.background#00011fff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#761d29ff
  • editorGutter.modifiedBackground#7c0095ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#000a24ff
  • editorHoverWidget.border#000a24ff
  • editorIndentGuide.activeBackground#0a1a30ff
  • editorIndentGuide.background#011329ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#414c62ff
  • editorLineNumber.foreground#29354cff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#933840ff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#00452aff
  • editorOverviewRuler.border#000a24ff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#680e1fff
  • editorOverviewRuler.errorForeground#933840bf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#6e0088ff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#00011fff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#000a24ff
  • editorSuggestWidget.border#000a24ff
  • editorSuggestWidget.foreground#a4acbeff
  • editorSuggestWidget.highlightForeground#a4acbeff
  • editorSuggestWidget.selectedBackground#011329ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#000a24ff
  • editorWidget.border#000a24ff
  • errorForeground#933840ff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#8a00a3ff
  • foreground#969eb1ff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#414c62ff
  • gitDecoration.modifiedResourceForeground#827125ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#008966ff
  • input.background#00011fff
  • input.foreground#a4acbeff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#0078f4ff
  • inputValidation.errorBackground#350000ff
  • inputValidation.errorBorder#50000bff
  • inputValidation.infoBackground#00011fff
  • inputValidation.infoBorder#142238ff
  • inputValidation.warningBackground#1b0000ff
  • inputValidation.warningBorder#2e2000ff
  • list.activeSelectionBackground#011329ff
  • list.activeSelectionForeground#a4acbeff
  • list.dropBackground#00011fff
  • list.errorForeground#933840ff
  • list.focusBackground#011329ff
  • list.highlightForeground#a4acbeff
  • list.hoverBackground#011329ff
  • list.inactiveFocusBackground#011329ff
  • list.inactiveSelectionBackground#011329ff
  • list.inactiveSelectionForeground#a4acbeff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#000a24ff
  • menu.foreground#788195ff
  • menu.selectionBackground#011329ff
  • menu.selectionForeground#a4acbeff
  • menu.separatorBackground#142238ff
  • menubar.selectionBackground#011329ff
  • menubar.selectionForeground#a4acbeff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#000a24ff
  • notificationLink.foreground#0078f4ff
  • notifications.background#000a24ff
  • notifications.border#000a24ff
  • panel.background#000a24ff
  • panel.border#000a24ff
  • panel.dropBackground#00011fff
  • panelTitle.activeBorder#0078f4ff
  • panelTitle.activeForeground#a4acbeff
  • panelTitle.inactiveForeground#6a7388ff
  • peekView.border#000a24ff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#000a24ff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#00011fff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#000a24ff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#00011fff
  • scrollbarSlider.activeBackground#29354cbf
  • scrollbarSlider.background#142238bf
  • scrollbarSlider.hoverBackground#1e2b42bf
  • settings.checkboxBackground#00011fff
  • settings.checkboxBorder#29354cff
  • settings.checkboxForeground#a4acbeff
  • settings.dropdownBackground#000a24ff
  • settings.dropdownBorder#000a24ff
  • settings.dropdownForeground#a4acbeff
  • settings.dropdownListBorder#0a1a30ff
  • settings.headerForeground#fb74ffff
  • settings.modifiedItemIndicator#8a00a3ff
  • settings.numberInputBackground#000a24ff
  • settings.numberInputForeground#a4acbeff
  • settings.textInputBackground#000a24ff
  • settings.textInputForeground#a4acbeff
  • sideBar.background#000a24ff
  • sideBar.dropBackground#00011fff
  • sideBar.foreground#6a7388ff
  • sideBarSectionHeader.background#000a24ff
  • sideBarSectionHeader.foreground#29354cff
  • sideBarTitle.foreground#29354cff
  • statusBar.background#011329ff
  • statusBar.debuggingBackground#7a0000ff
  • statusBar.debuggingForeground#6a7388ff
  • statusBar.foreground#6a7388ff
  • statusBar.noFolderBackground#3e005dff
  • statusBar.noFolderForeground#6a7388ff
  • tab.activeBackground#000a24ff
  • tab.activeBorder#0078f4ff
  • tab.activeForeground#a4acbeff
  • tab.activeModifiedBorder#0078f4bf
  • tab.border#000a24ff
  • tab.inactiveBackground#000a24ff
  • tab.inactiveForeground#6a7388ff
  • tab.inactiveModifiedBorder#0078f4bf
  • tab.unfocusedActiveForeground#a4acbeff
  • tab.unfocusedActiveModifiedBorder#0078f480
  • tab.unfocusedInactiveForeground#6a7388ff
  • tab.unfocusedInactiveModifiedBorder#0078f480
  • terminal.ansiBlack#00011fff
  • terminal.ansiBlue#ca44e0ff
  • terminal.ansiBrightBlack#29354cff
  • terminal.ansiBrightBlue#ca44e0ff
  • terminal.ansiBrightCyan#0090b4ff
  • terminal.ansiBrightGreen#009874ff
  • terminal.ansiBrightMagenta#6677f4ff
  • terminal.ansiBrightRed#c26367ff
  • terminal.ansiBrightWhite#b2b9cbff
  • terminal.ansiBrightYellow#917f33ff
  • terminal.ansiCyan#0090b4ff
  • terminal.ansiGreen#00452aff
  • terminal.ansiMagenta#6677f4ff
  • terminal.ansiRed#680e1fff
  • terminal.ansiWhite#969eb1ff
  • terminal.ansiYellow#917f33ff
  • terminal.background#00011fff
  • terminal.border#000a24ff
  • terminal.foreground#969eb1ff
  • terminal.selectionBackground#8a00a340
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#000a24ff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#0078f4ff
  • textLink.foreground#0078f4ff
  • textPreformat.foreground#6677f4ff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#000a24ff
  • titleBar.activeForeground#6a7388ff
  • titleBar.inactiveBackground#000a24ff
  • titleBar.inactiveForeground#29354cff
  • widget.shadow#00011fff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...