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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...

Dainty - Coding Theme