Customising styling

How to make the look and feel of Trialogue your own
For a general introduction to customising styling in Twine, see:
To edit styling in Twine, choose 'Edit Story Stylesheet' in the bottom left menu:
Edit the Story Stylesheet via the bottom left menu

Changing UI colours

Trialogue uses CSS variables to set the main colours of the app. You can add the following to your Story Stylesheet and tweak the colour values to fit your needs:
:root {
--bg-color: #C7BDB5;
--user-color: purple;
--speaker-color: #A00;
--sidebar-bg-color: #FFF;
--navbar-bg-color: #FFF;
--passage-bg-color: #FFF;
--passage-text-color: #000;

Setting speaker avatars and colours

Setting avatar image and text color of a bot speaker with the name bot (passages tagged speaker-bot):
.chat-passage-wrapper[data-speaker='bot']:before {
background-image: url('https://placekitten.com/100/100');
.chat-passage-wrapper[data-speaker='bot'] .chat-passage::before {
color: green;
Setting the avatar image and text color of user passages:
.chat-passage-wrapper[data-speaker='you']:after {
background-image: url('https://placekitten.com/100/100');
.chat-passage-wrapper[data-speaker='you'] .chat-passage::before {
color: red;
Use any valid CSS color value for the color property and any public image URL for the background-image property.