GHL Experts
Back to Articles

GoHighLevel Dashboard Themes: Free Custom CSS Color Schemes for White-Label Agencies

Get free GoHighLevel dashboard themes with ready-to-use CSS and JavaScript code. Blue, green, gray, and dark theme templates for white-label agency branding.

April 7, 2020
4 min read

GoHighLevel Dashboard Themes: Free Custom CSS Color Schemes for White-Label Agencies

Your GoHighLevel dashboard is the command center for your entire agency operation. Whether you log in yourself or hand access to a white-label client, the visual presentation of that dashboard sends a message about professionalism and brand identity.

This page provides four complete, ready-to-use dashboard themes you can copy and paste directly into your GoHighLevel Custom CSS settings. Each theme includes both the CSS code and the companion JavaScript needed for full icon support.

How to Apply a Dashboard Theme

1. Log into your GoHighLevel agency account.

2. Navigate to Settings > Company.

3. Scroll to the Custom CSS / Custom Code section.

4. Paste the CSS code into the Custom CSS field.

5. Paste the JS code into the Custom JS/Code field (if available) or into the header/footer code section.

6. Click Save.

The theme will apply across your agency dashboard immediately.

Blue Theme

A clean, professional blue color scheme that works well for corporate agencies and business-focused brands. Blue tones on the sidebar icons, card headers, and buttons create a cohesive, trustworthy appearance.

Blue Theme - CSS Code

1/** @format */
2

3:root {
4  --nav-menus-background-color: #0ab3ff00 !important;
5  --nav-menu-text-color: #09628c !important;
6  --nav-menu-icon-color: #0474a8 !important;
7  --nav-hover-background-color: #009ce43d !important;
8  --location-switcher-background-color: #009ce43d !important;
9  --sidebar-agency-back-button: #b8e1f5 !important;
10  --card-header-background-color: #b8e1f5 !important;
11  --card-header-text-color: #000 !important;
12  --button-background-color: #45caf9 !important;
13  --tw-ring-color: #45caf9 !important;
14}
15

16.v2-open #sidebar-v2 {
17  background: var(--nav-menus-background-color) !important;
18}
19

20#sidebar-v2 .default-bg-color,
21#sidebar-v2.default-bg-color {
22  background: var(--nav-menus-background-color) !important;
23}
24

25#sidebar-v2 #sb_divider-1 {
26  background: var(--nav-menus-background-color) !important;
27}
28

29#sidebar-v2 #backButtonv2 {
30  background: var(--sidebar-agency-back-button) !important;
31}
32

33/* Quick action button css */
34#quickActions {
35  border: 1px solid var(--nav-menu-icon-color) !important;
36  border-radius: 50px !important;
37}
38

39nav a {
40  margin-top: 5px !important;
41}
42#sidebar-v2 .text-white,
43nav .text-white,
44nav span {
45  --tw-text-opacity: 1;
46  color: var(--nav-menu-text-color) !important;
47}
48

49#sb_agency-partners svg path,
50#sb_sites svg path,
51#sb_contacts svg path {
52  fill: var(--nav-menu-icon-color) !important;
53}
54nav svg path {
55  stroke: var(--nav-menu-icon-color) !important;
56}
57nav a.active,
58nav a:hover {
59  background: var(--nav-hover-background-color) !important;
60}
61

62#location-switcher-sidbar-v2 {
63  background: var(--location-switcher-background-color) !important;
64}
65

66#sb_other-settings {
67  background: var(--nav-hover-background-color) !important;
68}
69

70/* Setting and back to agency menu icon add */
71#sb_agency-settings::before,
72#sb_settings::before,
73#sb_undefined::before {
74  font-family: "Font Awesome 5 Free";
75  font-weight: 900;
76  position: absolute;
77  left: 16px;
78  font-size: 17px;
79}
80#sb_agency-settings::before,
81#sb_settings::before {
82  content: "\f013";
83}
84

85#sb_undefined::before {
86  content: "\f0e2";
87}
88#sb_agency-settings,
89#sb_settings,
90#sb_undefined {
91  padding-left: 40px !important;
92}
93#sb_agency-settings > img,
94#sb_settings > img,
95#sb_undefined > img {
96  display: none;
97}
98

