Themes

Telar includes 4 preset visual themes that can be easily switched via _config.yml.

Available Themes

Paisajes Coloniales (Default)

Earthy tones, inspired by Colonial Landscapes

Colors:

Primary: Terracotta #c7522a
Secondary: Olive #5f7351
Accent: Warm brown

Best for: Historical narratives, archaeological exhibits.

Neogranadina

Bold colours.

Colors:

Primary: Burgundy #8B0000
Secondary: Colonial gold #D4AF37
Accent: Deep red

Best for: Contemporary materials.

Santa Barbara

Inspired by sunset over the ocean.

Colors:

Primary: Ocean teal #2E8B9E
Secondary: Coral #FF6F61
Accent: Navy blue

Best for: Greyscale and monochrome images

Austin

Formal and subtle.

Colors:

Primary: Burnt orange #BF5700
Secondary: Slate blue #005F86
Accent: Charcoal

Best for: Contemporary materials

Switching Themes

Edit _config.yml in your repository:

telar_theme: "santa-barbara"  # Options: paisajes, neogranadina, santa-barbara, austin

Commit the change and GitHub Actions will rebuild your site automatically (2-5 minutes).

Creating Custom Themes

Step 1: Create Theme File

Create a new file at _data/themes/custom.yml:

# Colors
primary_color: "#2c3e50"
secondary_color: "#e74c3c"
accent_color: "#3498db"
text_color: "#333333"
heading_color: "#1a1a1a"
background_color: "#ffffff"

# Fonts
font_headings: "Playfair Display, Georgia, serif"
font_body: "Source Sans Pro, -apple-system, sans-serif"

Step 2: Activate Custom Theme

In _config.yml:

telar_theme: "custom"

Step 3: Test and Refine

Commit changes
Wait for automatic build
Review your site
Adjust colors and fonts as needed

Theme Color Variables

All themes support these color variables:

Variable	Usage
`primary_color`	Main brand color, buttons, links
`secondary_color`	Accents, secondary buttons
`accent_color`	Highlights, hover states
`text_color`	Body text
`heading_color`	All heading levels
`background_color`	Page background

Typography Variables

Control fonts across your site:

Variable	Usage
`font_headings`	h1-h6, page titles
`font_body`	Paragraphs, lists, general text

Font Examples

Serif headings:

font_headings: "Playfair Display, Georgia, serif"
font_headings: "Merriweather, Georgia, serif"
font_headings: "Lora, Georgia, serif"

Sans-serif headings:

font_headings: "Montserrat, Helvetica, sans-serif"
font_headings: "Raleway, Arial, sans-serif"

Body fonts:

font_body: "Source Sans Pro, sans-serif"
font_body: "Open Sans, Helvetica, sans-serif"
font_body: "Crimson Text, Georgia, serif"

Using Google Fonts

To use fonts not included by default:

Find your font at Google Fonts

Add import to assets/css/telar.scss:

@import url('https://fonts.googleapis.com/css2?family=Your+Font:wght@400;600;700&display=swap');

Reference in theme file:
```
font_headings: "Your Font, serif"
```

Color Accessibility

When creating custom themes, ensure good contrast:

Text on background: Minimum 4.5:1 contrast ratio
Large text (18px+): Minimum 3:1 contrast ratio
Interactive elements: Must be distinguishable

Use tools like WebAIM Contrast Checker to verify.

Theme Fallback

If a custom theme file is missing or has errors, Telar automatically falls back to the Paisajes theme, ensuring your site never breaks.

Next Steps

Advanced Styling for deeper customization
Configuration for other site settings
View Example Themes in action