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#091c2dff
  • activityBar.dropBackground#011627ff
  • activityBar.foreground#739cf0ff
  • activityBar.inactiveForeground#435162ff
  • activityBarBadge.background#739cf0bf
  • activityBarBadge.foreground#f8ffffff
  • badge.background#739cf0bf
  • badge.foreground#f8ffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#011627ff
  • breadcrumb.focusForeground#e6eefaff
  • breadcrumb.foreground#626f80ff
  • breadcrumbPicker.background#091c2dff
  • button.background#3365b3ff
  • button.foreground#f8ffffff
  • button.hoverBackground#4977c6ff
  • debugExceptionWidget.background#420b0d
  • debugExceptionWidget.border#091c2dff
  • debugToolBar.background#011627ff
  • descriptionForeground#ccccccb3
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#091c2dff
  • dropdown.border#091c2dff
  • dropdown.foreground#e6eefaff
  • editor.background#011627ff
  • editor.findMatchBackground#4d659740
  • editor.findMatchHighlightBackground#4d659740
  • editor.findRangeHighlightBackground#4d659740
  • editor.focusedStackFrameHighlightBackground#4d659740
  • editor.foreground#d3dce8ff
  • editor.hoverHighlightBackground#4d659740
  • editor.inactiveSelectionBackground#4d659720
  • editor.lineHighlightBackground#091c2dff
  • editor.lineHighlightBorder#091c2dff
  • editor.rangeHighlightBackground#4d659740
  • editor.selectionBackground#4d659740
  • editor.selectionHighlightBackground#4d659720
  • editor.snippetFinalTabstopHighlightBorder#4d659740
  • editor.snippetTabstopHighlightBackground#4d659740
  • editor.stackFrameHighlightBackground#4d659740
  • editor.wordHighlightBackground#4d659720
  • editor.wordHighlightStrongBackground#4d659720
  • editorActiveLineNumber.foreground#626f80ff
  • editorBracketMatch.background#4d659720
  • editorBracketMatch.border#739cf0ff
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#80a4c2ff
  • editorError.foreground#d53a3dff
  • editorGroup.border#091c2dff
  • editorGroup.dropBackground#011627ff
  • editorGroupHeader.noTabsBackground#011627ff
  • editorGroupHeader.tabsBackground#091c2dff
  • editorGutter.addedBackground#006800ff
  • editorGutter.background#011627ff
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#aa001fff
  • editorGutter.modifiedBackground#3c5585ff
  • editorHint.foreground#eeeeeeb3
  • editorHoverWidget.background#091c2dff
  • editorHoverWidget.border#091c2dff
  • editorIndentGuide.activeBackground#1d2d3eff
  • editorIndentGuide.background#122435ff
  • editorInfo.foreground#008000
  • editorLineNumber.activeForeground#626f80ff
  • editorLineNumber.foreground#435162ff
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#d53a3dff
  • editorMarkerNavigationInfo.background#008000
  • editorMarkerNavigationWarning.background#4d9e4d
  • editorOverviewRuler.addedForeground#005700ff
  • editorOverviewRuler.border#091c2dff
  • editorOverviewRuler.bracketMatchForeground#a0a0a0
  • editorOverviewRuler.commonContentForeground#60606066
  • editorOverviewRuler.currentContentForeground#40c8ae80
  • editorOverviewRuler.deletedForeground#960012ff
  • editorOverviewRuler.errorForeground#d53a3dbf
  • editorOverviewRuler.findMatchForeground#f6b94db3
  • editorOverviewRuler.incomingContentForeground#40a6ff80
  • editorOverviewRuler.infoForeground#121288b3
  • editorOverviewRuler.modifiedForeground#2b4574ff
  • editorOverviewRuler.rangeHighlightForeground#007acc99
  • editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
  • editorOverviewRuler.warningForeground#128812b3
  • editorOverviewRuler.wordHighlightForeground#a0a0a0cc
  • editorOverviewRuler.wordHighlightStrongForeground#c0a0c0cc
  • editorPane.background#011627ff
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#091c2dff
  • editorSuggestWidget.border#091c2dff
  • editorSuggestWidget.foreground#e6eefaff
  • editorSuggestWidget.highlightForeground#e6eefaff
  • editorSuggestWidget.selectedBackground#122435ff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#4d9e4d
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#091c2dff
  • editorWidget.border#091c2dff
  • errorForeground#d53a3dff
  • extensionButton.prominentBackground#327e36
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#28632b
  • focusBorder#4d6597ff
  • foreground#d3dce8ff
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#626f80ff
  • gitDecoration.modifiedResourceForeground#7ba937ff
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#00b64dff
  • input.background#011627ff
  • input.foreground#e6eefaff
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#739cf0ff
  • inputValidation.errorBackground#470000ff
  • inputValidation.errorBorder#720000ff
  • inputValidation.infoBackground#011627ff
  • inputValidation.infoBorder#283749ff
  • inputValidation.warningBackground#001200ff
  • inputValidation.warningBorder#0b3300ff
  • list.activeSelectionBackground#122435ff
  • list.activeSelectionForeground#e6eefaff
  • list.dropBackground#011627ff
  • list.errorForeground#d53a3dff
  • list.focusBackground#122435ff
  • list.highlightForeground#e6eefaff
  • list.hoverBackground#122435ff
  • list.inactiveFocusBackground#122435ff
  • list.inactiveSelectionBackground#122435ff
  • list.inactiveSelectionForeground#e6eefaff
  • list.invalidItemForeground#b89500
  • list.warningForeground#4d9e4d
  • menu.background#091c2dff
  • menu.foreground#abb6c4ff
  • menu.selectionBackground#122435ff
  • menu.selectionForeground#e6eefaff
  • menu.separatorBackground#283749ff
  • menubar.selectionBackground#122435ff
  • menubar.selectionForeground#e6eefaff
  • merge.commonContentBackground#60606029
  • merge.commonHeaderBackground#60606066
  • merge.currentContentBackground#40c8ae33
  • merge.currentHeaderBackground#40c8ae80
  • merge.incomingContentBackground#40a6ff33
  • merge.incomingHeaderBackground#40a6ff80
  • notificationCenterHeader.background#091c2dff
  • notificationLink.foreground#739cf0ff
  • notifications.background#091c2dff
  • notifications.border#091c2dff
  • panel.background#091c2dff
  • panel.border#091c2dff
  • panel.dropBackground#011627ff
  • panelTitle.activeBorder#739cf0ff
  • panelTitle.activeForeground#e6eefaff
  • panelTitle.inactiveForeground#98a3b2ff
  • peekView.border#091c2dff
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#091c2dff
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#011627ff
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#091c2dff
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#00031aff
  • scrollbarSlider.activeBackground#435162bf
  • scrollbarSlider.background#283749bf
  • scrollbarSlider.hoverBackground#354455bf
  • settings.checkboxBackground#011627ff
  • settings.checkboxBorder#435162ff
  • settings.checkboxForeground#e6eefaff
  • settings.dropdownBackground#091c2dff
  • settings.dropdownBorder#091c2dff
  • settings.dropdownForeground#e6eefaff
  • settings.dropdownListBorder#1d2d3eff
  • settings.headerForeground#d7ecffff
  • settings.modifiedItemIndicator#4d6597ff
  • settings.numberInputBackground#091c2dff
  • settings.numberInputForeground#e6eefaff
  • settings.textInputBackground#091c2dff
  • settings.textInputForeground#e6eefaff
  • sideBar.background#091c2dff
  • sideBar.dropBackground#011627ff
  • sideBar.foreground#98a3b2ff
  • sideBarSectionHeader.background#091c2dff
  • sideBarSectionHeader.foreground#435162ff
  • sideBarTitle.foreground#435162ff
  • statusBar.background#122435ff
  • statusBar.debuggingBackground#871500ff
  • statusBar.debuggingForeground#98a3b2ff
  • statusBar.foreground#98a3b2ff
  • statusBar.noFolderBackground#45105eff
  • statusBar.noFolderForeground#98a3b2ff
  • tab.activeBackground#091c2dff
  • tab.activeBorder#739cf0ff
  • tab.activeForeground#e6eefaff
  • tab.activeModifiedBorder#739cf0bf
  • tab.border#091c2dff
  • tab.inactiveBackground#091c2dff
  • tab.inactiveForeground#98a3b2ff
  • tab.inactiveModifiedBorder#739cf0bf
  • tab.unfocusedActiveForeground#e6eefaff
  • tab.unfocusedActiveModifiedBorder#739cf080
  • tab.unfocusedInactiveForeground#98a3b2ff
  • tab.unfocusedInactiveModifiedBorder#739cf080
  • terminal.ansiBlack#011627ff
  • terminal.ansiBlue#82aaffff
  • terminal.ansiBrightBlack#575656ff
  • terminal.ansiBrightBlue#82aaffff
  • terminal.ansiBrightCyan#7fdbcaff
  • terminal.ansiBrightGreen#22da6eff
  • terminal.ansiBrightMagenta#d19bf4ff
  • terminal.ansiBrightRed#ef5350ff
  • terminal.ansiBrightWhite#ffffffff
  • terminal.ansiBrightYellow#ffeb95ff
  • terminal.ansiCyan#21c7a8ff
  • terminal.ansiGreen#22da6eff
  • terminal.ansiMagenta#d19bf4ff
  • terminal.ansiRed#ef5350ff
  • terminal.ansiWhite#ffffffff
  • terminal.ansiYellow#addb67ff
  • terminal.background#011627ff
  • terminal.border#091c2dff
  • terminal.foreground#d3dce8ff
  • terminal.selectionBackground#4d659740
  • textBlockQuote.background#7f7f7f1a
  • textBlockQuote.border#091c2dff
  • textCodeBlock.background#0a0a0a66
  • textLink.activeForeground#739cf0ff
  • textLink.foreground#739cf0ff
  • textPreformat.foreground#d19bf4ff
  • textSeparator.foreground#ffffff2e
  • titleBar.activeBackground#091c2dff
  • titleBar.activeForeground#98a3b2ff
  • titleBar.inactiveBackground#091c2dff
  • titleBar.inactiveForeground#435162ff
  • widget.shadow#00081dff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...