Tailwind Palette Studio - 44 Themes

Color themes

• 

  Tailwind Cyan Dark

• 

  Tailwind Cyan Light

• 

  Tailwind Emerald Dark

• 

  Tailwind Emerald 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#10b981
• activityBar.background#d1fae5
• activityBar.foreground#047857
• activityBarBadge.background#10b981
• activityBarBadge.foreground#ecfdf5
• badge.background#10b981
• badge.foreground#ecfdf5
• button.background#10b981
• button.foreground#ecfdf5
• button.hoverBackground#059669
• dropdown.background#ecfdf5
• dropdown.border#6ee7b7
• dropdown.foreground#065f46
• editor.background#ecfdf5
• editor.findMatchBackground#6ee7b7
• editor.findMatchHighlightBackground#a7f3d0
• editor.foreground#065f46
• editor.hoverHighlightBackground#d1fae5
• editor.lineHighlightBackground#d1fae5
• editor.selectionBackground#a7f3d0
• editor.selectionHighlightBackground#a7f3d0
• editor.wordHighlightBackground#a7f3d0
• editor.wordHighlightStrongBackground#a7f3d0
• editorCursor.foreground#059669
• editorGroupHeader.tabsBackground#d1fae5
• editorIndentGuide.activeBackground#34d399
• editorIndentGuide.background#a7f3d0
• editorLineNumber.activeForeground#059669
• editorLineNumber.foreground#34d399
• editorRuler.foreground#a7f3d0
• editorWhitespace.foreground#6ee7b7
• input.background#ecfdf5
• input.border#6ee7b7
• input.foreground#065f46
• inputOption.activeBorder#10b981
• list.activeSelectionBackground#a7f3d0
• list.activeSelectionForeground#065f46
• list.focusBackground#a7f3d0
• list.hoverBackground#d1fae5
• list.inactiveSelectionBackground#d1fae5
• menuBar.selectionBackground#10b981
• menuBar.selectionForeground#ecfdf5
• panel.background#d1fae5
• panel.border#a7f3d0
• panelTitle.activeForeground#065f46
• panelTitle.inactiveForeground#059669
• progressBar.background#10b981
• scrollbar.shadow#a7f3d0
• scrollbarSlider.activeBackground#10b981
• scrollbarSlider.background#6ee7b7
• scrollbarSlider.hoverBackground#34d399
• sideBar.background#d1fae5
• sideBar.foreground#047857
• sideBarSectionHeader.background#a7f3d0
• sideBarSectionHeader.foreground#065f46
• sideBarTitle.foreground#065f46
• statusBar.background#059669
• statusBar.debuggingBackground#dc2626
• statusBar.debuggingForeground#fef2f2
• statusBar.foreground#ecfdf5
• statusBar.noFolderBackground#10b981
• tab.activeBackground#ecfdf5
• tab.activeBorder#10b981
• tab.activeForeground#065f46
• tab.border#a7f3d0
• tab.inactiveBackground#d1fae5
• tab.inactiveForeground#059669
• terminal.ansiBlack#064e3b
• terminal.ansiBlue#3b82f6
• terminal.ansiCyan#06b6d4
• terminal.ansiGreen#22c55e
• terminal.ansiMagenta#a855f7
• terminal.ansiRed#ef4444
• terminal.ansiWhite#d1fae5
• terminal.ansiYellow#eab308
• terminal.background#ecfdf5
• terminal.foreground#065f46
• titleBar.activeBackground#059669
• titleBar.activeForeground#ecfdf5
• titleBar.inactiveBackground#10b981
• titleBar.inactiveForeground#a7f3d0
• window.activeBorder#6ee7b7
• window.inactiveBorder#a7f3d0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).