Tailwind Palette Studio - 44 Themes

Color themes

• 

  Tailwind Yellow Dark

• 

  Tailwind Yellow Light

• 

  Tailwind Zinc Dark

• 

  Tailwind Zinc Light

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.activeBorder#71717a
• activityBar.background#f4f4f5
• activityBar.foreground#3f3f46
• activityBarBadge.background#71717a
• activityBarBadge.foreground#fafafa
• badge.background#71717a
• badge.foreground#fafafa
• button.background#71717a
• button.foreground#fafafa
• button.hoverBackground#52525b
• dropdown.background#fafafa
• dropdown.border#d4d4d8
• dropdown.foreground#27272a
• editor.background#fafafa
• editor.findMatchBackground#d4d4d8
• editor.findMatchHighlightBackground#e4e4e7
• editor.foreground#27272a
• editor.hoverHighlightBackground#f4f4f5
• editor.lineHighlightBackground#f4f4f5
• editor.selectionBackground#e4e4e7
• editor.selectionHighlightBackground#e4e4e7
• editor.wordHighlightBackground#e4e4e7
• editor.wordHighlightStrongBackground#e4e4e7
• editorCursor.foreground#52525b
• editorGroupHeader.tabsBackground#f4f4f5
• editorIndentGuide.activeBackground#a1a1aa
• editorIndentGuide.background#e4e4e7
• editorLineNumber.activeForeground#52525b
• editorLineNumber.foreground#a1a1aa
• editorRuler.foreground#e4e4e7
• editorWhitespace.foreground#d4d4d8
• input.background#fafafa
• input.border#d4d4d8
• input.foreground#27272a
• inputOption.activeBorder#71717a
• list.activeSelectionBackground#e4e4e7
• list.activeSelectionForeground#27272a
• list.focusBackground#e4e4e7
• list.hoverBackground#f4f4f5
• list.inactiveSelectionBackground#f4f4f5
• menuBar.selectionBackground#71717a
• menuBar.selectionForeground#fafafa
• panel.background#f4f4f5
• panel.border#e4e4e7
• panelTitle.activeForeground#27272a
• panelTitle.inactiveForeground#52525b
• progressBar.background#71717a
• scrollbar.shadow#e4e4e7
• scrollbarSlider.activeBackground#71717a
• scrollbarSlider.background#d4d4d8
• scrollbarSlider.hoverBackground#a1a1aa
• sideBar.background#f4f4f5
• sideBar.foreground#3f3f46
• sideBarSectionHeader.background#e4e4e7
• sideBarSectionHeader.foreground#27272a
• sideBarTitle.foreground#27272a
• statusBar.background#52525b
• statusBar.debuggingBackground#dc2626
• statusBar.debuggingForeground#fef2f2
• statusBar.foreground#fafafa
• statusBar.noFolderBackground#71717a
• tab.activeBackground#fafafa
• tab.activeBorder#71717a
• tab.activeForeground#27272a
• tab.border#e4e4e7
• tab.inactiveBackground#f4f4f5
• tab.inactiveForeground#52525b
• terminal.ansiBlack#18181b
• terminal.ansiBlue#3b82f6
• terminal.ansiCyan#06b6d4
• terminal.ansiGreen#22c55e
• terminal.ansiMagenta#a855f7
• terminal.ansiRed#ef4444
• terminal.ansiWhite#f4f4f5
• terminal.ansiYellow#eab308
• terminal.background#fafafa
• terminal.foreground#27272a
• titleBar.activeBackground#52525b
• titleBar.activeForeground#fafafa
• titleBar.inactiveBackground#71717a
• titleBar.inactiveForeground#e4e4e7
• window.activeBorder#d4d4d8
• window.inactiveBorder#e4e4e7

tokenColors

TextMate scopes and font styles (syntax highlighting rules).