Theme Override Examples

[bryce-w-wilson]

Hi folks, Really impressed with the Cloudscape system and out of the box components; especially the level of thought and detail in the accessibility control and access.

I have have a read through the documentation on design tokens and theme updating but having some general issues trying to get a PoC up and running to demonstrate this capability.

Is there a sandbox/playground of this in action at all? Or an existing implementation I can cast an eye over?

Much appreciated!

[rubencarvalho]

Hello Bryce!

Thank you for the nice words, we're glad you're enjoying our design system.

Have you had a look at our Theming article? Hopefully it has the information you're looking for - let me know if it helped!

Also, you mentioned you are having "having some general issues trying to get a PoC up and running", do you want to share which issues you're currently experiencing?

Thank you,
RC

[jamesarosen]

This makes sense within the scope of a generic Cloudscape project. But it's not clear to me how I hook buildThemedComponents into an Amplify build process.

[hiimnhan]

Hi @rubencarvalho (since I saw you answer this question), I already take a look on the Theming article but still have some confusion:

1. I choose this option to apply theming

Use the output as a local NPM dependency: extend the dependencies section in your package.json file by "@cloudscape-design/components-themed": "file:/components and "@cloudscape-design/design-tokens-themed": "file:/design-tokens". Run the npm install command afterwards.

1.1 Is components the same with the components folder (app components)?
1.2 Should we keep theming like these in design-tokens/index.ts file?

import { join } from 'path';
import { Theme, buildThemedComponents } from '@cloudscape-design/components-themeable/theming';
const theme = {
   tokens: {
      // Values are applied globally, except for visual contexts
      colorBackgroundLayoutMain: {
          // Specify value for light and dark mode
          light: 'white',
          dark: 'blue'
      }
      // Shorter syntax to apply the same value for both light and dark mode
      colorTextAccent: '#0073bb',
   },
   contexts: {
      // Values for visual contexts. Unless specified, default values will be applied
      'top-navigation': {
         tokens: {
            colorTextAccent: '#44b9d6',
         },
};

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

and what is the purpose of themed folder?
1.3 In package.json file I already add these lines

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

but nothing happens (I already ran yarn install, yarn build), not folder is creating, not change is applied.

Context: Nextjs 12 with @cloudscape-design/components": "^3.0.138"

Please help

[dwarakanathchandu]

Hi, I am facing the same issue to build themeable components

[hiimnhan]

Hi @rubencarvalho, can you please help us on this since I need this in my current project?

[melinaschweizer]

Make sure you also import from the new 'themed' components instead of just @cloudscape-design/components:

import {Alert, AppLayout } from '@cloudscape-design/components-themed';

[atherkevin]

Hi all- first off, just wanted to say how much I appreciate the work that's gone into this. It's been fantastic to use.

Quick question on theming the TopNavigation component- I'm not seeing an option to change the background color of this component. Is there one available and I'm just missing it? I've tried just about every relevant option in the "top-navigation visual context" section of the demo to no avail.

[hiimnhan]

contexts: {
    'top-navigation': {
      tokens: {
        colorBackgroundContainerContent: 'red'
      },
    },

Maybe this one is what you need @atherkevin

[rishabhrahulcom]

I've applied the theme but now while building the app, I am getting error

[eslint] 
src/themed/components/flashbar/flash.js
  Line 69:5:  Definition for rule '@cloudscape-design/prefer-live-region' was not found  @cloudscape-design/prefer-live-region

However in file src/themed/components/flashbar/flash.js on Line 69: // eslint-disable-next-line @cloudscape-design/prefer-live-region``
What I should be looking for?