IT Monkey will place code here as examples of what Cireson's consulting team has to offer as well as examples for public consumption to benefit the Microsoft System Center community as a whole.
DISCLAIMER
All files and projects located here come as is and without any warranty or support. We will attempt to improve the projects as time goes on based on customer and community demand. Comments and improvements are welcome as well as customization requests. Your use of these Cireson Uploads is subject to our Terms of Use.
Cireson's support team has no information on these projects outside of what you have available and will not provide support for these enhancements, extensions, and scripts.
Dont forget to checkout solutions uploaded by our customers, partners and community members here.
Dark Mode in the Portal!! (Well.. an attempt at it!)
Shane_White
Cireson Support Super IT Monkey ✭✭✭✭✭
Hey Community!
I don't know about you but I love using Dark mode on almost everything.. the only time I don't is when it's not available! So I decided to have a crack at building this into the portal, and many.. many lines of CSS later it is at a stage where I am happy to let you all have a look and post your feedback on what you think!
I am aware this is not perfect, and I am sure I have missed A LOT, so please do not hesitate to leave an update below, or to message me directly so I can try and iron out the bugs.
The good thing about this customisation is that it stores whether it is toggled on or off in the browser which means it is local to each browser (user).
Also, in the root of the CSS file, you can just change the 'Branded-color' variable to style it more to your company colours.
To install this customisation:
1. Download the files
2. Copy the contents of DarkMode.js into your custom.js file, or load it in using the loadscript
3. Copy the DarkMode.css file into your custom space folder and load it into your Custom.css file using:
@import '<location of Css file, starting at CustomSpace>'; E.g. @import 'DarkMode.css';
Please let me know what you think!
Thanks,
Shane :-D
Comments
I forgot to mention! To toggle this on and off, use the Sun/Moon Icon on the top bar!
Hello Shane,
Thank you for releasing this, I did want to note on step 3 to update the l with a ; instead.
**@import '<location of Css file, starting at CustomSpace>'; E.g. @import 'DarkMode.css'; **
Hi @Katie_Hughes !
Good spot! Thank you I have updated that now 😁
Very nice, @Shane_White. You fulfilled my feature request and making more customers happy, looking at votes count :) I hope this CSS will once make it to the default portal installation :)
Tip to check color combination and user perception, if you don't have any UX designer and have no time to study guidelines: https://contrastchecker.com/
Thanks @Peter_Miklian
I am looking to package this as an add-in, as well as release High Contrast Mode!
I have been using https://colorable.jxnblk.com/ actually for High Contrast because it gives you the AAA rating which need to be over 4/5 I think to qualify as part of the legislation!
Thanks though!
New upload of this including high contrast mode!
@Peter_Miklian
@Geoff_Ross would such a dark mode be an idea for an add-in ? Maybe with an extra setting so users can decide if they want it or not?
Hi @Simon_Zeinhofer
We tried this waaaay back but due to the way the portal loads add-ins last, it was a bit flicky and would not be a good experience. But, we have changed how that works now so it might be better.
Lets test!!!
Geoff
NICE - we recently installed the newest latest version in our testsystem, so if you need someone testing it, I am here ;-)
@Geoff_Ross any updates on this one? :)