99/* Card header background */
100.card-header {
101  background: var(--card-header-background-color) !important;
102}
103#dashboard .hl_tasks-list button.dropdown-toggle,
104#dashboard .hl_dashboard--sales-funnel .btn.btn-primary {
105  background-color: #fff0 !important;
106}
107

108.card-header h2,
109.card-header h3 {
110  color: var(--card-header-text-color) !important;
111}
112

113.bg-apple-500 {
114  background: var(--button-background-color) !important;
115}
116

117.focus\:outline-none:focus {
118  outline: 2px solid var(--button-background-color) !important;
119}

Blue Theme - JS Code

1<script
2  src="https://cdnjs.cloudflare.com/ajax/libs/svg-injector/1.1.3/svg-injector.min.js"
3  integrity="sha512-LpKoEmPyokcDYSjRJ/7WgybgdAYFsKtCrGC9m+VBwcefe1vHXyUnD9fTQb3nXVJda6ny1J84UR+iBtEYm3OQmQ=="
4  crossorigin="anonymous"
5  referrerpolicy="no-referrer"
6></script>
7

8<script>
9  window.addEventListener("routeChangeEvent", function (e) {
10    console.log(e.detail.to.name);
11    if (e.detail.to.name === "company-settings-v2") return;
12

13    let navInconInterval = setInterval(() => {
14      const navSVG = document.querySelectorAll("#sidebar-v2 nav svg");
15

16      if (navSVG === true) return;
17

18      const nav = document.querySelectorAll("nav")[0];
19      const navIcons = nav.querySelectorAll("nav img");
20

21      const iconsArray = Array.from(navIcons);
22

23      if (iconsArray.length !== 0 && navIcons) {
24        clearInterval(navInconInterval);
25        for (let icon of iconsArray) {
26          SVGInjector(icon);
27        }
28      }
29    });
30  });
31</script>

Green Theme

A fresh green color scheme that suits health, wellness, and eco-focused agencies. Light green tones on card headers, buttons, and hover states create an energetic, approachable feel.

Green Theme - CSS Code

1/** @format */
2

3:root {
4  --nav-menus-background-color: #0ab3ff00 !important;
5  --nav-menu-text-color: #1f861d !important;
6  --nav-menu-icon-color: #1f861d !important;
7  --nav-hover-background-color: #7cff7ab0 !important;
8  --location-switcher-background-color: #7cff7ab0 !important;
9  --sidebar-agency-back-button: #b3ffb1 !important;
10  --card-header-background-color: #b3ffb1 !important;
11  --card-header-text-color: #000 !important;
12  --button-background-color: #7cf77a !important;
13  --button-text-color: #000 !important;
14  --tw-ring-color: #7cf77a !important;
15}
16

17.v2-open #sidebar-v2 {
18  background: var(--nav-menus-background-color) !important;
19}
20

21#sidebar-v2 .default-bg-color,
22#sidebar-v2.default-bg-color {
23  background: var(--nav-menus-background-color) !important;
24}
25

26#sidebar-v2 #sb_divider-1 {
27  background: var(--nav-menus-background-color) !important;
28}
29

30#sidebar-v2 #backButtonv2 {
31  background: var(--sidebar-agency-back-button) !important;
32}
33

34/* Quick action button css */
35#quickActions {
36  border: 1px solid var(--nav-menu-icon-color) !important;
37  border-radius: 50px !important;
38}
39

40nav a {
41  margin-top: 5px !important;
42}
43#sidebar-v2 .text-white,
44nav .text-white,
45nav span {
46  --tw-text-opacity: 1;
47  color: var(--nav-menu-text-color) !important;
48}
49

50#sb_agency-partners svg path,
51#sb_sites svg path,
52#sb_contacts svg path {
53  fill: var(--nav-menu-icon-color) !important;
54}
55nav svg path {
56  stroke: var(--nav-menu-icon-color) !important;
57}
58nav a.active,
59nav a:hover {
60  background: var(--nav-hover-background-color) !important;
61}
62

63#location-switcher-sidbar-v2 {
64  background: var(--location-switcher-background-color) !important;
65}
66

