Customize theme on Nextjs

[hiimnhan]

I am developing new theme based on this implementation guide. I add a folder called theme in my project folder. In that I add a file called index.js and use buildThemeComponents to create themed folder.

I already add these line into my project's package.json and point every component to the themed package

 "@cloudscape-design/components-themed": "file:./theme/themed/components",
 "@cloudscape-design/design-tokens-themed": "file:./theme/themed/design-tokens",

I have tried to use it as local package by using command npm link in theme/themed/components and then yarn in my project but it still not apply the color I want. Honestly I accidentally can change theme once time but now I don't know how to reproduce.

Now I am stuck here and need some help from you guys.

Context:

• React 18.12.0
• Next 12.0.8
• @cloudscape-design/components: 3.0.170
• @cloudscape-design/components-themeable: 3.0.252
• @cloudscape-design/design-tokens: 3.0.6

[hiimnhan]

I don't know what is "@cloudscape-design/design-tokens-themed": "file:./theme/themed/design-tokens", for since folder design-tokens has no package.json file. Mentioned in this bug

[smantei]

I'm very interested to see the solution to this. I'm having the same issues.

[hiimnhan]

@smantei I finally found a way to do this.
The main idea is make the themed folder into a npm package which can be linked into the project.
I leave here what step I did:

1. Create a theme folder in your project.
2. Create an index.js or index.ts file in that folder and then change the design tokens you want as this. Remember to add this to the end of the file

buildThemedComponents({
  theme,
  outputDir: join(__dirname, './themed'),
});

4. After this step you will get a themed folder inside the theme folder.
5. Run some npm command to link everything in that folder to your current project. Here is my example bash script

#!/bin/sh
set -e

echo "💪 Yarn"
yarn 
echo "🛫 CD to them folder"
cd ./theme

echo "🏗 Building theme...."

yarn build && yarn build:theme # this one is for running index file in step 2.

echo "🔗 Linking components...."

cd ./lib/themed/components # my outputDir is lib folder
npm link

echo "🛬 CD to main folder"
cd ../../../../

echo "🔗 Linking package...."
npm link ./theme/lib/themed/components/ --force

echo "🛠 Installing package...."
yarn add @cloudscape-design/components-themed@file:./theme/lib/themed/components
yarn add @cloudscape-design/design-tokens-themed@file:./theme/lib/themed/design-tokens

echo "remove .next folder"
rm -rf .next # need to add these to prevent cache which prevent changing color

echo "👏 Build theme finish!!!"

Hope it help

[rubencarvalho]

Hello,

I'm glad to hear you are now unblocked.

We've updated our documentation to better reflect the necessary steps to use build time theming to allow you to create a package that contains all Cloudscape components with your custom theme.

Thank you everyone who contributed to the discussion.