Tailwind CSS v3.4 Dark Theme

Botwatch Theme

A premium black-themed design system built for dark interfaces. Inspired by monitoring dashboards, cyber tools, and modern dark UIs.

{{ stat.value }}
{{ stat.label }}

Color Palette

Click any swatch to copy its hex value

{{ group.name }}

{{ swatch.name }}
{{ swatch.hex }}

Components

Buttons

Input Fields

Cards

Performance

Optimized for speed with minimal overhead and fast rendering.

Security

Built with security-first principles and encrypted data flows.

Layout

Flexible grid system for responsive dashboards and panels.

Badges & Tags

Active Info Feature Critical Warning Default

Toggle Switches

Progress Bars

{{ bar.label }} {{ bar.value }}%

Table

Service Status Uptime Latency
{{ row.service }} {{ row.status }} {{ row.uptime }} {{ row.latency }}

Alerts

Success
Theme configuration saved and applied.
Info
Dark mode is the default and recommended experience.
Warning
Custom overrides may conflict with base tokens.
Error
Failed to compile theme tokens.

Code Block

tailwind.config.js 
module.exports = {
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        surface: { 0: '#000', 1: '#0a0a0a' },
        neon: { green: '#00ff88' },
      }
    }
  }
}

Tailwind Config

Copy this into your tailwind.config.js

tailwind.config.js 
{{ configText }}

Typography

Inter — Font Family
The quick brown fox
Jumps over the lazy dog
0123456789 — Numbers
Monitor · Track · Analyze · Report
Body text renders in Inter at 16px with relaxed line height for maximum readability in dark environments.
JetBrains Mono — Code / Data
$ npm install botwatch-theme
interface DashboardProps { theme: 'dark' }
const uptime = 99.97%;
Scale
{{ size.size }} {{ size.name }}
{{ toast.message }}