Configuring assyst Web display to use Dark Mode

Hi Chris

If you are wishing to log an Idea, then this should be completed using the form below:

Join the conversation | IFS Community

In doing so, once completed this will be assigned automatically to the correct team who review and process all Ideas.

At present, you have added a thread to the assyst General channel.  Here, issues can be discussed with other users of assyst who may be able to offer you a workaround to your requirement.  This being so, you should continue to monitor this thread for feedback but I would suggest complimenting this with an Idea using the link above. Here, you should include details relating to the impact and urgency that the lack of feature has to your business as this helps prioritize accordingly.

It is possible to do via CSS - using the prefers-color-scheme CSS variable (prefers-color-scheme - CSS: Cascading Style Sheets | MDN (mozilla.org)). We have tried this on our test DB and managed to set up a grey scale “Dark Mode” version of the website. 

We’ve set variables at the top of our CSS styling, then we can call those variables later. 

Below is an example of part of our CSS testing: 

	--dark-background:#121212;

@media (prefers-color-scheme: dark){
		color: var(--color-white) !important;
		background: var(--dark-background) !important;

Hi, ​@KevinM, 

Do you have this ‘dark mode’ css example to share with us?
​I recently opened a related question here.
 

• assyst with dark mode css

Hi ​@McrPauloV,

Example code is above in my message to Brian. 

You can set your CSS within the { } brackets. To set for light mode you will need to replicate with 

@media (prefers-color-scheme: light) {
        color: var(--color-white) !important;
		background: var(--dark-background) !important;
}

More information around CSS styling and color schemes can be found here: prefers-color-scheme - CSS: Cascading Style Sheets | MDN