Theming

With the fulldev-ui integration you can easily set a theme and generate a palette based on Radix Colors.

Configuration

Generating a color palette

• css is the path to your custom css file that applies to all pages on your site.
• colors is an object that defines the colors for your site.
  • theme is the default theme for your site.
  • dark and light are objects that define the colors for the dark and light themes, these three properties are used to generate a color pallete using radix colors.

import { defineConfig } from 'astro/config'
import fulldev from 'fulldev-ui/integration'

// https://astro.build/config
export default defineConfig({
  integrations: [
    fulldev({
      css: '/src/css/custom.css',
      colors: {
        theme: 'dark',
        dark: {
          background: '#111110',
          base: '#6F6D66',
          brand: '#F50',
        },
        light: {
          background: '#EEEEEC',
          base: '#6F6D66',
          brand: '#F50',
        },
      },
    }),
  ],
})

Generating favicons

We’ve integrated astro-favicons into fulldev-ui to generate favicons from a svg file.

import { defineConfig } from 'astro/config'
import fulldev from 'fulldev-ui/integration'

// https://astro.build/config
export default defineConfig({
  integrations: [
    fulldev({
      favicon: 'src/images/favicon.svg', // can also be png, webp, jpg, etc.
      // other options here
    }),
  ],
})

Overwriting styles

Since Fulldev UI uses just regular CSS with low specificity, you can customize anything else using custom CSS.