I’m a designer on a team that uses the default Quick Sight theme, and I’m trying to reproduce those default settings in Figma so I can see how it will work if we change the values to match our design system and other branding guidelines. I’m especially looking for colors (backgrounds, borders, text, etc.), sizing, and spacing, and how they apply to the default interface elements (navigation and controls) as well as selected visuals on a grid if they aren’t customized. I don’t currently have access to the configuration of our Quick Sight instance, but I do have access to the embedded instances in our application, and I can see how the options are rendered the in CSS (and HTML).
I’ve been researching the brand customization capability, as well as the theme capabilities. From exploring the rendered CSS, I’ve gathered that there are more settings used in the interface than there are documented settings on either of these pages. For example there are different transparency settings for existing colors and it’s not clear where those come from, but there are also many colors that aren’t assigned to variables, so it’s not clear how those values can be customized, even though the documentation and YouTube shows examples where it matches the brand or theme settings the demo is using.
Is there any way I can get a list of what exactly is customizable through either of those methods, and what the default values are? Is the full list exportable from somewhere within the configuration system, or with a concise API method?
Hello @jonathan.stegall, welcome to the Amazon Quick Community!
To find the values that you don’t see in the documentation, you could check out the Themes when you are viewing an analysis. I’ll attach some screenshots to you can see where to find that.
Edit contains the Themes option:
Then, a panel should open on the right side of the screen. If you have the Classic theme applied, select “Create theme” and it will create a copy of the theme and let you view in edit mode:
Then, in the left panel, you will see the various settings that are applied to try and fill in the gaps for Figma:
I know this isn’t perfect, but I’m not sure if these options are recorded anywhere else. If I find more information about the default view, I can provide that information! Let me know if this helps.
Hi @jonathan.stegall,
Just checking back in since we haven’t heard from you in a bit. I wanted to see if the guidance shared earlier helped resolve your question, or if you found a solution in the meantime.
If you still have any additional questions related to your initial post, feel free to share them. Otherwise, any update you’re able to provide within the next 3 business days would be helpful for the community.
Thank you.
Thanks @WLS-Cesar . The guidance earlier was not helpful since, as I mentioned, I don’t have access to the configuration of our Quick Sight instance.
That said, I kept working on this and eventually I was able to find a couple of CLI commands that give a lot of the information I was looking for. From there, I asked a person with access to run those commands and send me the JSON results. While this doesn’t give me everything, because it doesn’t include any of the settings for visuals on a grid if they aren’t customized, it does give me the brand and theme settings.
This one, describe-theme, told us all of the current active theme options: describe-theme — AWS CLI 2.36.8 Command Reference . Running this command gives me the values for theme color palettes, and some basic typography and spacing settings.
And describe-brand did the same for the brand settings: describe-brand — AWS CLI 2.36.8 Command Reference . It includes brand color palettes and logo settings.
