Tailwind Palette Studio - 44 Themes

Color themes

• 

  Tailwind Amber Dark

• 

  Tailwind Amber Light

• 

  Tailwind Blue Dark

• 

  Tailwind Blue 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#3b82f6
• activityBar.background#dbeafe
• activityBar.foreground#1d4ed8
• activityBarBadge.background#3b82f6
• activityBarBadge.foreground#eff6ff
• badge.background#3b82f6
• badge.foreground#eff6ff
• button.background#3b82f6
• button.foreground#eff6ff
• button.hoverBackground#2563eb
• dropdown.background#eff6ff
• dropdown.border#93c5fd
• dropdown.foreground#1e40af
• editor.background#eff6ff
• editor.findMatchBackground#93c5fd
• editor.findMatchHighlightBackground#bfdbfe
• editor.foreground#1e40af
• editor.hoverHighlightBackground#dbeafe
• editor.lineHighlightBackground#dbeafe
• editor.selectionBackground#bfdbfe
• editor.selectionHighlightBackground#bfdbfe
• editor.wordHighlightBackground#bfdbfe
• editor.wordHighlightStrongBackground#bfdbfe
• editorCursor.foreground#2563eb
• editorGroupHeader.tabsBackground#dbeafe
• editorIndentGuide.activeBackground#60a5fa
• editorIndentGuide.background#bfdbfe
• editorLineNumber.activeForeground#2563eb
• editorLineNumber.foreground#60a5fa
• editorRuler.foreground#bfdbfe
• editorWhitespace.foreground#93c5fd
• input.background#eff6ff
• input.border#93c5fd
• input.foreground#1e40af
• inputOption.activeBorder#3b82f6
• list.activeSelectionBackground#bfdbfe
• list.activeSelectionForeground#1e40af
• list.focusBackground#bfdbfe
• list.hoverBackground#dbeafe
• list.inactiveSelectionBackground#dbeafe
• menuBar.selectionBackground#3b82f6
• menuBar.selectionForeground#eff6ff
• panel.background#dbeafe
• panel.border#bfdbfe
• panelTitle.activeForeground#1e40af
• panelTitle.inactiveForeground#2563eb
• progressBar.background#3b82f6
• scrollbar.shadow#bfdbfe
• scrollbarSlider.activeBackground#3b82f6
• scrollbarSlider.background#93c5fd
• scrollbarSlider.hoverBackground#60a5fa
• sideBar.background#dbeafe
• sideBar.foreground#1d4ed8
• sideBarSectionHeader.background#bfdbfe
• sideBarSectionHeader.foreground#1e40af
• sideBarTitle.foreground#1e40af
• statusBar.background#2563eb
• statusBar.debuggingBackground#dc2626
• statusBar.debuggingForeground#fef2f2
• statusBar.foreground#eff6ff
• statusBar.noFolderBackground#3b82f6
• tab.activeBackground#eff6ff
• tab.activeBorder#3b82f6
• tab.activeForeground#1e40af
• tab.border#bfdbfe
• tab.inactiveBackground#dbeafe
• tab.inactiveForeground#2563eb
• terminal.ansiBlack#1e3a8a
• terminal.ansiBlue#3b82f6
• terminal.ansiCyan#06b6d4
• terminal.ansiGreen#22c55e
• terminal.ansiMagenta#a855f7
• terminal.ansiRed#ef4444
• terminal.ansiWhite#dbeafe
• terminal.ansiYellow#eab308
• terminal.background#eff6ff
• terminal.foreground#1e40af
• titleBar.activeBackground#2563eb
• titleBar.activeForeground#eff6ff
• titleBar.inactiveBackground#3b82f6
• titleBar.inactiveForeground#bfdbfe
• window.activeBorder#93c5fd
• window.inactiveBorder#bfdbfe

tokenColors

TextMate scopes and font styles (syntax highlighting rules).