67#sb_other-settings {
68  background: var(--nav-hover-background-color) !important;
69}
70

71/* Setting and back to agency menu icon add */
72#sb_agency-settings::before,
73#sb_settings::before,
74#sb_undefined::before {
75  font-family: "Font Awesome 5 Free";
76  font-weight: 900;
77  position: absolute;
78  left: 16px;
79  font-size: 17px;
80}
81#sb_agency-settings::before,
82#sb_settings::before {
83  content: "\f013";
84}
85

86#sb_undefined::before {
87  content: "\f0e2";
88}
89#sb_agency-settings,
90#sb_settings,
91#sb_undefined {
92  padding-left: 40px !important;
93}
94#sb_agency-settings > img,
95#sb_settings > img,
96#sb_undefined > img {
97  display: none;
98}
99

100/* Card header background */
101.card-header {
102  background: var(--card-header-background-color) !important;
103}
104#dashboard .hl_tasks-list button.dropdown-toggle,
105#dashboard .hl_dashboard--sales-funnel .btn.btn-primary {
106  background-color: #fff0 !important;
107}
108

109.card-header h2,
110.card-header h3 {
111  color: var(--card-header-text-color) !important;
112}
113

114.bg-apple-500 {
115  background: var(--button-background-color) !important;
116  color: var(--button-text-color);
117}
118

119.focus\:outline-none:focus {
120  outline: 2px solid var(--button-background-color) !important;
121}

Green Theme - JS Code

1<script
2  src="https://cdnjs.cloudflare.com/ajax/libs/svg-injector/1.1.3/svg-injector.min.js"
3  integrity="sha512-LpKoEmPyokcDYSjRJ/7WgybgdAYFsKtCrGC9m+VBwcefe1vHXyUnD9fTQb3nXVJda6ny1J84UR+iBtEYm3OQmQ=="
4  crossorigin="anonymous"
5  referrerpolicy="no-referrer"
6></script>
7

8<script>
9  window.addEventListener("routeChangeEvent", function (e) {
10    console.log(e.detail.to.name);
11    if (e.detail.to.name === "company-settings-v2") return;
12

13    let navInconInterval = setInterval(() => {
14      const navSVG = document.querySelectorAll("#sidebar-v2 nav svg");
15

16      if (navSVG === true) return;
17

18      const nav = document.querySelectorAll("nav")[0];
19      const navIcons = nav.querySelectorAll("nav img");
20

21      const iconsArray = Array.from(navIcons);
22

23      if (iconsArray.length !== 0 && navIcons) {
24        clearInterval(navInconInterval);
25        for (let icon of iconsArray) {
26          SVGInjector(icon);
27        }
28      }
29    });
30  });
31</script>

Gray Theme

A minimal, neutral gray scheme that provides a clean, distraction-free workspace. Slate tones on card headers and buttons keep things professional without drawing attention away from your data.

Gray Theme - CSS Code

1/** @format */
2

3:root {
4  --nav-menus-background-color: #0ab3ff00 !important;
5  --nav-menu-text-color: #000 !important;
6  --nav-menu-icon-color: #000 !important;
7  --nav-hover-background-color: #778899 !important;
8  --location-switcher-background-color: #778899 !important;
9  --sidebar-agency-back-button: #95abc0 !important;
10  --card-header-background-color: #95abc0 !important;
11  --card-header-text-color: #000 !important;
12  --button-background-color: #778899 !important;
13  --button-text-color: #000 !important;
14  --tw-ring-color: #778899 !important;
15  --dashboard-time-and-date-color: #000 !important;
16}
17

18.v2-open #sidebar-v2 {
19  background: var(--nav-menus-background-color) !important;
20}
21

22#sidebar-v2 .default-bg-color,
23#sidebar-v2.default-bg-color {
24  background: var(--nav-menus-background-color) !important;
25}
26

27#sidebar-v2 #sb_divider-1 {
28  background: var(--nav-menus-background-color) !important;
29}
30

31#sidebar-v2 #backButtonv2 {
32  background: var(--sidebar-agency-back-button) !important;
33}
34

35/* Quick action button css */
36#quickActions {
37  border: 1px solid var(--nav-menu-icon-color) !important;
38  border-radius: 50px !important;
39}
40

