Advanced Branding: Creating a Dark Theme

If you would like to align your Hopin event venue colors with your branding, you can follow this guide to create a dark theme. It can take some time to apply this theme as you will need to change a number of theme colors, add custom CSS codes and, if applicable for your event, to work on the further customization of some specific areas.

Dark theme allows to replace Hopin default color across the event venue and to use a dark color for all backgrounds. This is an example of how it will look:

How to find the HEX Color Code

Before you get started, you will need to know the HEX codes for your brand's colors. If you don’t know the HEX codes, you can use this online color picker to upload your logo or image and it will generate the color codes for you.

Changing the primary color

Go to your Event Dashboard > Setup > Theme. You will see a header named "Color". In the field titled "Primary color" input the HEX code (starting with the # symbol) of your preferred brand color.

Note: it is important that you input the HEX code here and not an RGB value or the name of a color (i.e. "blue" or "red") as this could cause an error. 

Don’t forget to click “Save” to apply the changes. 

Tip: Check the Contrast for best results

For this Dark theme, to make sure that your paragraphs and headlines are readable, you can use this online tool to check color contrast between your brand color and any white. Please, remember that it’s important to pass AA standard for Large Text and Graphical Objects and User Interface Components.

You can learn more about readability and accessibility in Web Content Accessibility Guidelines (WCAG).

Changing the theme colors

Next, click Show advanced settings and change the following color values; input the HEX code of your brand color and the mentioned color names or RGBA codes.

Note: To convert the HEX code of your brand color into RGBA you can use this online tool. You will need to do this to be able to add a different opacity to your brand color (the last component stands for opacity: e.g. if your RGBA code is rgba(128, 0, 128, 0.25), the 0.25 = 25% opacity).

You can also use a different light and dark color for your event instead of pure white and pure black. We highly recommend sticking to pure white for your text and headlines, but feel free to select dark grey or dark blue instead of pure black.

This is how the theme colors will look when editing them within your event. To save time when looking for the appropriate text boxes, you can use command + F (for Mac) or Ctrl + F (for Windows) to search the web page.

For more information on what these settings apply to, you can check out our Introduction to Advanced Branding guide for more of an overview.

Adding custom CSS code

Next, scroll all the way down and add the following code into the Custom CSS field. 

Note: Make sure to add your color values; “#HEXCODE” needs to be replaced with your main brand color HEX code.

If you use a different light and dark color for your event instead of pure white and pure black, replace “black” and “white” color values with your color codes.

It may be easier to use command + F (for Mac) or Ctrl + F (for Windows) to find and replace the necessary values.

/* change backgrounds */
body{background-color: black;}
.str-chat__main-panel, .chat-stream-input_container__33zut, .chat-stream-input_container__33zut textarea {background-color: transparent;}
.side-panel_tab__w71zF, [class*="side-panel_tab"]{background-color: black; }
.direct-messages_direct-messages-panel__11-CI, [class*="direct-messages_direct-messages-panel"] {background-color: black;}
.new-joiners_new-joiners__1jnid {background-color: black;}
.header_header__2VGIb{background-color: black;}
.more-segment-content_container__JaiWI, [class*="more-segment-content_container"] {background-color: black;}
.people_radio-button-group__XBhHu label {background-color: black;}
.speaker-card-styles_speaker-card__2Jc2t.speaker-card-styles_small__3Zzp7{background-color: black;}
.more-segment-content_container__JaiWI, [class*="more-segment-content_container"] {background-color: black;}
.css-1siq1wa-menu {background-color: black;}
[class*="tab-panel-styles_tab"] {background-color: black;}
.css-1siq1wa-menu{background-color: black;}
.schedule-menu-styles_schedule-menu-item__1YY92:nth-child(odd) {background-color: rgba(255, 255, 255, 0.15);}
.tab-panel-styles_header__3Rcee button:hover { background-color: rgba(255, 255, 255, 0.15);}
.ask-question_wrapper__11YVX {background-color: black;}
.question-action-menu_panel__11Dql {background: linear-gradient(90deg,hsla(0,0%,100%,0),black);}
.question-action-menu_button__106fU, .question-action-menu_reply-button__2aQQh{background-color: black;}
.new-layout, .new-layout .header, .new-layout .card, .new-layout .tabs{background-color: black;}
.new-layout .button{color: black;}
.speaker-card-styles_speaker-card__2Jc2t{background-color: black;}
.expo-styles_tags__3vmmK button{background: black; color: white; border: 0.0625rem solid rgba(255, 255, 255, 0.15)}
.expo-styles_tags__3vmmK button:hover {background-color: rgba(255, 255, 255, 0.2); color: white;}
.sessions-feature_tags__oJnEq button{background: black; color: white; border: 0.0625rem solid rgba(255, 255, 255, 0.15);}
.sessions-feature_tags__oJnEq button:hover {background-color: rgba(255, 255, 255, 0.2); color: white;}
.video-session-container_icon__91nfx{background-color: rgba(255,255,255, 0.2);}
.circle-icon-styles_container__3PRpE{background-color: rgba(255,255,255, 0.2);}
.answer_panel__6KP71{background-image: linear-gradient(90deg,hsla(0,0%,100%,0),black);}
.answer_button__3CyLH{background-color: rgba(255,255,255, 0.2);}
.schedule-meeting-modal_title__3q1df input{background-color: black; color: white; border: .0625rem solid rgba(255,255,255,0.2);}
.hpn-TextField__Input, .hpn-TextArea__TextArea {color: white; border: 1px solid rgba(255,255,255, 0.2); background-color: black;}

/*Reporting*/
.modal_modal-body__c1puk label {background-color: black;}

/*chat*/
.chat-stream-input_container__33zut button:hover, .fuYlDK:disabled {background-color: rgba(255, 255, 255, 0.18) !important; }
.chat-stream-message_chat-message__2xkuj:hover {background-color: rgba(255, 255, 255, 0.18);}
.stream-chat_date-separator-date__ZtRj0, .chat-stream-input_container__33zut, .str-chat__textarea textarea {background-color: black;}
.str-chat__textarea textarea {color: white !important;}
.chat-stream-message_chat-message-pinned__2l2A4 .chat-stream-message_chat-message-organiser__-0Lq- {background-color: transparent !important;}
.str-chat__emojisearch{background-color: black;}
.chat-conversations-component_conversation-list-item-unread__36K3C {background-color: #HEXCODE;}
.fQLzcj:disabled {background-color: transparent !important;}

/*GA*/
.create-modal-component_container__39tUN label {color: white;}
.create-modal-component_container__39tUN textarea {color: white; background-color: black;   border-color: rgba(255, 255, 255, 0.12);}
.ask-question_fallback-textarea__2GlLa {background-color: transparent !important;}

/*My Agenda*/
.iRRPnS{background-color: transparent;}
.sc-kIeTtH {background-color: rgba(255, 255,255, 0.18) !important;}
.item-divider_item-divider-time__2a6-4{background-color: transparent !important;}
.sc-ieGSVO, .sc-kSGQht{background-color: transparent !important;}
.item-divider_item-divider-time__2a6-4{background-color: transparent !important;}
.sc-eWvPJL[data-selected], .sc-kIeTtH{background-color: #HEXCODE;}
.sc-fteDCE {background-color: black;}

/* waiting room */
.waiting-page_root__pgiPU, [class*="waiting-page_root"] {background-color: black; }
.stream-component_video-label__3CXws, [class*="stream-component_video-label"]{color: white;}
[class*="icon-button_button"]{background-color:black;}
[class*="waiting-card_card"], .waiting-card_card__2J2RC{background-color: black; }
.waiting-page_link-button__DonIl, [class*="waiting-page_link-button"]{color: #HEXCODE;}

/*Registration*/
.event-page__banner-action svg path{fill: black;}
.event-page__header-event-info h1, .event-page__header-event-info a, .event-page__header-event-info p, .event-page__header-event-info span{color: white !important;}
.live-events-popup_header {background-color: black;}
.event-page__header-event-info .add-to-cal-link__icon svg path {fill: white;}
.header a svg path, .footer a svg path {fill: white;}
.container p, .container span, .container h1, .container h2, .container h3, .container h4, .container h5, .container h6, .container div, .container .text{color: white !important;}

/*Tabs*/
.tab-panel-styles_header__3Rcee button:hover {background-color: rgba(255, 255, 255, 0.27);}

/*button hover*/
.sc-pFZIQ:hover{background-color: #HEXCODE; color: white;}

/*Toast*/
.toast_toast-success__1FMxc {background: #07bc0c !important;}

/*Icon hover*/
.direct-messages_direct-messages-button-container__9VroH:hover, .fxEnrs:hover {background-color: rgba(255, 255, 255, 0.2);}

/*Recordings*/
.sc-cHjwLt {background-color: rgba(255, 255, 255, 0.15) !important;}
.sc-biBsmb {background-color: black;}
.sc-hYAvtR {background-color: rgba(255, 255, 255, 0) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important;}
.sc-hYAvtR:hover {background-color: rgba(255, 255, 255, 0.15) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important;}

/*My agenda zero state*/
.sc-jQbJRc, .hpn-Halon, .video-session-container_icon__91nfx, .notifications-menu-styles_icon__1oI02 {background-color: rgba(255, 255, 255, 0.2) !important;}
.sc-kEjbQP{color: white;}
.sc-djEslu button:first-child {color: white !important;}
.sc-djEslu button:first-child:hover {background-color: rgba(255, 255, 255, 0.2);}
.sc-fteDCE {background-color: black;}
.sc-cXGEIS button:first-child {color: white !important;}
.sc-cXGEIS button:first-child:hover {background-color: rgba(255, 255, 255, 0.2);}
.sc-jWixyH {background-color: rgba(128, 0, 128, 0.55);}
.sc-fkaoMN, .bVMHOY {background-color: transparent !important;}

/*registration*/
.gmSTtB:nth-child(2n+1) {background-color: rgba(255, 255, 255, 0.15) !important;}
.tabs_item, .tabs_item.-active {color: white;}
.sponsors-grid__HideLevelHeader-sf37w4-0 .card-content {background-color: black; border-radius: 8px; border: 1px solid rgba(255,255,255, 0.15) !important;}
.navigation_item {color: white;}
.sc-gKclnd button:hover  {background-color: rgba(255, 255, 255, 0.2) !important;}
.social-login-actions .social-media {background-color: rgba(255, 255, 255, 0.1) !important; border-radius: 4px;}
.social-login-actions .social-media:hover {background-color: rgba(255, 255, 255, 0.28) !important;}

/* text to white */
.main_main__hcb9b h2{color: white !important;}
.layout_layout-container__1idYN span, .layout_layout-container__1idYN div, .layout_layout-container__1idYN p {color: white;}
[class*="event-settings-menu-styles_label"] {color: white;}
[class*="schedule-card_content-container"] h3{color: white;}
.test-id-schedule-tab-content h3, .test-id-schedule-tab-content p, .test-id-schedule-tab-content h4{color: white !important;}
[class*="info-text-styles_info"] {color: white;}
.test-id-body{color: white !important;}
[class*="attendee-list-item_headline"], [class*="profile-header_profile-byline"], [class*="profile-header_about"], [class*="chat-conversation-preview-component_name"], [class*="chat-conversation-preview-component_date"], [class*="chat-conversation-preview-component_message"] {color:white;}
[class*="waiting-card_description"], [class*="waiting-page_time-until-event-starts"], [class*="waiting-page_message"] {color: white;}
.waiting-card_card__2J2RC h2, .waiting-card_hosted-by__2wssF h3, .waiting-card_hosted-by__2wssF p {color: white;}
.add-to-calendar-styles_service-link__3lD9E, [class*="add-to-calendar-styles_service-link"]{color: white;}
.device-selector_device-list__2tVnI select{color: white;}
.check-box_tick-box-text__1la-0, [class*="check-box_tick-box-text"]{color:white;}
.meeting-created-notification-styles_created-at__2Tyw9{color: white;}
.schedule-menu-styles_time-row__3OLh1 h3 {color: white;}
.hfPoTr {color: white;}
.sponsors_sponsor-header__urSPm {color: white !important;}
.layout_layout-container__1idYN label{color: white !important;}
.new-layout .card-content{color: white !important;}
.schedule-menu-styles_title__NbFAa, .schedule-menu-styles_live-badge__3vR34, .schedule-menu-styles_segment-type__26SBa, .schedule-menu-styles_description__364XM{color: white !important;}
.people_radio-button-group__XBhHu label{color: white;}
.radio-buttons__radio-button__label{color: white;}
.hpn-RadioButton__Label{color: white;}
.sc-kEjbxe, .sc-pFZIQ {color: white !important;}
.modal_modal-body__c1puk label {color: white !important;}
.waiting-page_container__aDkeC h1 {color: white;}

/*reception*/
.tab-panel-styles_tab-content__2e9pt h3, .tab-panel-styles_tab-content__2e9pt h4, .tab-panel-styles_tab-content__2e9pt .sc-hRxcUd p{color: white !important;}
.sc-ehsPLh .sc-pGacB {color: white;}
.sc-ehsPLh .sc-pGacB:hover {background-color: rgba(255, 255, 255, 0.2); color: white;}

/*more text*/
.user-profile-modal_privacy__1Oo_K a, #poll-is-section-specific {color: white !important;}
.hpn-FieldLabel legend, legend {color: white !important;}

/*Schedule a meeting modal*/
.hpn-TextField__Input {color: white; border: 1px solid rgba(255,255,255, 0.2);}
.css-1sz9hc1-control {color: white !important; background-color: black;}
.css-1sz9hc1-control div {color: white !important;}
.css-1siq1wa-menu{color: white !important;}

Don’t forget to click Save to apply the changes. 

Once the changes are saved, click on the Preview event button in the top right corner to preview your event to see how it will look with a Highlighted theme applied.

Dynamic class names

There are a few event areas and elements (e.g. Replay, Networking, etc.) that have dynamic class names. Because of that we are not able to provide event organizers with unified custom CSS codes that would work for every event for now. If you’re comfortable with using CSS you can go ahead and customize them for your event. Otherwise, feel free to reach out to support@hopin.com so we can help you with it.  

Hopin is always changing!

Please kindly note that Hopin platform is frequently updated so the suggested custom CSS codes may no longer work. We are doing our best to keep this guide updated. However, if after following all of the steps and applying this theme, you notice that some colors are not working, do not hesitate to reach out to us at support@hopin.com    

We recommend previewing the event once again at least 1 week before it starts. This leaves enough time to correct mistakes and to make any final changes, if needed.

You can also duplicate the event to make a test run and to check how the colors look in the targeted areas such as the highlighted scheduled segment, the "Happening Now" banner, or the activity panel. 

Other themes

If you're looking for something a little different than this, we recommend checking out our guides on Simple theme events and Highlighted theme events. 

Feel free to reach out to us at support@hopin.com in case you have a have a specific CSS request or need any assistance creating your event.