batua

    Theme Editor

    Primary Colors

    hsl(0 0% 20.5%)
    hsl(0 0% 98.5%)

    Secondary Colors

    hsl(0 0% 97%)
    hsl(0 0% 20.5%)

    Accent Colors

    hsl(0 0% 97%)
    hsl(0 0% 20.5%)

    Base Colors

    hsl(0 0% 100%)
    hsl(0 0% 14.5%)

    Card Colors

    hsl(0 0% 100%)
    hsl(0 0% 14.5%)

    Popover Colors

    hsl(0 0% 100%)
    hsl(0 0% 14.5%)

    Muted Colors

    hsl(0 0% 97%)
    hsl(0 0% 55.6%)

    Destructive Colors

    hsl(0 80% 57.7%)
    hsl(0 0% 100%)

    Border & Input Colors

    hsl(0 0% 92.2%)
    hsl(0 0% 92.2%)
    hsl(0 0% 70.8%)

    Chart Colors

    hsl(41 78% 64.6%)
    hsl(185 68% 60%)
    hsl(227 65% 39.8%)
    hsl(84 63% 82.8%)
    hsl(70 68% 76.9%)

    Sidebar Colors

    hsl(0 0% 98.5%)
    hsl(0 0% 14.5%)
    hsl(0 0% 20.5%)
    hsl(0 0% 98.5%)
    hsl(0 0% 97%)
    hsl(0 0% 20.5%)
    hsl(0 0% 92.2%)
    hsl(0 0% 70.8%)

    Import Custom CSS

    Paste your CSS file below to customize the theme colors. Make sure to include variables like --primary, --background, etc.

    Login/Signup Preview

    Sending Transaction

    Code

    index.css
    :root {
      --background: oklch(1.00 0 0);
      --foreground: oklch(0.26 0 0);
      --card: oklch(1.00 0 0);
      --card-foreground: oklch(0.26 0 0);
      --popover: oklch(1.00 0 0);
      --popover-foreground: oklch(0.26 0 0);
      --primary: oklch(0.33 0 0);
      --primary-foreground: oklch(0.99 0 0);
      --secondary: oklch(0.98 0 0);
      --secondary-foreground: oklch(0.33 0 0);
      --muted: oklch(0.98 0 0);
      --muted-foreground: oklch(0.65 0 0);
      --accent: oklch(0.98 0 0);
      --accent-foreground: oklch(0.33 0 0);
      --destructive: oklch(0.62 0.21 25.77);
      --destructive-foreground: oklch(1.00 0 0);
      --border: oklch(0.94 0 0);
      --input: oklch(0.94 0 0);
      --ring: oklch(0.77 0 0);
      --chart-1: oklch(0.82 0.13 84.49);
      --chart-2: oklch(0.80 0.11 203.60);
      --chart-3: oklch(0.42 0.17 266.78);
      --chart-4: oklch(0.92 0.08 125.58);
      --chart-5: oklch(0.92 0.10 116.19);
      --sidebar: oklch(0.99 0 0);
      --sidebar-foreground: oklch(0.26 0 0);
      --sidebar-primary: oklch(0.33 0 0);
      --sidebar-primary-foreground: oklch(0.99 0 0);
      --sidebar-accent: oklch(0.98 0 0);
      --sidebar-accent-foreground: oklch(0.33 0 0);
      --sidebar-border: oklch(0.94 0 0);
      --sidebar-ring: oklch(0.77 0 0);
      --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
      --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
      --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      --radius: 0.625rem;
      --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
      --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
      --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
      --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
      --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
      --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
      --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
      --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
    }
    
    .dark {
      --background: oklch(0.14 0.00 285.82);
      --foreground: oklch(0.98 0 0);
      --card: oklch(0.14 0.00 285.82);
      --card-foreground: oklch(0.98 0 0);
      --popover: oklch(0.14 0.00 285.82);
      --popover-foreground: oklch(0.98 0 0);
      --primary: oklch(0.98 0 0);
      --primary-foreground: oklch(0.21 0.01 285.88);
      --secondary: oklch(0.27 0.01 286.03);
      --secondary-foreground: oklch(0.98 0 0);
      --muted: oklch(0.27 0.01 286.03);
      --muted-foreground: oklch(0.71 0.01 286.07);
      --accent: oklch(0.27 0.01 286.03);
      --accent-foreground: oklch(0.98 0 0);
      --destructive: oklch(0.40 0.13 25.72);
      --destructive-foreground: oklch(0.97 0.01 17.38);
      --border: oklch(0.27 0.01 286.03);
      --input: oklch(0.27 0.01 286.03);
      --ring: oklch(0.87 0.01 286.29);
      --chart-1: oklch(0.53 0.19 262.13);
      --chart-2: oklch(0.70 0.13 165.46);
      --chart-3: oklch(0.72 0.15 60.63);
      --chart-4: oklch(0.62 0.20 312.73);
      --chart-5: oklch(0.61 0.21 6.39);
      --sidebar: oklch(0.21 0.01 285.88);
      --sidebar-foreground: oklch(0.97 0.00 286.38);
      --sidebar-primary: oklch(0.49 0.22 264.39);
      --sidebar-primary-foreground: oklch(1.00 0 0);
      --sidebar-accent: oklch(0.27 0.01 286.03);
      --sidebar-accent-foreground: oklch(0.97 0.00 286.38);
      --sidebar-border: oklch(0.27 0.01 286.03);
      --sidebar-ring: oklch(0.87 0.01 286.29);
      --font-sans: undefined;
      --font-serif: undefined;
      --font-mono: undefined;
      --radius: 0.625rem;
      --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
      --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
      --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
      --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
      --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
      --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
      --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
      --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
    }
    
    @theme inline {
      --color-background: var(--background);
      --color-foreground: var(--foreground);
      --color-card: var(--card);
      --color-card-foreground: var(--card-foreground);
      --color-popover: var(--popover);
      --color-popover-foreground: var(--popover-foreground);
      --color-primary: var(--primary);
      --color-primary-foreground: var(--primary-foreground);
      --color-secondary: var(--secondary);
      --color-secondary-foreground: var(--secondary-foreground);
      --color-muted: var(--muted);
      --color-muted-foreground: var(--muted-foreground);
      --color-accent: var(--accent);
      --color-accent-foreground: var(--accent-foreground);
      --color-destructive: var(--destructive);
      --color-destructive-foreground: var(--destructive-foreground);
      --color-border: var(--border);
      --color-input: var(--input);
      --color-ring: var(--ring);
      --color-chart-1: var(--chart-1);
      --color-chart-2: var(--chart-2);
      --color-chart-3: var(--chart-3);
      --color-chart-4: var(--chart-4);
      --color-chart-5: var(--chart-5);
      --color-sidebar: var(--sidebar);
      --color-sidebar-foreground: var(--sidebar-foreground);
      --color-sidebar-primary: var(--sidebar-primary);
      --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
      --color-sidebar-accent: var(--sidebar-accent);
      --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
      --color-sidebar-border: var(--sidebar-border);
      --color-sidebar-ring: var(--sidebar-ring);
    
      --font-sans: var(--font-sans);
      --font-mono: var(--font-mono);
      --font-serif: var(--font-serif);
    
      --radius-sm: calc(var(--radius) - 4px);
      --radius-md: calc(var(--radius) - 2px);
      --radius-lg: var(--radius);
      --radius-xl: calc(var(--radius) + 4px);
    
      --shadow-2xs: var(--shadow-2xs);
      --shadow-xs: var(--shadow-xs);
      --shadow-sm: var(--shadow-sm);
      --shadow: var(--shadow);
      --shadow-md: var(--shadow-md);
      --shadow-lg: var(--shadow-lg);
      --shadow-xl: var(--shadow-xl);
      --shadow-2xl: var(--shadow-2xl);
    }

    Theme Editor

    Primary Colors

    hsl(0 0% 20.5%)
    hsl(0 0% 98.5%)

    Secondary Colors

    hsl(0 0% 97%)
    hsl(0 0% 20.5%)

    Accent Colors

    hsl(0 0% 97%)
    hsl(0 0% 20.5%)

    Base Colors

    hsl(0 0% 100%)
    hsl(0 0% 14.5%)

    Card Colors

    hsl(0 0% 100%)
    hsl(0 0% 14.5%)

    Popover Colors

    hsl(0 0% 100%)
    hsl(0 0% 14.5%)

    Muted Colors

    hsl(0 0% 97%)
    hsl(0 0% 55.6%)

    Destructive Colors

    hsl(0 80% 57.7%)
    hsl(0 0% 100%)

    Border & Input Colors

    hsl(0 0% 92.2%)
    hsl(0 0% 92.2%)
    hsl(0 0% 70.8%)

    Chart Colors

    hsl(41 78% 64.6%)
    hsl(185 68% 60%)
    hsl(227 65% 39.8%)
    hsl(84 63% 82.8%)
    hsl(70 68% 76.9%)

    Sidebar Colors

    hsl(0 0% 98.5%)
    hsl(0 0% 14.5%)
    hsl(0 0% 20.5%)
    hsl(0 0% 98.5%)
    hsl(0 0% 97%)
    hsl(0 0% 20.5%)
    hsl(0 0% 92.2%)
    hsl(0 0% 70.8%)

    Import Custom CSS

    Paste your CSS file below to customize the theme colors. Make sure to include variables like --primary, --background, etc.

    Send Transaction

    Review and confirm this transaction from your wallet

    Network
    Sepolia
    Network fee (est.)
    Calculating...
    Sponsored by Pimlico

    Transaction Details

    Sign in

    Create or access your wallet securely with your passkey

    Already have a Batua?

    Or

    New to Batua?

    Your credentials are stored securely and never leave your device