41nav a {
42  margin-top: 5px !important;
43}
44#sidebar-v2 .text-white,
45nav .text-white,
46nav span {
47  --tw-text-opacity: 1;
48  color: var(--nav-menu-text-color) !important;
49}
50

51#sb_agency-partners svg path,
52#sb_sites svg path,
53#sb_contacts svg path {
54  fill: var(--nav-menu-icon-color) !important;
55}
56nav svg path {
57  stroke: var(--nav-menu-icon-color) !important;
58}
59nav a.active,
60nav a:hover {
61  background: var(--nav-hover-background-color) !important;
62}
63

64#location-switcher-sidbar-v2 {
65  background: var(--location-switcher-background-color) !important;
66}
67

68#sb_other-settings {
69  background: var(--nav-hover-background-color) !important;
70}
71

72/* Setting and back to agency menu icon add */
73#sb_agency-settings::before,
74#sb_settings::before,
75#sb_undefined::before {
76  font-family: "Font Awesome 5 Free";
77  font-weight: 900;
78  position: absolute;
79  left: 16px;
80  font-size: 17px;
81}
82#sb_agency-settings::before,
83#sb_settings::before {
84  content: "\f013";
85}
86

87#sb_undefined::before {
88  content: "\f0e2";
89}
90#sb_agency-settings,
91#sb_settings,
92#sb_undefined {
93  padding-left: 40px !important;
94}
95#sb_agency-settings > img,
96#sb_settings > img,
97#sb_undefined > img {
98  display: none;
99}
100

101/* Card header background */
102.card-header {
103  background: var(--card-header-background-color) !important;
104}
105#dashboard .hl_tasks-list button.dropdown-toggle,
106#dashboard .hl_dashboard--sales-funnel .btn.btn-primary {
107  background-color: #fff0 !important;
108}
109

110.card-header h2,
111.card-header h3 {
112  color: var(--card-header-text-color) !important;
113}
114

115.bg-apple-500 {
116  background: var(--button-background-color) !important;
117  color: var(--button-text-color);
118}
119

120.focus\:outline-none:focus {
121  outline: 2px solid var(--button-background-color) !important;
122}
123

124#dashboard .date-time-picker .field .field-input {
125  color: var(--dashboard-time-and-date-color) !important;
126}

Gray Theme - JS Code

1<script
2  src="https://cdnjs.cloudflare.com/ajax/libs/svg-injector/1.1.3/svg-injector.min.js"
3  integrity="sha512-LpKoEmPyokcDYSjRJ/7WgybgdAYFsKtCrGC9m+VBwcefe1vHXyUnD9fTQb3nXVJda6ny1J84UR+iBtEYm3OQmQ=="
4  crossorigin="anonymous"
5  referrerpolicy="no-referrer"
6></script>
7

8<script>
9  window.addEventListener("routeChangeEvent", function (e) {
10    console.log(e.detail.to.name);
11    if (e.detail.to.name === "company-settings-v2") return;
12

13    let navInconInterval = setInterval(() => {
14      const navSVG = document.querySelectorAll("#sidebar-v2 nav svg");
15

16      if (navSVG === true) return;
17

18      const nav = document.querySelectorAll("nav")[0];
19      const navIcons = nav.querySelectorAll("nav img");
20

21      const iconsArray = Array.from(navIcons);
22

23      if (iconsArray.length !== 0 && navIcons) {
24        clearInterval(navInconInterval);
25        for (let icon of iconsArray) {
26          SVGInjector(icon);
27        }
28      }
29    });
30  });
31</script>

Dark Theme

A dark mode theme that reduces eye strain during extended use. Popular with agencies that work late hours or prefer a modern, sleek aesthetic. Features a deep navy background with purple accent icons and blue highlights.

Dark Theme - CSS Code

1/** @format */
2

