Home Cireson Uploads
image


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_WhiteShane_White Cireson Support Super IT Monkey ✭✭✭✭✭
edited November 20 in Cireson Uploads

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

  • Shane_WhiteShane_White Cireson Support Super IT Monkey ✭✭✭✭✭

    I forgot to mention! To toggle this on and off, use the Sun/Moon Icon on the top bar!

  • Katie_HughesKatie_Hughes Customer IT Monkey ✭

    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'; **

  • Shane_WhiteShane_White Cireson Support Super IT Monkey ✭✭✭✭✭

    Hi @Katie_Hughes !

    Good spot! Thank you I have updated that now 😁

  • Peter_MiklianPeter_Miklian Customer Advanced IT Monkey ✭✭✭
    edited November 24

    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/

  • Shane_WhiteShane_White Cireson Support Super IT Monkey ✭✭✭✭✭

    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!

Sign In or Register to comment.