Creating a Visual Theme with CSS

You can change any of UI3's CSS styles by using the Local Overrides Scripts and Styles feature.

UI3 version 72 began using CSS Variables for a large number of colors. This was done to facilitate restyling the UI for Blue Iris 5, but provides a side-benefit of making it easier to create new visual themes. By overriding specific variables, you can re-theme UI3 with far less effort and less CSS markup than would have been required previously.

When setting out to create a new theme, it would be a good idea to look at all the current CSS Variables defined at the top of UI3.css, and use these as a template.

As an example, the following CSS could be saved to ui3-local-overrides.css in order to restore UI3's original appearance prior to version 72:

:root
{
	/* Main / Misc */
	--main-highlight-color: #0097F0;
	--panel-bg-color: #15171B;
	--cliplist-bg-color: #15171B;
	--contextmenu-server-icon-color: #0097F0;
	--button-color: #969BA7;
	--ptzpad-color: #363B46;
	--ptzpad-disabled-color: #20242b;
	--text-color: #969BA7;
	--text-hover-color: #D9DBDF;
	--text-active-color: #FFFFFF;
	--pctext-color: #E8E8E8;
	--pctext-hover-color: #FFFFFF;
	--audio-playing-color: #00F000;
	--audio-loading-color: #F0F000;
	--audio-error-color: #F00000;
	--audio-idle-color: var(--button-color);
	--seek-bar-color: var(--main-highlight-color);
	/* Dropdowns, Calendar, SquareButtons */
	--uicontrol-bg-color: transparent;
	--uicontrol-hover-bg-color: rgba(255,255,255,0.1);
	--uicontrol-active-bg-color: rgba(255,255,255,0.3);
	/* Dropdowns */
	--dropdown-item-bg-color: #2C2E31;
	--dropdown-item-hover-bg-color: #444444;
	--dropdown-item-active-bg-color: #666666;
	--dropdown-item-color: #DDDDDD;
	--dropdown-item-hover-color: #EEEEEE;
	--dropdown-item-active-color: #FFFFFF;
	--dropdown-item-blue-color: #0097F0;
	--dropdown-item-blue-hover-color: #4dbeff;
	--dropdown-item-blue-active-color: #99daff;
	--dropdown-item-golden-color: #BBBB00;
	--dropdown-item-golden-hover-color: #DDDD00;
	--dropdown-item-golden-active-color: #FFFF00;
	--dropdown-item-red-color: #F09700;
	--dropdown-item-red-hover-color: #ffa919;
	--dropdown-item-red-active-color: #ffb944;
	/* Dialogs */
	--dialog-bg-color: #393939;
	--dialog-border-color: #1870B5;
	--dialog-color: #cdcdcd;
	--dialog-titlebar-bg-color: #272727;
	--dialog-titlebar-bottom-border-color: #15273f;
	--dialog-titlebar-color: #cdcdcd;
	/* Collapsible headings in dialogs */
	--collapsible-heading-bg-color: #424242;
	--collapsible-heading-hover-bg-color: #4a4a4a;
	--collapsible-heading-active-bg-color: #505050;
	--collapsible-heading-color: #808080;
	--collapsible-heading-expanded-bg-color: #626262;
	--collapsible-heading-expanded-hover-bg-color: #6a6a6a;
	--collapsible-heading-expanded-active-bg-color: #707070;
	--collapsible-heading-expanded-color: #cdcdcd;
	/* Streaming Profile List */
	--streaming-profile-item-bg-color: #424242;
	--streaming-profile-item-hover-bg-color: #525252;
	--streaming-profile-item-ghost-bg-color: rgba(255,255,255,0.1);
	/* Clip List */
	--datetile-bg-color: #383E47;
	--badge-color: #2b4bc6;
	--badge-hover-color: #0035ff;
	--badge-selected-color: #95C7FC;
	--badge-sentry-color: #F66476;
	--badge-sentry-hover-color: #ff98a5;
	/* Context Menus */
	--context-menu-icon-highlight-color: var(--main-highlight-color);
}