Enable Dark mode in Orchestrator [CB10126]

Introduction

Since, Orchestrator discarded the Java Client and fully moved to HTML5 Client, it opened some gates for experimentation with the client at the browser level. I think we have three main benefits while using this HTML5 client:

1. Detect APIs and payloads Using Network inspector as Orchestrator HTML5 Client runs on the Orchestrator Control Center server & communicates with the Orchestrator REST API through a REST proxy.
2. Running custom JavaScript snippets to manipulate the HTML elements, for example, resizing the code area in Workflow Editor to full screen, etc. Check out this post where JavaScript injection removes the input/output header above scripting area to give you more space to code.
3. Using Browser based plugins that open gates to many possibilities. It could be related to visibility, accessibility, personalization, etc. In other words, you can customize the browser the way you want and become more productive.

Problem

An Orchestrator developer, just like any other developer, would love to have a dark mode inside their Orchestrator code editor. Unfortunately, it is not there along with many other much-needed features that should come with a code editor.

At the moment, I miss the enablement of dark theme more than anything.

Solution

As now we have the client running in the browser (assuming Google Chrome), we can pick any suitable plugin which can enable dark mode at browser level (post rendering of elements). I tested various plugins, only to find out that Midnight Lizard is, if not the best, one of the best plugin for enabling dark mode and playing with themes that looks great on Orchestrator. Visit their website (https://midnight-lizard.org) to know more.

Follow this link to know-how about plugin installation in Chrome.

Once, you install it, enable it by clicking on the plugin and then clicking on ON button.

You will see a list of themes from which you can pick and play. Personally, I like these themes the most:

• Inverted Light: It is the dark theme I like the most on my Orchestrator. It is very comfortable to eyes while wokring in dim or no lights. Vibrant colors.

• Apple Mint: This one is my favrorite theme for changing my mood while I work on Orchestartor. It’s subtle, candish and yet dark in hue. Orchestrator looks just fantastic in this one.

• Sunset Rails: This one looks a little vintage and contrast ratio is really good.

Hoever, this is all about personal preference. Let me know which one did you like in the comments. One last thing, if you don’t like the default yellowish code area, you can fix it using this setting in the Background tab. Tick Replace all.

Also, if you don’t want this plugin to apply globally to the websites, use this setting. Untick Run on all websites by default.

1 more approach

You can also check out this post by Stefan Schnell where he toggled a browser flag #enable-force-dark to forcefully enable dark-mode. This approach is much easier to apply. However, you may see the unwanted dark-mode on other sites as well and won’t be able to play with themes which the forementioned plugin provides.

Verdict

One day, I would love to have it as an out-of-the-box feature, considering vSphere HTML5 client already have switchable dark theme option, and I know both of these tools, Orchestrator and vSphere along with almost all the VMware products, use Clarity Design System.