Dynamic styling #6807

binajmen · 2022-09-14T12:51:25Z

binajmen
Sep 14, 2022

Hi,

Is there a way to generate a dynamic CSS file based on theme data coming from the database?

I've the current solution:

// /routes/theme.css/+server.ts

import type { RequestHandler } from '@sveltejs/kit';
import prisma from '$lib/prisma';

export const GET: RequestHandler = async ({ locals }) => {
  const theme = await prisma.theme.findUnique({ ... });

  let css = '';

  if (theme) {
    const properties = [
      `--primary-h: ${theme.primaryColor.split(' ')[0]};`,
      `--primary-s: ${theme.primaryColor.split(' ')[1]};`,
      `--primary-l: ${theme.primaryColor.split(' ')[2]};`,
      `--secondary-h: ${theme.secondaryColor.split(' ')[0]};`,
      `--secondary-s: ${theme.secondaryColor.split(' ')[1]};`,
      `--secondary-l: ${theme.secondaryColor.split(' ')[2]};`,
    ];

    css = `:root {${properties.join(' ')}}`;
  }

  return new Response(css, {
    headers: {
      'Content-Type': 'text/css',
    },
  });
};

And

<!-- // /src/app.html -->
<!DOCTYPE html>
<html lang="%lang%" class="h-full">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
    <link rel="stylesheet" href="theme.css" />
...

But when I visit http://localhost:5173/en/some-slug, I have the following issue:

{ slug: 'theme.css' }
No Venue found
NotFoundError: No Venue found
    at /Users/binajmen/Projects/horeka-sveltekit/node_modules/@prisma/client/runtime/index.js:29421:13
    at async load (/Users/binajmen/Projects/horeka-sveltekit/src/routes/[lang]/[...slug]/+layout.server.ts:24:18)
    at async load_server_data (file:///Users/binajmen/Projects/horeka-sveltekit/node_modules/@sveltejs/kit/src/runtime/server/page/load_data.js:31:17)
    at async file:///Users/binajmen/Projects/horeka-sveltekit/node_modules/@sveltejs/kit/src/runtime/server/page/index.js:144:13

Because I have a /routes/[lang]/[...slug]/.... I suppose by having href="theme.css", it concat theme.css with http://localhost:5173/en/, therefore pointing on the wrong route.

Thus my question: how do/would you handle that? 🙂

Unless I'm wrong, I can't really use svelte:head in my root layer to declare styles as I don't have access to the loaded data.

Update:
Adding a / did solve the problem:
<link rel="stylesheet" href="/theme.css" />

But I'm still interested to know if that's the right approach to add dynamic styling 🤔

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Uh oh!

Dynamic styling #6807

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Uh oh!

Uh oh!

Dynamic styling #6807

Uh oh!

binajmen Sep 14, 2022

Replies: 0 comments

binajmen
Sep 14, 2022