3:root {
4  --nav-menus-background-color: #00142a !important;
5  --nav-menu-text-color: rgb(255, 255, 255) !important;
6  --nav-menu-icon-color: rgb(151, 113, 255) !important;
7  --nav-hover-background-color: #007ef5 !important;
8  --location-switcher-background-color: #76bbff !important;
9  --sidebar-agency-back-button: #76bbff !important;
10  --card-header-background-color: #ffffff !important;
11  --card-header-text-color: #000 !important;
12  --button-background-color: #007ef5 !important;
13  --button-text-color: #000 !important;
14  --tw-ring-color: #007ef5 !important;
15  --dashboard-time-and-date-color: #000 !important;
16  --sb-divider-background-color: #007ff500 !important;
17}
18

19.v2-open #sidebar-v2 {
20  background: var(--nav-menus-background-color) !important;
21}
22

23#sidebar-v2 .default-bg-color,
24#sidebar-v2.default-bg-color {
25  background: var(--nav-menus-background-color) !important;
26}
27

28#sidebar-v2 #sb_divider-1 {
29  background: var(--nav-menus-background-color) !important;
30}
31

32#sidebar-v2 #backButtonv2 {
33  background: var(--sidebar-agency-back-button) !important;
34}
35

36/* Quick action button css */
37#quickActions {
38  border: 1px solid var(--nav-menu-icon-color) !important;
39  border-radius: 50px !important;
40}
41

42nav a {
43  margin-top: 5px !important;
44}
45#sidebar-v2 .text-white,
46nav .text-white,
47nav span {
48  --tw-text-opacity: 1;
49  color: var(--nav-menu-text-color) !important;
50}
51

52#sb_agency-partners svg path,
53#sb_sites svg path,
54#sb_contacts svg path {
55  fill: var(--nav-menu-icon-color) !important;
56}
57nav svg path {
58  stroke: var(--nav-menu-icon-color) !important;
59}
60nav a.active,
61nav a:hover {
62  background: var(--nav-hover-background-color) !important;
63}
64

65#location-switcher-sidbar-v2 {
66  background: var(--location-switcher-background-color) !important;
67}
68

69#sb_other-settings {
70  background: var(--nav-hover-background-color) !important;
71}
72

73/* Setting and back to agency menu icon add */
74#sb_agency-settings::before,
75#sb_settings::before,
76#sb_undefined::before,
77#sb_settings::before {
78  font-family: "Font Awesome 5 Free" !important;
79  font-weight: 900 !important;
80  position: absolute !important;
81  left: 16px !important;
82  font-size: 17px !important;
83  color: var(--nav-menu-icon-color);
84}
85

86#sb_settings::before,
87#sb_agency-settings::before,
88#sb_settings::before {
89  content: "\f013" !important;
90}
91

92#sb_undefined::before {
93  content: "\f0e2" !important;
94}
95#sb_agency-settings,
96#sb_settings,
97#sb_undefined {
98  padding-left: 40px !important;
99}
100#sb_agency-settings > img,
101#sb_settings > img,
102#sb_undefined > img {
103  display: none !important;
104}
105

106#sidebar-v2 i.text-white,
107nav i.text-white,
108nav span i {
109  color: var(--nav-menu-icon-color) !important;
110}
111#sb_business-services,
112#sb_other-settings {
113  background: var(--sb-divider-background-color) !important;
114}
115

116/* Card header background */
117.card-header {
118  background: var(--card-header-background-color) !important;
119}
120#dashboard .hl_tasks-list button.dropdown-toggle,
121#dashboard .hl_dashboard--sales-funnel .btn.btn-primary {
122  background-color: #fff0 !important;
123}
124

125.card-header h2,
126.card-header h3 {
127  color: var(--card-header-text-color) !important;
128}
129

130.bg-apple-500 {
131  background: var(--button-background-color) !important;
132  color: var(--button-text-color);
133}
134

135.focus\:outline-none:focus {
136  outline: 2px solid var(--button-background-color) !important;
137}
138

139#dashboard .date-time-picker .field .field-input {
140  color: var(--dashboard-time-and-date-color) !important;
141}

Dark Theme - JS Code

1<script
2  src="https://cdnjs.cloudflare.com/ajax/libs/svg-injector/1.1.3/svg-injector.min.js"
3  integrity="sha512-LpKoEmPyokcDYSjRJ/7WgybgdAYFsKtCrGC9m+VBwcefe1vHXyUnD9fTQb3nXVJda6ny1J84UR+iBtEYm3OQmQ=="
4  crossorigin="anonymous"
5  referrerpolicy="no-referrer"
6></script>
7

