Styling

DARST is built on top of Tailwind CSS and shadcn/ui. Check out their documentation for more information on how to use the classes.

Customizing the theme

The theme is stored in src/styles/theme.css. You can customize the theme by changing the values of the variables. You can generate theme using this tool or this one.

This is what the file looks like:

@/styles/theme.css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --padding-card: 1.5rem;
}


@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 10% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
  }
  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

Beside editing the src/styles/theme.css file, you also need to add the foreground and background theme variables to the src/config.ts file.

@/config.ts

export const config: AppConfig = {
  ...,
  themeColors: {
    dark: {
      background: "#09090b",
      foreground: "#fafafa",
    },
    light: {
      background: "#ffffff",
      foreground: "#09090b",
    },
  },
};

Customizing the Docs

If you want to customize the docs, you can do so by editing the src/styling/starlight.css file. You can use Starlight’s color theme editor to generate the CSS file.

@/styles/starlight.css

/* Dark mode colors. */
:root {
  --sl-font: "Geist Sans", sans-serif;
  --sl-color-accent-low: #242424;
  --sl-color-accent: #6a6a6a;
  --sl-color-accent-high: #c8c8c8;
  --sl-color-white: #ffffff;
  --sl-color-gray-1: #eeeeee;
  --sl-color-gray-2: #c2c2c2;
  --sl-color-gray-3: #8b8b8b;
  --sl-color-gray-4: #585858;
  --sl-color-gray-5: #383838;
  --sl-color-gray-6: #272727;
  --sl-color-black: #181818;
}
/* Light mode colors. */
:root[data-theme="light"] {
  --sl-color-accent-low: #d7d7d7;
  --sl-color-accent: #6b6b6b;
  --sl-color-accent-high: #323232;
  --sl-color-white: #181818;
  --sl-color-gray-1: #272727;
  --sl-color-gray-2: #383838;
  --sl-color-gray-3: #585858;
  --sl-color-gray-4: #8b8b8b;
  --sl-color-gray-5: #c2c2c2;
  --sl-color-gray-6: #eeeeee;
  --sl-color-gray-7: #f6f6f6;
  --sl-color-black: #ffffff;
}

Additional styles

Additional styles can be added to the src/styles/plus.css file. Some of DARST implicit styles are already included in the src/styles/plus.css file. However, if you can do it in Tailwind, it is better to do it using Tailwind instead of adding it to the src/styles/plus.css file.