Theme Showcase

This page is live. Use the Theme Dropdown in the header to change the theme. Watch how the specific Corbs-theme variables (like Containers and Tertiary colors) update instantly.

1. Color Palette

Base Colors

Accents & Typography

Containers

2. Typography

3. UI Components

Testing the specific element styles we implemented.

Blockquotes

This is a blockquote. In the Corbs theme, this uses secondary-container-bg for the background, tertiary-color for the border, and on-secondary-container-color for text.

Tags (Pills)

These use the new Pill styling:

Data Tables

The custom grid styling for data.

4. Syntax Highlighting

This section tests the token colors of your currently selected Syntax Highlight theme (e.g., Atom Dark, Dracula).

JavaScript

// This is a comment
import React, { useState } from 'react';

const SyntaxTest = ({ name, count = 0 }) => {
  const [isActive, setIsActive] = useState(false);

  // Function definition
  function calculateScore(points) {
    if (points > 100) return "High";
    return `Score: ${points}`;
  }

  return (
    <div className="container">
      <h1 id="title">Hello, {name}!</h1>
      <p>Count is: <span className="highlight">{count}</span></p>
      {/* Boolean and String test */}
      <button onClick={() => setIsActive(!isActive)}>
        Toggle {isActive ? "On" : "Off"}
      </button>
    </div>
  );
};

export default SyntaxTest;

@import url('https://fonts.googleapis.com/css2');

/* Selector and properties */
body {
  background-color: #1a1a1a;
  color: var(--text-color);
  font-family: 'Inter', sans-serif;
}

#header .logo {
  font-size: 2rem;
  color: #ff79c6; /* Hex value */
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .container {
    padding: 10px;
    display: block !important;
  }
}