shadcn/phlexcomponents

Theming

To change themes, you need to overwrite the CSS variables within the :root { } and .dark { } blocks in vendor/shadcn_phlexcomponents/stylesheets/shadcn_phlexcomponents.css.

Here are some websites where you can quickly copy shadcn themes:

Once you have chosen a theme, copy the CSS variables and paste them in app/assets/tailwind/application.css.

Your app/assets/tailwind/application.css should look something like this: 

@import "tailwindcss";

@import "../../../vendor/shadcn_phlexcomponents/stylesheets/shadcn_phlexcomponents.css";



:root {

  --background: oklch(0.9818 0.0054 95.0986);

  --foreground: oklch(0.3438 0.0269 95.7226);

  --card: oklch(0.9818 0.0054 95.0986);

  --card-foreground: oklch(0.1908 0.002 106.5859);

  --popover: oklch(1 0 0);

  --popover-foreground: oklch(0.2671 0.0196 98.939);

  --primary: oklch(0.6171 0.1375 39.0427);

  --primary-foreground: oklch(1 0 0);

  --secondary: oklch(0.9245 0.0138 92.9892);

  --secondary-foreground: oklch(0.4334 0.0177 98.6048);

  --muted: oklch(0.9341 0.0153 90.239);

  --muted-foreground: oklch(0.6059 0.0075 97.4233);

  --accent: oklch(0.9245 0.0138 92.9892);

  --accent-foreground: oklch(0.2671 0.0196 98.939);

  --destructive: oklch(0.1908 0.002 106.5859);

  --destructive-foreground: oklch(1 0 0);

  --border: oklch(0.8847 0.0069 97.3627);

  --input: oklch(0.7621 0.0156 98.3528);

  --ring: oklch(0.6171 0.1375 39.0427);

  --chart-1: oklch(0.5583 0.1276 42.9956);

  --chart-2: oklch(0.6898 0.1581 290.4107);

  --chart-3: oklch(0.8816 0.0276 93.128);

  --chart-4: oklch(0.8822 0.0403 298.1792);

  --chart-5: oklch(0.5608 0.1348 42.0584);

  --sidebar: oklch(0.9663 0.008 98.8792);

  --sidebar-foreground: oklch(0.359 0.0051 106.6524);

  --sidebar-primary: oklch(0.6171 0.1375 39.0427);

  --sidebar-primary-foreground: oklch(0.9881 0 0);

  --sidebar-accent: oklch(0.9245 0.0138 92.9892);

  --sidebar-accent-foreground: oklch(0.325 0 0);

  --sidebar-border: oklch(0.9401 0 0);

  --sidebar-ring: oklch(0.7731 0 0);

  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,

    'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,

    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;

  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,

    'Liberation Mono', 'Courier New', monospace;

  --radius: 0.5rem;

  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);

  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);

  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1),

    0 1px 2px -1px hsl(0 0% 0% / 0.1);

  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);

  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1),

    0 2px 4px -1px hsl(0 0% 0% / 0.1);

  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1),

    0 4px 6px -1px hsl(0 0% 0% / 0.1);

  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1),

    0 8px 10px -1px hsl(0 0% 0% / 0.1);

  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);

  --tracking-normal: 0em;

  --spacing: 0.25rem;

}



.dark {

  --background: oklch(0.2679 0.0036 106.6427);

  --foreground: oklch(0.8074 0.0142 93.0137);

  --card: oklch(0.2679 0.0036 106.6427);

  --card-foreground: oklch(0.9818 0.0054 95.0986);

  --popover: oklch(0.3085 0.0035 106.6039);

  --popover-foreground: oklch(0.9211 0.004 106.4781);

  --primary: oklch(0.6724 0.1308 38.7559);

  --primary-foreground: oklch(1 0 0);

  --secondary: oklch(0.9818 0.0054 95.0986);

  --secondary-foreground: oklch(0.3085 0.0035 106.6039);

  --muted: oklch(0.2213 0.0038 106.707);

  --muted-foreground: oklch(0.7713 0.0169 99.0657);

  --accent: oklch(0.213 0.0078 95.4245);

  --accent-foreground: oklch(0.9663 0.008 98.8792);

  --destructive: oklch(0.6368 0.2078 25.3313);

  --destructive-foreground: oklch(1 0 0);

  --border: oklch(0.3618 0.0101 106.8928);

  --input: oklch(0.4336 0.0113 100.2195);

  --ring: oklch(0.6724 0.1308 38.7559);

  --chart-1: oklch(0.5583 0.1276 42.9956);

  --chart-2: oklch(0.6898 0.1581 290.4107);

  --chart-3: oklch(0.213 0.0078 95.4245);

  --chart-4: oklch(0.3074 0.0516 289.323);

  --chart-5: oklch(0.5608 0.1348 42.0584);

  --sidebar: oklch(0.2357 0.0024 67.7077);

  --sidebar-foreground: oklch(0.8074 0.0142 93.0137);

  --sidebar-primary: oklch(0.325 0 0);

  --sidebar-primary-foreground: oklch(0.9881 0 0);

  --sidebar-accent: oklch(0.168 0.002 106.6177);

  --sidebar-accent-foreground: oklch(0.8074 0.0142 93.0137);

  --sidebar-border: oklch(0.9401 0 0);

  --sidebar-ring: oklch(0.7731 0 0);

  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,

    'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,

    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;

  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,

    'Liberation Mono', 'Courier New', monospace;

  --radius: 0.5rem;

  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);

  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);

  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1),

    0 1px 2px -1px hsl(0 0% 0% / 0.1);

  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);

  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1),

    0 2px 4px -1px hsl(0 0% 0% / 0.1);

  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1),

    0 4px 6px -1px hsl(0 0% 0% / 0.1);

  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1),

    0 8px 10px -1px hsl(0 0% 0% / 0.1);

  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);

}