Tailwind Palette Studio - 44 Themes

Color themes

• 

  Tailwind Fuchsia Dark

• 

  Tailwind Fuchsia Light

• 

  Tailwind Gray Dark

• 

  Tailwind Gray 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#6b7280
• activityBar.background#f3f4f6
• activityBar.foreground#374151
• activityBarBadge.background#6b7280
• activityBarBadge.foreground#f9fafb
• badge.background#6b7280
• badge.foreground#f9fafb
• button.background#6b7280
• button.foreground#f9fafb
• button.hoverBackground#4b5563
• dropdown.background#f9fafb
• dropdown.border#d1d5db
• dropdown.foreground#1f2937
• editor.background#f9fafb
• editor.findMatchBackground#d1d5db
• editor.findMatchHighlightBackground#e5e7eb
• editor.foreground#1f2937
• editor.hoverHighlightBackground#f3f4f6
• editor.lineHighlightBackground#f3f4f6
• editor.selectionBackground#e5e7eb
• editor.selectionHighlightBackground#e5e7eb
• editor.wordHighlightBackground#e5e7eb
• editor.wordHighlightStrongBackground#e5e7eb
• editorCursor.foreground#4b5563
• editorGroupHeader.tabsBackground#f3f4f6
• editorIndentGuide.activeBackground#9ca3af
• editorIndentGuide.background#e5e7eb
• editorLineNumber.activeForeground#4b5563
• editorLineNumber.foreground#9ca3af
• editorRuler.foreground#e5e7eb
• editorWhitespace.foreground#d1d5db
• input.background#f9fafb
• input.border#d1d5db
• input.foreground#1f2937
• inputOption.activeBorder#6b7280
• list.activeSelectionBackground#e5e7eb
• list.activeSelectionForeground#1f2937
• list.focusBackground#e5e7eb
• list.hoverBackground#f3f4f6
• list.inactiveSelectionBackground#f3f4f6
• menuBar.selectionBackground#6b7280
• menuBar.selectionForeground#f9fafb
• panel.background#f3f4f6
• panel.border#e5e7eb
• panelTitle.activeForeground#1f2937
• panelTitle.inactiveForeground#4b5563
• progressBar.background#6b7280
• scrollbar.shadow#e5e7eb
• scrollbarSlider.activeBackground#6b7280
• scrollbarSlider.background#d1d5db
• scrollbarSlider.hoverBackground#9ca3af
• sideBar.background#f3f4f6
• sideBar.foreground#374151
• sideBarSectionHeader.background#e5e7eb
• sideBarSectionHeader.foreground#1f2937
• sideBarTitle.foreground#1f2937
• statusBar.background#4b5563
• statusBar.debuggingBackground#dc2626
• statusBar.debuggingForeground#fef2f2
• statusBar.foreground#f9fafb
• statusBar.noFolderBackground#6b7280
• tab.activeBackground#f9fafb
• tab.activeBorder#6b7280
• tab.activeForeground#1f2937
• tab.border#e5e7eb
• tab.inactiveBackground#f3f4f6
• tab.inactiveForeground#4b5563
• terminal.ansiBlack#111827
• terminal.ansiBlue#3b82f6
• terminal.ansiCyan#06b6d4
• terminal.ansiGreen#22c55e
• terminal.ansiMagenta#a855f7
• terminal.ansiRed#ef4444
• terminal.ansiWhite#f3f4f6
• terminal.ansiYellow#eab308
• terminal.background#f9fafb
• terminal.foreground#1f2937
• titleBar.activeBackground#4b5563
• titleBar.activeForeground#f9fafb
• titleBar.inactiveBackground#6b7280
• titleBar.inactiveForeground#e5e7eb
• window.activeBorder#d1d5db
• window.inactiveBorder#e5e7eb

tokenColors

TextMate scopes and font styles (syntax highlighting rules).