☰

Zoho Assist Custom Dark Theme

A Userscript to style Zoho Assist dark mode to match Zoho Desk dark mode

// ==UserScript==
// @name         Zoho Assist Custom Dark Theme
// @namespace    urn:assist-espi-custom-dark-theme
// @version      1.4.1
// @description  A Userscript to style Zoho Assist dark mode to match Zoho Desk dark mode
// @author       You
// @match        https://assist.espi.net/*
// @match        https://assist.zoho.eu/*
// @homepageURL  https://github.com/jake-greygoose/Zoho-Assist-User-Script
// @supportURL   https://github.com/jake-greygoose/Zoho-Assist-User-Script/issues
// @license      MIT
// @grant        GM_addStyle
// @run-at       document-idle
// ==/UserScript==




(function() {
    'use strict';

    // CSS definition includes .night-mode overrides and hides the toolbar
    const customThemeCSS = `

/* ============================================= */
/* === Overrides for .night-mode (Main Page) === */
/* ============================================= */

:root {
    --selected-color: #262626 !important;
    --shade-middlepane-color: #212121 !important; /* Use Content BG shade */
}

.night-mode {

/* --- Text Colors (Mostly Unchanged) --- */

  --text-color-default: #e2e4e7 !important;
  --text-color-v2: #ffffff !important;
  --text-color-v3: #ffffff !important;
  --text-color-v4: #e4e6e9 !important;
  --text-color-v5: #e2e4e7 !important;
  --text-color-v6: #e2e4e7 !important;
  --text-color-v7: #e4e6e9 !important;
  --text-color-v9: #000000 !important;
  --text-color-v8: #737373 !important;
  --text-color-v10: #e2e4e7 !important;
  --text-color-v11: #e2e4e7 !important;
  --text-color-red: #ff5f5f !important;
  --text-color-limit: #BCC0C7 !important;
  --text-color-green: #55AC7C !important; /* Keep Accent */
  --text-color-orange: #FF7A33 !important; /* Keep Accent */
  --place-holder-text: #e3e5e8 !important;
  --placeholder-error: #FF5F5F !important;
  --notification-text-color: #e3e5e8 !important;
  --dashboard-no-data: #e2e4e7 !important;
  --label-name: #BCC0C7 !important;
  --button-disabled-text: #DEEFFF !important; /* Keep related to primary blue */
  --secondary-button-disabled-text: #237dd4 !important; /* Keep related to primary blue */
  --chart-font-color: #e2e4e7 !important;
  --filter-title-color: #eb9c3f !important; /* Keep Accent */


  /* --- Backgrounds & Shades (Mapped + Greys) --- */

  --background-main-container: #262626 !important; /* <-- MAPPED */
  --nav-background:  #171717 !important; /* <-- MAPPED */
  --left-pane-color: #171717 !important; /* <-- MAPPED */
  --sideBar-middlePane-color: #232b38 !important; /* Use Content BG shade */
  --background-white-dark-variant: #171717 !important; /* Use Nav BG shade */
  --background-onHover-color:  #262626 !important; /* Use Source Line Grey */
  --background-onHover-color1: #262626 !important; /* Use Source Line Grey */
  --background-onHover-color2: #262626 !important; /* Use Source Line Grey */
  --background-onHover-color3: #262626 !important; /* Use Source Line Grey */
  --background-onHover-color4: #262626 !important; /* Use Source Line Grey */
  --background-hover-sideBarPane: #262626 !important; /* Use Source Line Grey */
  --email-suggestion-hover: #383f55 !important; /* Use Source Line Grey */
  --li-hover-or-selected-bg: #383f55 !important; /* Use Source Line Grey */
  --background-selected-color: #414963 !important; /* Use Lighter Source Line Grey */
  --background-selected-sideBar: #414963 !important; /* Use Lighter Source Line Grey */
  --background-selected-varient3: #2d3748 !important; /* Use Source Border Grey */
  --background-selected-varient4: #414963 !important; /* Use Lighter Source Line Grey */
  --background-selected-varient5: #99caee !important; /* Keep original light blue selection for now */
  --shade-popup-color: #2d3748 !important; /* Use Source Border Grey */
  --shade-middlepane-color: #212121 !important;
  --shade-variant1-color: #212121 !important; /* Use Content BG shade */
  --shade-variant2-color: #2d3748 !important; /* Use Source Border Grey */
  --shade-variant3-color: #383f55 !important; /* Use Source Line Grey */
  --shade-variant4-color: #383f55 !important; /* Use Source Line Grey */
  --shade-variant5-color: #414963 !important; /* Use Lighter Source Line Grey */
  --shade-variant6-color: #2d3748 !important; /* Use Source Border Grey */
  --shade-variant7-color: #414963 !important; /* Use Lighter Source Line Grey */
  --shade-table-header: #2d3748 !important; /* Use Source Border Grey */
  --shade-table-header2: #2d3748 !important; /* Use Source Border Grey */
  --shade-table-header3: #2d3748 !important; /* Use Source Border Grey */
  --background-sideBar-collapser: #212121 !important; /* Use Source Border Grey */
  --session-notification-background: #383f55 !important; /* Use Source Line Grey */
  --info-card-background: #2d3748 !important; /* Use Source Border Grey */
  --assist-box-title: #232b38 !important; /* Use Content BG shade */
  --info-box-blue: #2d3748 !important; /* Use Source Border Grey */
  --announcement-bar: linear-gradient(to right, #2d3748, #383f55) !important; /* Use Grey Gradient */
  --shortcut-key-bg: rgba(255, 255, 255, 0.4) !important; /* Keep */
  --page-nav-bg: #383f55 !important; /* Use Source Line Grey */
  --tags-bg-color: #414963 !important; /* Use Lighter Source Line Grey */
  --transparent-bg: transparent !important; /* Keep */
  --billing-getting-started: #171717 !important; /* Use Nav BG shade */
  --popup-background: #2d3748 !important; /* Use Source Border Grey */
  --keyPoints-background: #2d3748 !important; /* Use Source Border Grey */
  --disable-placeholder: #ffffff0a !important; /* Keep */
  --date-in-range: #383f55 !important; /* Use Source Line Grey */
  --shade-input-color: #2d3748 !important; /* Use Source Border Grey */
  --input-search-container: #383f55 !important; /* Use Source Line Grey */
  --drop-down-bg-color: #2d3748 !important; /* Use Source Border Grey */
  --drop-down-hover: #383f55 !important; /* Use Source Line Grey */
  --drop-down-header-bg: #383f55 !important; /* Use Source Line Grey */
  --drop-down-selected: #414963 !important; /* Use Lighter Source Line Grey */
  --shade-dropdown-varient1: #2d3748 !important; /* Use Source Border Grey */
  --shade-hover-dropdown: #383f55 !important; /* Use Source Line Grey */
  --a11y-bg: #2d3748 !important; /* Use Source Border Grey */
  --a11y-subContainer: #232b38 !important; /* Use Content BG shade */
  --a11y-keySet-bg: #232b38 !important; /* Use Content BG shade */
  --a11y-mainContianer-header: #2d3748 !important; /* Use Source Border Grey */
  --deployment-modal-background: #232b38 !important; /* Use Content BG shade */
  --filter-header: #2d3748 !important; /* Use Source Border Grey */
  --filter-selected-tags-bg: #419AF30F !important; /* Keep original blueish */
  --chart-selected-bg: #414963 !important; /* Use Lighter Source Line Grey */
  --table-row-hover: #262626 !important; /* <<<< NEW: Override for table row hover */
  --table-header-row: #212121 !important;
  --shade-hover-dropdown: #262626 !important;

  /* --- Borders (Mapped + Greys) --- */
  --border-box-variant1: #636363 !important; /* Keep original light grey */
  --border-box-dark-null-variant: none !important; /* Keep */
  --border-box-variant2: #2d3748 !important; /* <-- MAPPED */
  --border-box-variant3: none !important; /* Keep */
  --border-box-variant4: #383f55 !important; /* Use Source Line Grey */
  --border-box-variant5: #383f55 !important; /* Use Source Line Grey */
  --border-ddd-to-fade: #383f55 !important; /* Use Source Line Grey */
  --search-box-border: #383f55 !important; /* Use Source Line Grey */
  --disable-placeholder-border: #383f55 !important; /* Use Source Line Grey */
  --error-input-border: #df666d !important; /* Keep Error */
  --input-search-container-ccc-to-dark: #383f55 !important; /* Use Source Line Grey */
  --drop-down-border: #383f55 !important; /* Use Source Line Grey */
  --dropdown-border-color: #383f55 !important; /* Use Source Line Grey */
  --dropdown-border: #383f55 !important; /* Use Source Line Grey */
  --a11y-subContainer-border: #383f55 !important; /* Use Source Line Grey */
  --a11y-input-border: #383f55 !important; /* Use Source Line Grey */
  --deployment-card-border: #383f55 !important; /* Use Source Line Grey */
  --filter-selected-tags-border: #286ce5 !important; /* Keep primary blue */
  --chart-border-line: #383f55 !important; /* Use Source Line Grey */
  --chart-grid-color: #383f55 !important; /* Use Source Line Grey */

  /* --- Buttons & Interactions (Keep Primary Blues/Accents) --- */
  --primary-button: #286ce5 !important;
  --primary-button-hover: #2b72f2 !important;
  --secondary-bluebtn-hover: #286ce512 !important;
  --link-and-tertiary-button: #cecfce !important;
  --button-onhover-fill: #2b72f2 !important;
  --primary-redbutton: #CF4334 !important;
  --primary-redbutton-hover: #BA3425 !important;
  --secondary-redbtn-hover: #DF666D1A !important;
  --cancel-button: #AFAFAF !important;
  --cancel-button-hover: #AFAFAF0D !important;
  --toggle-button-enabled-bg-fill: #286ce5 !important;
  --toggle-button-disabled-bg-fill: #414963 !important; /* Use Lighter Source Line Grey */
  --toggle-inactive-bg: #414963 !important; /* Use Lighter Source Line Grey */
  --secondary-button: transparent !important;
  --button-disabled-fill: #0C458C !important; /* Keep related to primary blue */
  --close-dialog-button: #383f55 !important; /* Use Source Line Grey */
  --blue-color: #286ce5 !important;
  --deployment-text-primary: #286ce5 !important;

  /* --- Tooltips (Greys) --- */
  --tooltip-color-variant1: #e2e4e7 !important; /* Use default text color */
  --tooltip-bg: #414963 !important; /* Use Lighter Source Line Grey */

  /* --- Box Shadows (Keep Original) --- */
  --box-shadow-color: #00000033 !important;
  --box-shadow-varient1: none !important;
  --box-shadow-varient2: none !important;

  /* --- Deployment Specific (Greys) --- */
  --deployment-calender-header: #2d3748 !important; /* Use Source Border Grey */
  --deployment-link-hover: #70c1ff !important; /* Keep original light blue */
  --deployment-card-border-hover: #414963 !important; /* Use Lighter Source Line Grey */

  /* --- Chart Specific (Keep accents for clarity) --- */
  --chart-color-selected: #E3E5E8 !important; /* Keep */
  --chart-color-unselected: #5474BD !important; /* Keep original blueish for chart */

  /* --- Misc (Greys) --- */
  --search-box-onhover: #babcc1 !important; /* Keep light grey */
  --error-msg-color: #FF5F5F !important; /* Keep Error */
  --ico-color1: #da7c0e !important; /* Keep Accent */
  --calender-disabled: rgba(228, 230, 233, 0.5) !important; /* Keep */
  --arrow-green: #59AF00 !important; /* Keep Accent */
  --arrow-red: #EF7D00 !important; /* Keep Accent */
}

  /* =========================================== */
  /* === Specific Overrides === */
  /* =========================================== */

  /* Style selected sidebar item using stable attribute selector */
  #left-pane-contain a[class*="sidebar-module__selected__"] {
      background-color: #262626 !important;
      border-left: 4px solid #3d7bc3; !important;
      color: #3d7bc3 !important;
  }

#left-pane-contain a[class*="sidebar-module__selected__"] > span:first-of-type {
    opacity: 1 !important; /* Make selected icon fully opaque */
    filter: invert(51%) sepia(18%) saturate(2899%) hue-rotate(182deg) brightness(91%) contrast(86%) !important;
}

/* =========================================== */
/* === Hide #wmstoolbar (Chat Widget) === */
/* =========================================== */

#wmstoolbar {
    display: none !important;
}

*/

    `; // End of customThemeCSS template literal

    // Inject the CSS into the page
    GM_addStyle(customThemeCSS);

    console.log('Custom Dark Theme applied (Toolbar Hidden, Table Hover Fixed) with !important override.');

})();