Version: 3.2.0

TOPdesk Operator Recoloring

TOPdesk like you've never seen before

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

The chrome web store page for Stylus.

Open the Chrome Web Store page for Stylus with Chrome.

The Add to Chrome button.

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

The Chrome permission popup which warns that the Stylus extension will be able to 'Read and change all your data on all websites'.

A permission confirmation popup will appear, choose Add extension.

The Stylus button has appeared in the extension bar with a popup that reads 'Stylus has been added to Chrome'.

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

Install Stylus on Firefox

The Firefox add-on page for Stylus.

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

The Add to Firefox button.

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

The Firefox permission popup which warns that the Stylus extension will be able to 'Access your data for all websites', 'Access browser tabs', and 'Access browser activity during navigation'.

A permission confirmation popup will appear, choose Add.

The Stylus button has appeared in the extension bar with a popup that reads 'Stylus was added'.

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.

The 'Allow extensions from other stores' from other stores button.

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

The confirmation popup to allow extensions from other stores, which explains that 'Microsoft does not verify extensions installed from third-party stores'.

A confirmation popup will appear, click Allow.

The Add to Chrome button.

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

The Edge permission popup which warns that the Stylus extension will be able to 'Read and change all your data on all websites'.

A permission confirmation popup will appear, choose Add extension.

The Stylus button has appeared in the extension bar with a popup that reads 'Stylus has been added to Microsof Edge'.

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.

The themes section of this website.

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.

The stylus style configuration popup, with all the colors and filters for 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.

The stylus style configuration popup again, but the 'Primary' color is now pink and the 'Primary filter' field is selected.

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!

Calculate Filter

Fill in the hexadecimal value of your color and press Calculate.

#

Feedback

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