Components
First look at all the interactive components
amp-story-interactive-quiz
font-size: 0.25em
--interactive-accent-color: dodgerblue;
--interactive-prompt-background:
linear-gradient(120deg, red, orange);
amp-story-interactive-poll
[chip-style="shadow"]
font-size: 0.25em
--interactive-accent-color: red;
--interactive-prompt-background:
linear-gradient(120deg, red, orange);
amp-story-interactive-binary-poll
[theme="dark"]
font-size: 0.25em
--interactive-accent-color: yellow;
--interactive-prompt-text-color: rgb(0, 102, 219);
amp-story-interactive-results
font-size: 0.25em
--interactive-accent-color: #F34E4E;
Themes
Attributes to theme interactive components
Light [default]
[theme="light"]
[chip-style="flat"]
font-size: 0.25em
Light [default]
[theme="light"]
[chip-style="flat"]
font-size: 0.25em
Dark
[theme="dark"]
[chip-style="flat"]
font-size: 0.25em
Dark
[theme="dark"]
[chip-style="flat"]
font-size: 0.25em
Light shadow
[theme="light"]
[chip-style="shadow"]
font-size: 0.25em
Light shadow
[theme="light"]
[chip-style="shadow"]
font-size: 0.25em
Dark shadow
[theme="dark"]
[chip-style="shadow"]
font-size: 0.25em
--interactive-accent-color: rgb(241, 123, 12);
Dark shadow
[theme="dark"]
[chip-style="shadow"]
font-size: 0.25em
--interactive-accent-color: rgb(241, 123, 12);
Light transparent
[theme="light"]
[chip-style="transparent"]
font-size: 0.25em
Light transparent
[theme="light"]
[chip-style="transparent"]
font-size: 0.25em
Dark transparent
[theme="dark"]
[chip-style="transparent"]
font-size: 0.25em
--interactive-accent-color: rgb(236, 53, 160);
Dark transparent
[theme="dark"]
[chip-style="transparent"]
font-size: 0.25em
--interactive-accent-color: rgb(236, 53, 160);