Customize Theme

Apply custom themes and fonts to your SaaS

  • Alexandro Martínez
    Author
    by Alexandro Martínez
    2 years ago
  • With Tailwind CSS + shadcn you have 100% control over your styles.

    Apply a new theme

    💿 Go to app/utils/theme/defaultThemes.ts and specify your new theme name:

    // themes.css should have 2 classes: .theme-{name} and .dark.theme-{name}
    export const defaultTheme = "my-new-theme-1";
    
    

    // this array could be empty, it's only used by ThemeSelector export const defaultThemes: { name: string; value: string }[] = [ { name: "Default", value: "zinc" }, { name: "Slate", value: "slate" }, { name: "Stone", value: "stone" }, { name: "Gray", value: "gray" }, { name: "Neutral", value: "neutral" }, { name: "Red", value: "red" }, { name: "Rose", value: "rose" }, { name: "Orange", value: "orange" }, { name: "Green", value: "green" }, { name: "Blue", value: "blue" }, { name: "Yellow", value: "yellow" }, { name: "Violet", value: "violet" }, { name: "My new theme 1", value: "my-new-theme-1" }, ];

    💿 Go to app/themes.css and add your new theme CSS variables:

    .theme-my-new-theme-1 {
      --background: 120 50% 90%;
      --foreground: 120 30% 20%;

    --muted: 120 50% 80%; --muted-foreground: 120 30% 40%;

    --popover: 120 50% 90%; --popover-foreground: 120 30% 20%;

    --card: 120 50% 90%; --card-foreground: 120 30% 20%;

    --border: 120 50% 80%; --input: 120 50% 80%;

    --primary: 120 60% 40%; --primary-foreground: 120 100% 98%;

    --secondary: 120 50% 80%; --secondary-foreground: 120 60% 40%;

    --accent: 120 50% 80%; --accent-foreground: 120 60% 40%;

    --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%;

    --ring: 120 60% 40%;

    --radius: 0.5rem; }

    .dark .theme-my-new-theme-1 { --background: 120 30% 20%; --foreground: 120 50% 90%;

    --muted: 120 30% 15%; --muted-foreground: 120 50% 70%;

    --popover: 120 30% 20%; --popover-foreground: 120 50% 90%;

    --card: 120 30% 20%; --card-foreground: 120 50% 90%;

    --border: 120 30% 15%; --input: 120 30% 15%;

    --primary: 120 50% 90%; --primary-foreground: 120 30% 20%;

    --secondary: 120 30% 15%; --secondary-foreground: 120 50% 90%;

    --accent: 120 30% 15%; --accent-foreground: 120 50% 90%;

    --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 100% 98%;

    --ring: 120 50% 40%; }

    And that's it:

    saasrock-hero-new-theme.png

    You can use ChatGPT to generate your theme palette. Just paste the content of themes.css, specify your new theme name and how you'd like to style it (main colors, radius...).

    theme-with-chatgpt.png

    Apply Google Fonts

    💿 Go to the globals.css file, and import the custom Google Font at the top.

    + @import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

    @tailwind base; ...

    💿 Add the custom font name to the start of the fontFamily:

    module.exports = {
      ...
      theme: {
        extend: {

    •  fontFamily: {
      
    •    sans: ["Poppins", "Roboto Mono", "ui-sans-serif", "system-ui"],
      
    •  },
      

    saasrock-hero-theme.png

    And if you'd like to change the base font, you can apply it at root.tsx with font-serif or your font name.

    <body
      className={clsx(
        theme-${rootData.theme},
        "bg-background text-foreground max-h-full min-h-screen max-w-full font-serif"
      )}
    >
    saasrock-theme-font-serif.png

    I hope this quick guide was useful! Let me know if you have any questions.

    We respect your privacy.

    TLDR: We use cookies for language selection, theme, and analytics. Learn more.