Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/ashcroft08/provesa-web/llms.txt

Use this file to discover all available pages before exploring further.

The theme_config table stores the visual color scheme for the entire PROVESA Web application. This is a singleton table - only one row should exist.

​
Table: theme_config

​
id
serial
required
Primary key. Auto-incrementing integer.Default: Auto-generated
​
primaryColor
text
default:"#1565C0"
required
Primary brand color used throughout the site.Format: Hex color code (e.g., #1565C0)
Usage: Headers, primary buttons, main navigation
​
secondaryColor
text
default:"#FFD100"
required
Secondary accent color.Format: Hex color code (e.g., #FFD100)
Usage: Highlights, secondary buttons, accents
​
accentColor
text
default:"#E4002B"
required
Accent color for special elements.Format: Hex color code (e.g., #E4002B)
Usage: CTAs, badges, alerts
​
backgroundColor
text
default:"#FAFAF7"
required
Main background color for the site.Format: Hex color code (e.g., #FAFAF7)
Usage: Page backgrounds, card backgrounds
​
updatedAt
timestamp
When the theme configuration was last modified.Default: defaultNow()

​
Usage Example

​
Query Theme Configuration

import { themeConfig } from './schemas/theme_config.schema';
import { db } from './db';

// Get current theme (should only be 1 row)
const [theme] = await db.select().from(themeConfig).limit(1);

if (theme) {
  console.log('Primary Color:', theme.primaryColor);
  console.log('Secondary Color:', theme.secondaryColor);
  console.log('Accent Color:', theme.accentColor);
  console.log('Background Color:', theme.backgroundColor);
}

​
Update Theme Colors

import { themeConfig } from './schemas/theme_config.schema';
import { db } from './db';
import { eq } from 'drizzle-orm';

// Update theme colors
await db
  .update(themeConfig)
  .set({
    primaryColor: '#0D47A1',
    secondaryColor: '#FFC107',
    accentColor: '#D32F2F',
    backgroundColor: '#FFFFFF'
  })
  .where(eq(themeConfig.id, 1));

​
Initialize Default Theme

import { themeConfig } from './schemas/theme_config.schema';
import { db } from './db';

// Create initial theme record (run once)
await db.insert(themeConfig).values({
  primaryColor: '#1565C0',
  secondaryColor: '#FFD100',
  accentColor: '#E4002B',
  backgroundColor: '#FAFAF7'
});

​
CSS Variable Integration

The theme colors are typically converted to CSS custom properties for use throughout the application: 
// Example: Generate CSS variables from theme
import { themeConfig } from './schemas/theme_config.schema';
import { db } from './db';

export async function getThemeCSS() {
  const [theme] = await db.select().from(themeConfig).limit(1);
  
  if (!theme) return '';
  
  return `
    :root {
      --color-primary: ${theme.primaryColor};
      --color-secondary: ${theme.secondaryColor};
      --color-accent: ${theme.accentColor};
      --color-background: ${theme.backgroundColor};
    }
  `;
}

​
Using in Components

<script lang="ts">
  import { page } from '$app/stores';
  
  $: theme = $page.data.theme; // Loaded from layout
</script>

<button style="background-color: {theme.primaryColor}">
  Click Me
</button>

<!-- Or with CSS variables -->
<button class="primary-btn">
  Click Me
</button>

<style>
  .primary-btn {
    background-color: var(--color-primary);
    color: white;
  }
</style>

​
Database Migration

​
Generate Migration

npm run db:generate
npm run db:migrate

​
Migration SQL

CREATE TABLE "theme_config" (
  "id" serial PRIMARY KEY NOT NULL,
  "primary_color" text DEFAULT '#1565C0' NOT NULL,
  "secondary_color" text DEFAULT '#FFD100' NOT NULL,
  "accent_color" text DEFAULT '#E4002B' NOT NULL,
  "background_color" text DEFAULT '#FAFAF7' NOT NULL,
  "updated_at" timestamp DEFAULT now()
);

-- Insert default theme
INSERT INTO "theme_config" (id) VALUES (1);

​
Admin Panel Integration

Typically, you’d create an admin interface to manage theme colors: 
// Example API endpoint: src/routes/admin/theme/+page.server.ts
import type { Actions } from './$types';
import { db } from '$lib/server/db';
import { themeConfig } from '$lib/server/db/schemas/theme_config.schema';
import { eq } from 'drizzle-orm';

export const actions = {
  updateTheme: async ({ request }) => {
    const data = await request.formData();
    
    await db
      .update(themeConfig)
      .set({
        primaryColor: data.get('primaryColor') as string,
        secondaryColor: data.get('secondaryColor') as string,
        accentColor: data.get('accentColor') as string,
        backgroundColor: data.get('backgroundColor') as string
      })
      .where(eq(themeConfig.id, 1));
    
    return { success: true };
  }
} satisfies Actions;

​
Best Practices

Singleton Pattern:This table should only ever have ONE row. When implementing:
  1. Always use WHERE id = 1 when updating
  2. Use .limit(1) when querying
  3. Initialize with a seed migration
  4. Prevent deletion in your admin UI
Color Validation:Consider validating hex colors before saving:
function isValidHex(color: string): boolean {
  return /^#[0-9A-F]{6}$/i.test(color);
}
Cache Considerations:Since theme colors affect the entire site, consider:
  1. Caching theme values in server memory
  2. Invalidating cache when theme is updated
  3. Using SvelteKit’s invalidateAll() after updates

Build docs developers (and LLMs) love

Get started for freeTalk to us