8<script>
9  window.addEventListener("routeChangeEvent", function (e) {
10    console.log(e.detail.to.name);
11    if (e.detail.to.name === "company-settings-v2") return;
12

13    let navInconInterval = setInterval(() => {
14      const navSVG = document.querySelectorAll("#sidebar-v2 nav svg");
15

16      if (navSVG === true) return;
17

18      const nav = document.querySelectorAll("nav")[0];
19      const navIcons = nav.querySelectorAll("nav img");
20

21      const iconsArray = Array.from(navIcons);
22

23      if (iconsArray.length !== 0 && navIcons) {
24        clearInterval(navInconInterval);
25        for (let icon of iconsArray) {
26          SVGInjector(icon);
27        }
28      }
29    });
30  });
31</script>

Understanding the CSS Variables

All four themes use the same CSS structure with different color values. Here is what each variable controls:

| Variable | What It Styles |

|----------|---------------|

| --nav-menus-background-color | Sidebar background color |

| --nav-menu-text-color | Sidebar menu text color |

| --nav-menu-icon-color | Sidebar icon stroke/fill color |

| --nav-hover-background-color | Menu item hover and active background |

| --location-switcher-background-color | Location switcher dropdown background |

| --sidebar-agency-back-button | "Back to Agency" button background |

| --card-header-background-color | Dashboard card header backgrounds |

| --card-header-text-color | Card header text color |

| --button-background-color | Primary button background color |

| --button-text-color | Primary button text color |

| --tw-ring-color | Focus ring color for interactive elements |

| --dashboard-time-and-date-color | Date picker text color (Gray and Dark themes) |

| --sb-divider-background-color | Sidebar divider background (Dark theme) |

What the JavaScript Does

The companion JavaScript code loads the SVG Injector library, which converts the sidebar's PNG/IMG icons into inline SVG elements. This is necessary because the CSS uses stroke and fill properties to recolor the icons -- properties that only work on SVG elements, not on regular image tags.

The script listens for route change events within GoHighLevel's single-page application and re-injects the SVG icons whenever you navigate to a new section. Without this script, the sidebar icons would remain their default colors regardless of your CSS theme.

Creating Your Own Theme

To create a custom color scheme, copy any of the themes above and modify the :root variables to match your brand. The structure targets these key dashboard areas:

• Sidebar: Navigation background, text, icons, hover states

• Location switcher: The dropdown for switching between sub-accounts

• Card headers: The header bars on dashboard widgets

• Buttons: Primary action buttons throughout the interface

• Focus states: Outline rings on interactive elements

Tips for Maintaining Your Theme

• Keep a backup: Store your CSS and JS code outside of GoHighLevel in case settings are accidentally reset.

• Watch for GHL updates: GoHighLevel regularly updates its interface. Class names or page structures can change, which may break custom CSS. Review your theme after major platform updates.

• Use browser DevTools: Right-click any element and select "Inspect" to find the exact CSS selectors you need. This is the fastest way to discover class names for new elements.

• Test across views: After applying your theme, navigate through contacts, opportunities, conversations, and calendars to make sure the colors are consistent everywhere.

Frequently Asked Questions

Does the theme affect sub-account dashboards?

Agency-level custom CSS typically applies across the agency view. For sub-account-specific styling, you may need to add CSS at the location level as well.

Will my theme survive GoHighLevel updates?

Your custom CSS is stored separately from GHL's core code, so updates will not erase your styles. However, if GHL changes class names or HTML structure, some selectors may stop working and need adjustment.

Can I use a background image instead of a solid sidebar color?

Yes. Replace the background property on .v2-open #sidebar-v2 with a background-image URL. You may need to adjust text colors for readability against your chosen image.

The icons are not changing color. What is wrong?

Make sure you have added both the CSS and the JavaScript code. The JS is required to convert image icons to SVG format so the CSS stroke and fill properties can take effect.

Want to try HighLevel?

If you're exploring marketing automation platforms, HighLevel offers a 30-day free trial.

Start your free trial