TOPdesk Operator Recoloring

The Goal

If you are a TOPdesk operator that has trouble working with TOPdesk due to it's white and blue color scheme, the TOPdesk Operator Recoloring project can help by adjusting the colors of TOPdesk to your needs.

There are plenty of things in TOPdesk of which the color can't be changed like this. For example the circular context menu buttons on fields in most cards won't change. However, most things can be changed, so that an operator with dyslexia, contrast (in)sensitivity, or color blindness can work with TOPdesk.

Install Stylus

The Stylus browser extension is needed by the TOPdesk Operator Recoloring to override the TOPdesk styling. Stylus is available for Chrome, Firefox, and Edge.

Install Stylus on Chrome

Open the Chrome Web Store page for Stylus with Chrome.

Click the Add to Chrome button near the top of the page.

A permission confirmation popup will appear, choose Add extension.

The Stylus extension button will now appear in Chrome's extension bar.

Install Stylus on Firefox

Open the Firefox add-on page for Stylus with Firefox.

Click the Add to Firefox button near the top of the page.

A permission confirmation popup will appear, choose Add.

The Stylus extension button will now appear in Firefox's extension bar.

Install Stylus on Edge

The Chrome web store page for Stylus. A banner at the top says 'You can now add extensions from the Chrome web store to Microsoft Edge', with a button that reads 'Allow extensions from other stores'.

Open the Chrome Web Store page for Stylus with Edge. Skip the next 2 steps if the Add to Chrome button is shown.

Click the Allow extensions from other stores button in the bar at the top of the page.

A confirmation popup will appear, click Allow.

The Add to Chrome button will now be available near the top of the page, click it.

A permission confirmation popup will appear, choose Add extension.

The Stylus extension button will now appear in Edge's extension bar.

Install TOPdesk Operator Recoloring

Once Stylus has been installed, TOPdesk must be prepared and finally the TOPdesk Operator Recoloring can be installed.

Installing Custom Styles

The topdesk homescreen, with the user menu opened and the 'My settings' option highlighted.

In the TOPdesk operator's section, open the User menu and click the My settings option.

The my settings page. A big red arrow points at the checked 'support custom colours' checkbox.

In the Accessibility block, tick Support custom colours and click Save.

Click the install button for your favorite theme which will open a new window.

The 'install style' page of Stylus. A big red arrow points at the Install style button right below the title. The colors and filters can be seen in an overlay on the side.

If Stylus is installed, the opened window will look like this. Click the Install style button.

The topdesk screen is now all blue thanks to the 'cobalt blue' theme.

The TOPdesk colours will now be overridden by your chosen theme!

Themes

There are a couple of themes available out of the box. You can completely adjust any theme to your needs. See below for instructions on how to customize the theme to your liking.

Default Dark

TOPdesk themed with black, dark gray, and a bright orange accent color.

The default dark theme uses white text on black and dark gray backgrounds, with occassional bright orange accents to create a "dark mode" with strong contrast.

Install Default Dark theme

Soft Green

TOPdesk themed with soft white, mauve, and a green accent color.

The Soft Green theme replaces the stark white and blue backgrounds of TOPdesk with off-white and mauve. Still light, but lower contrast and much easier on the eye. The green color accentuates a few things to provide an anchor, and identify important things.

Install Soft Green theme

Cobalt Blue

TOPdesk themed with dark blues, and a yellow accent color.

Inspired by the Cobalt themes by Wes Bos, Cobalt Blue reduces the bright light coming from your screen without going full black. Two tints of blue, and a yellow accent color, produces a stylish not-quite dark mode.

Install Cobalt Blue theme

Customize

All the colors used by the TOPdesk Operator Recoloring can be adjusted to your preference.

Some cases, mostly icons, require a complicated filter instruction to color accordingly. Fortunately this instruction can be calculated automatically from your hexadecimal color! All the steps are explained below!

Custom Colors

The stylus extension button is highlighted, and below is a menu with the installed theme as well as several other options.

Open the Stylus extension menu, and click the gear icon in the menu item of the theme.

Click the color box for the color you want to change, and pick your new color.

The calculate filter form of this website. The color field contains the value '#FF00FF'.

Fill in the hexadecimal value of the new color in the Calculate Filter form below, and click Calculate.

The calculate filter form of this website. The result text area contains the calculated value starting with 'brightness(0)'.

The result appears next to the form after a short time. Click Copy to copy the result to the clipboard.

Paste the new filter value in the filter field of the color you changed. Make sure the changes are saved.

Topdesk in the cobalt theme, but now with a pink accent color.

And enjoy your personalized TOPdesk!

Feedback

If you have feedback or questions, please raise an issue on the GitHub project.