How to change the main color

[hellofrontendxxx]

Hello everyone

I am developing a project using cloudscape, I am having a problem that I want to change the colors of the components.

I am using Vitejs, I have read through https://cloudscape.design/foundation/visual-foundation/theming/#applying-a-theme but I don't know how to create a themed folder when using Build-time theming.

I hope to receive help from everyone. Thank you

[pan-kot]

Hello @hellofrontendxxx ,

You can build the themed components using Vite plugins, for example:

import * as path from "path";
import { fileURLToPath } from "url";
import { defineConfig } from "vite";
import { buildThemedComponents } from "@cloudscape-design/components-themeable/theming";

const theme = { /* your theme */ };

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default defineConfig({
  // ...
  plugins: [
    {
      apply: "build",
      async buildStart() {
        console.log("Building Cloudscape themed components");
        await buildThemedComponents({ theme, outputDir: path.join(__dirname, "./src/components/themed") });
      },
    },
    /* your plugins */
  ],
});