Skip to main content

Colors

Master TheDock's color system to create beautiful, consistent, and accessible themes.

Overview​

TheDock uses a 5-color palette system that automatically generates tints and shades, calculates contrast ratios, and ensures accessibility across your entire theme.

When you change a color in your palette, every element using that color updates instantly throughout your theme.

The Color Palette​

Five Core Colors​

ColorPurposeTypical Usage
BaseBackgroundPage backgrounds, light sections
ContrastTextBody text, headings, borders
PrimaryBrandMain brand color, important elements
SecondarySupportSupporting brand color, secondary actions
AccentHighlightCall-to-action buttons, links, highlights

Automatic Variants​

Each core color generates variants:

  • Tints - Lighter versions (for light colors, only shades are generated)
  • Shades - Darker versions (for dark colors, only tints are generated)

Example for "Primary":

  • primary - The base color
  • primary-tint1 - Slightly lighter
  • primary-tint2 - Much lighter
  • primary-shade1 - Slightly darker
  • primary-shade2 - Much darker

Editing Colors​

Using the Color Picker​

  1. Click on any color swatch in the palette
  2. Use the visual picker to choose a color
  3. Or enter a specific value:
    • HEX - #0074ff
    • RGB - 0, 116, 255

Presets​

Click Presets to access curated color palettes. These are professionally designed combinations that work well together.

Randomize​

Feeling adventurous? Click Randomize to generate a random palette. Keep clicking until you find inspiration!

Tip: Use Undo (Ctrl/Cmd + Z) to revert if you don't like the result.

Invert​

Click Invert to swap your Base and Contrast colors. This is useful for:

  • Creating dark mode versions
  • Testing legibility
  • Exploring alternative looks

Swatches​

Need more colors beyond the 5-color palette? Use Swatches.

What are Swatches?​

Swatches are additional custom colors you can add to your theme. Unlike palette colors, swatches don't generate automatic tints/shades.

Creating a Swatch​

  1. Scroll to the Swatches section
  2. Click Add Swatch
  3. Choose a solid color or create a gradient

Gradient Swatches​

TheDock supports gradient swatches:

  1. Click Add Swatch
  2. Select Gradient type
  3. Configure:
    • Type - Linear or radial
    • Direction - Angle (for linear) or position (for radial)
    • Colors - Select colors from your palette
    • Stops - Position of each color

Smart Gradients: When you use palette colors in gradients, the gradient automatically updates if you change those palette colors.

Accessibility​

TheDock helps you create accessible color combinations.

Automatic Text Color​

When you apply a background color to any element, TheDock automatically calculates the best text color (light or dark) for optimal legibility.

This calculation is based on WCAG contrast ratio guidelines:

  • AAA - 7:1 ratio (highest accessibility)
  • AA - 4.5:1 ratio (recommended minimum)

Manual Override​

If you prefer a specific text color, you can override the automatic calculation in any element's settings.

Using Colors in Your Layout​

Section Backgrounds​

When editing a template or module:

  1. Select a section in the tree view
  2. In settings, find Background Color
  3. Choose from your palette colors

Block Colors​

Individual blocks (text, buttons, etc.) can have:

  • Text Color - The color of text content
  • Background Color - The block's background
  • Border Color - For bordered elements

Hover States​

For interactive elements like buttons and links:

  • Default Color - Normal state
  • Hover Color - When cursor hovers
  • Active Color - When clicked

Best Practices​

1. Start with Brand Colors​

If you have existing brand colors, enter your primary and secondary colors first. Let TheDock generate complementary options.

2. Test Contrast​

Always check that text is readable against backgrounds. Use the Dashboard preview to verify.

3. Limit Your Palette​

The 5-color system exists for a reason - consistency. Resist adding too many swatches.

4. Use Tints and Shades​

Instead of adding new colors, use the auto-generated tints and shades for variety while maintaining harmony.

5. Consider Dark Sections​

Use your Contrast color as a background for "dark" sections. Text will automatically switch to Base color.

Troubleshooting​

Text is hard to read​

  • Check that you're using sufficient contrast
  • Let TheDock auto-calculate text color
  • Try a lighter tint or darker shade

Colors look different on export​

  • Ensure your monitor is calibrated
  • Colors appear the same in the exported theme
  • Check browser color profiles

Gradients not showing​

  • Ensure both gradient colors have opacity set to 100%
  • Check that the gradient direction is set correctly

← Back to Documentation