Dark theme for Sitecore XP on Chrome

Most of us like to work on Dark theme these days but one thing I will like to clear here is that Sitecore does not give any options to change the theme in the out-of-the-box installation. And this is not WordPress 😛 so we need to settle with the dark theme in Google chrome using Google chrome extension by Ugo Quaisse for now.

The extension is tested for Sitecore XP 8.2 & 9.2 but I have tried it on XP 9.3 and it is working as expected. Lets check how can we configure dark theme on our Sitecore XP in chrome.

  1. Login to your Sitecore instance and you will see the Launchpad loaded in default theme.
    Launchpad_1
  2. Open the Sitecore Author Toolbox Chrome extension in new tab.
    Sitecore Author Toolbox
  3. Click Add to chrome button to add & install it.
  4. Once it is successfully installed, you should be able to see it in the top upper right corner with status as Off.
    Sitecore Author Toolbox installed
  5. Go to Sitecore instance and reload the Launchpad.
    Launchpad_2
  6. When you load the Launchpad in Chrome, it will show you one more section for Sitecore Author Toolbox and there is one application under it “Options” which is nothing but an interface to set your preferences.
  7. Go to Options. Scroll down and Set the dark theme.
    Options
  8. Check the Dark mode and click SAVE YOUR PREFERENCES.
    Options_2
  9. Once your preference is set for Dark mode, you can surf through the launchpad and other interfaces and you should see everything with the Dark mode.

This tool is not only for Dark mode, it is very useful tool for Authors and some of it’s features are as below:

• Displays Live URLs of a page
• Dynamic error messages
• Language flags + version highlight
• Support native Drag and Drop upload to your media folders
• Desktop notification on Publish
• Dark Mode UI
• Right-to-left support (Arabic, Hebrew, Persian, Urdu, Sindhi)
• Launchpad icon / Desktop menu
• Favorites Bar in Content Tree
• Resume form where you left in Sitecore after login/reload
• Character counter
• Translate Mode Copy Button
• Accordion sections to tabs
• Html Editor color syntax + auto completion
• Experience Editor Quick Tabs
• Shareable URLs (Recipients must have the extension installed)
• Multi-list view enhancement, with template icons and path (beta)
• On a live page: Right click > Edit page into Experience Editor (beta)
• Fallback if “Quick Info” and “Title Bar” section are not activated in your Content Editor
• Character counter (input, text area)
• Go To Item action in Multi-list Select and Bucket Select lists
• Browser icon badge when Sitecore is detected
• Auto Expand Tree

For more information on this tool, you can go through this blog or video

Thank you… Keep Learning.. Keep Sitecoring 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s