Skip to content

Themes & Visual Appearance

SnippetHub gives you complete control over your visual workspace, allowing you to tailor the interface to your environment, lighting conditions, and screen size.

Curated Color Themes

SnippetHub features 4 handcrafted themes with full support for light and dark operating system modes:

  • Default Light: A crisp, high-contrast light theme with subtle slate borders, optimized for daytime reading.
  • Default Dark: A midnight dark palette with rich contrast designed to eliminate eye strain during evening workflows.
  • Solarized: A scientifically calibrated color palette featuring warm dark backgrounds and high-legibility syntax accents.
  • Monokai: A vibrant developer classic with warm charcoal tones and neon syntax accents, ideal for code-heavy libraries.

Changing Your Theme

You can switch themes with zero friction directly from the top bar:

  1. Click your profile avatar button in the top-right corner of the side panel.
  2. Under the Customization section, select your theme from the Theme dropdown menu (Light, Dark, Solarized, or Monokai).
  3. The interface transitions instantaneously with zero flicker, and your preference is saved across browser sessions.

Display Density

Whether you are working on a 13-inch laptop screen or an ultra-wide desktop monitor, SnippetHub offers 3 layout densities:

  • Comfortable (Default): Well-balanced padding, spacious action buttons, and clear visual separation between snippet cards.
  • Compact: Tightly spaced list items with condensed padding, allowing you to see 2–3x more snippets simultaneously without scrolling.
  • Spacious: Extra breathing room and larger touch-friendly targets, ideal for touchscreen laptops or expansive displays.

To change density, open the avatar menu and choose your preferred mode from the Layout dropdown.

Folder Color & Emoji Accents

Make folder navigation effortless at a glance:

  • Assign an emoji icon (e.g., 💻 for Code, 📧 for Email, 🚀 for Projects).
  • Assign a color accent swatch (Blue, Indigo, Emerald, Amber, Rose, etc.) or select a custom HEX color.
  • Custom colors and icons appear in the folder selector dropdown, on snippet cards, and in folder management menus.
  • Configure these directly in the New Folder and Edit Folder modals.

Dynamic Tag Colors

SnippetHub automatically colors tags using a deterministic color algorithm:

  • Every unique tag (such as #javascript or #sales) is deterministically mapped to a consistent palette color across all cards and filters.
  • You can override colors for specific tags to create your own organizational color system.
  • Tags appear as softly tinted chips with subtle borders, maintaining visual hierarchy without cluttering your view.