Skip to main content
The Theme Service manages the application’s color scheme by reading and writing CSS variables in the layout file. It provides automatic synchronization of color aliases.

​
Overview

The theme service operates directly on the src/routes/layout.css file, using regular expressions to extract and update CSS custom properties. It maintains the site’s color palette including primary, secondary, accent, and background colors.

​
Color Synchronization

The service automatically synchronizes color aliases:
  • --color-accent-red follows accent
  • --color-accent-yellow follows secondary

​
Methods

​
getThemeColors()

Retrieves the current theme colors from the CSS file. 
import { themeService } from '$lib/server/services/theme.service.js';

const colors = themeService.getThemeColors();
​
primary
string
required
Primary brand color (hex format). Default: #455dd9
​
secondary
string
required
Secondary brand color (hex format). Default: #ffd100
​
accent
string
required
Accent color for highlights (hex format). Default: #e4002b
​
background
string
required
Background color (hex format). Default: #ffffff

​
Error Handling

If the CSS file cannot be read, returns default colors: 
{
  primary: '#455dd9',
  secondary: '#ffd100',
  accent: '#e4002b',
  background: '#ffffff'
}

​
Implementation Details

Source: src/lib/server/services/theme.service.js:9-22 The method uses regex patterns to extract colors: 
/--color-primary:\s*(#[a-fA-F0-9]{6})/

​
updateThemeColors()

Updates theme colors in the CSS file with automatic alias synchronization. 
import { themeService } from '$lib/server/services/theme.service.js';

themeService.updateThemeColors({
  primary: '#3b4cc0',
  secondary: '#ffcc00',
  accent: '#cc0022',
  background: '#f5f5f5'
});
​
primary
string
New primary color in hex format
​
secondary
string
New secondary color in hex format. Also updates --color-accent-yellow
​
accent
string
New accent color in hex format. Also updates --color-accent-red
​
background
string
New background color in hex format

​
Automatic Synchronization

When updating colors, the service maintains consistency:
  • Secondary → Accent Yellow: When secondary is updated, --color-accent-yellow is automatically set to the same value
  • Accent → Accent Red: When accent is updated, --color-accent-red is automatically set to the same value

​
Error Handling

Throws an error if the CSS file cannot be written: 
throw new Error('No se pudieron guardar los colores.');

​
Implementation Details

Source: src/lib/server/services/theme.service.js:30-56 The method performs regex replacements: 
content = content.replace(/(--color-primary:\s*).+?;/, `$1${primary};`);

​
Usage Example

​
Complete Theme Update Flow

import { themeService } from '$lib/server/services/theme.service.js';

// Get current colors
const currentColors = themeService.getThemeColors();
console.log('Current primary:', currentColors.primary);

// Update with new brand colors
try {
  themeService.updateThemeColors({
    primary: '#2d3748',
    secondary: '#ecc94b',
    accent: '#e53e3e',
    background: '#ffffff'
  });
  
  console.log('Theme updated successfully');
} catch (error) {
  console.error('Failed to update theme:', error);
}

// Verify changes
const newColors = themeService.getThemeColors();
console.log('New colors:', newColors);

​
SvelteKit Server Route Example

// src/routes/api/theme/+server.js
import { json } from '@sveltejs/kit';
import { themeService } from '$lib/server/services/theme.service.js';

export async function GET() {
  const colors = themeService.getThemeColors();
  return json(colors);
}

export async function POST({ request }) {
  const colors = await request.json();
  
  try {
    themeService.updateThemeColors(colors);
    return json({ success: true });
  } catch (error) {
    return json({ error: error.message }, { status: 500 });
  }
}

​
File Location

The service operates on: 
src/routes/layout.css

​
CSS Variables Managed

The following CSS custom properties are managed by this service:
  • --color-primary: Main brand color
  • --color-secondary: Secondary brand color
  • --color-accent: Accent/highlight color
  • --color-background: Background color
  • --color-accent-red: Synchronized with accent
  • --color-accent-yellow: Synchronized with secondary

​
Best Practices

Always validate color values are in proper hex format (#RRGGBB) before calling updateThemeColors().
The service handles partial updates. You can update only specific colors without providing all four values.
Changes to theme colors take effect immediately in the CSS file but may require a browser refresh for users to see the updated colors.