Dev studio opens inside dev studio

User Experience
, , , , ,
1

I made a theme that is giving me some errors. Here is my themes JSON file and the

example of my theme.png
example of my theme.png2134×1104 96 KB

When I try to open my JSON file in dev studio to fix the error, A second dev studio opens inside the first one.

Below is a screenshot of what is happening. The actual JSON file does not open, it simply takes me to the front page of dev studio.

dev studio in dev studio.png
dev studio in dev studio.png1912×968 270 KB

this leaves me with some questions

  1. why is dev studio opening inside dev studio instead of my test_theme.json file.

  2. how can i open my json file?

  3. when i check polished/src/internalHelpers/errors.md at main · styled-components/polished · GitHub to see the details of the error, it basically say it cant parse a string into hex. But why not? “#cfcfcf” seem like a perfectly good string with a hex colour inside.

2

@JackF17108719

It looks like you are making an unsupported change to the theme json which is causing the App Studio authoring of the theme to fail. What was the original json created by the theme designer in App Studio compared to the above? Did you add the “app-shell” part?

Please review the following documentation which mentions:

Using the Themes landing page for branding is the recommended best practice. Overriding the tokens manually should be reserved for advanced use cases, because some of the design tokens might produce unexpected results. Additionally, manual overrides might be removed or modified during upgrades. Consequently, manual overrides should be used in rare cases, and only to change tokens under the "base" object.

Design tokens (pega.com)

Can you elaborate on your requirement to manually edit to the theme json? What are you trying to change that you find you can’t via the theme designer.

Also possibly of interest discussions:

Can we customize theme rule in pega constellation? | Support Center

Can we add Theme properties other than the default one’s provided by the pega in theme rule? | Support Center

3

@Marc Alderman

Hi, I tried removing my components and that didn’t fix the error.

then I reworked my colours to be entered directly into each component instead of declaring colours and pointing to them.

Like this.

    "base": {
        "palette": {
            "app-background": "#FFD700"
        }
    }

and then it suddenly worked.

Not sure why it didnt work when i declared colours like in the documentation here. https://design.pega.com/develop/theme/

Thanks for the help :slight_smile: