Tailwind Palette Studio - 44 Themes

Color themes

• 

  Tailwind Lime Dark

• 

  Tailwind Lime Light

• 

  Tailwind Neutral Dark

• 

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).