Theo's Typesafe Cult•7mo ago

change tailwind color based on api response

Using next 14, turbo, tailwind I have an app that should change colors based on api response. Can I somehow change the tailwind config primary color in the top of my next app in the head server component? I think that it is possible in client component by adding style tag and adding new declaration of css variable, but i can’t do it in a server component

8 Replies

Neto•7mo ago

css variables

vski.damianOP•7mo ago

Im using css variables

export default async function WebappLayout({ children }: { children: ReactNode }) {
  const layoutData = await executeApiRequest<LayoutData>({
    endpoint: '/webapp/settings/layout',
  });
  const primaryColor = layoutData.layout.primary_color;

  return (
    <Layout>
      <style>{`
      :root {
        --primary: ${primaryColor}
      }
    `}</style>
      <InnerLayout>{children}</InnerLayout>
    </Layout>
  );
}

export default async function WebappLayout({ children }: { children: ReactNode }) {
  const layoutData = await executeApiRequest<LayoutData>({
    endpoint: '/webapp/settings/layout',
  });
  const primaryColor = layoutData.layout.primary_color;

  return (
    <Layout>
      <style>{`
      :root {
        --primary: ${primaryColor}
      }
    `}</style>
      <InnerLayout>{children}</InnerLayout>
    </Layout>
  );
}

im getting

Warning: Cannot render a <style> outside the main document without knowing its precedence and a unique href key. React can hoist and deduplicate <style> tags if you provide a `precedence` prop along with an `href` prop that does not conflic with the `href` values used in any other hoisted <style> or <link rel="stylesheet" ...> tags.  Note that hoisting <style> tags is considered an advanced feature that most will not use directly. Consider moving the <style> tag to the <head> or consider adding a `precedence="default"` and `href="some unique resource identifier"`, or move the <style> to the <style> tag.

Warning: Cannot render a <style> outside the main document without knowing its precedence and a unique href key. React can hoist and deduplicate <style> tags if you provide a `precedence` prop along with an `href` prop that does not conflic with the `href` values used in any other hoisted <style> or <link rel="stylesheet" ...> tags.  Note that hoisting <style> tags is considered an advanced feature that most will not use directly. Consider moving the <style> tag to the <head> or consider adding a `precedence="default"` and `href="some unique resource identifier"`, or move the <style> to the <style> tag.

Neto•7mo ago

document.documentElement.style.setProperty('--your-variable', '#YOURCOLOR');

vski.damianOP•7mo ago

document is only available in client components, or am i wrong?

Neto•7mo ago

yep either ssr it or useEffect

vski.damianOP•7mo ago

why am i getting hydration error with this implementation

import 'ui/globals.css';
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import { LayoutData, executeApiRequest } from 'api';

const inter = Inter({ subsets: ['latin'], variable: '--font-sans' });

export const metadata: Metadata = {
  title: 'back-office',
  description: 'lorem ipsum',
};

export default async function RootLayout({
  children,
  params: { locale },
}: {
  children: React.ReactNode;

  params: {
    locale: string;
  };
}) {
  const layoutData = await executeApiRequest<LayoutData>({
    endpoint: '/webapp/settings/layout',
  });
  const primaryColor = layoutData.layout.primary_color;

  return (
    <html lang={locale} className={`${inter.variable} h-full`}>
      <style>{`
      :root {
        --primary: ${primaryColor}
      }
    `}</style>
      <body className="relative h-full">{children}</body>
    </html>
  );
}

import 'ui/globals.css';
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import { LayoutData, executeApiRequest } from 'api';

const inter = Inter({ subsets: ['latin'], variable: '--font-sans' });

export const metadata: Metadata = {
  title: 'back-office',
  description: 'lorem ipsum',
};

export default async function RootLayout({
  children,
  params: { locale },
}: {
  children: React.ReactNode;

  params: {
    locale: string;
  };
}) {
  const layoutData = await executeApiRequest<LayoutData>({
    endpoint: '/webapp/settings/layout',
  });
  const primaryColor = layoutData.layout.primary_color;

  return (
    <html lang={locale} className={`${inter.variable} h-full`}>
      <style>{`
      :root {
        --primary: ${primaryColor}
      }
    `}</style>
      <body className="relative h-full">{children}</body>
    </html>
  );
}

here [image] but not here2 [image] so one layout.tsx deeper

vski.damianOP•7mo ago

vski.damianOP•7mo ago

Ok, i think the problem is that i put style not in a body or head tag

Gaming

Programming

change tailwind color based on api response