I’m using Smugmug for the Gallery section of my website, as do many other photographers. The default colour of the Lightbox is determined by the colour that is set as the ‘Primary’ colour in the website theme section. However, I don’t like this as my main site has a light coloured theme but I wanted the lightbox dark (as I think photos are displayed better against a dark background). To achieve this means editing the CSS – either setting the ‘Primary’ colour as dark and adjusting CSS of multiple text and other elements or by setting a light ‘Primary’ colour and adjusting the Lightbox CSS… I decided to go for the latter.
However, there’s quite a few CSS elements that are involved in this and it’s not quite so straightforward as just adjusting a background colour. I’ve included the CSS I’ve used below in case it is helpful for anyone else trying to do the same – just copy this into the Custom CSS section of your theme.
I want to credit Mike Matenkowsky and the code he has on his photography website as he saved me a lot of work when I realised he had basically done the same thing already. Smugmug has updated some things since he produced this code however so Mike’s code no longer covers every required CSS element so if you are looking for a dark lightbox I would use this code below. Obviously if you want a lightbox of any other colour, the colour hex codes can be adjusted below.
/********* Dark Lightbox + Cart******************/
.sm-user-ui .sm-lightbox-v2 .sm-button-group .sm-button.sm-button-skin-submit,
.sm-user-ui .sm-lightbox-v2-navbar .sm-button.sm-button-skin-default.sm-button-nochrome[data-selected="true"] {cursor: default;}
.sm-user-ui .sm-tooltip-v2,
.sm-user-ui .sm-tooltip-v2::after {
font-family: 'Open Sans', Arial, sans-serif;
color: #0f0f0f;
background-color: #47474a;
border-color: #4f4f45;
}
/* Structure Background */
.sm-user-ui .sm-lightbox-v2,
.sm-user-ui .sm-lightbox-v2-navbar,
.sm-user-ui .sm-lightbox-v2-sidebar,
.sm-user-ui .sm-com-lb-list-item,
.sm-user-ui .sm-com-lb-image-list-item {background-color: #0f0f0f;}
.sm-user-ui .sm-com-lb-list-item:hover,
.sm-user-ui .sm-com-lb-image-list-item:hover,
.sm-user-ui .sm-com-lb-image-list-item:hover > .sm-com-lb-list-item {background-color: #1a1a1a;}
.sm-user-ui .sm-com-lb-sidebar-header-container:before,
.sm-user-ui .sm-com-lb-cart-summary:before{
background:transparent;
}
/* Structure Borders and Lines*/
.sm-user-ui .sm-com-lb-sku-total,
.sm-user-ui .sm-com-lb-sidebar-divider,
.sm-user-ui .sm-com-lb-sidebar-header,
.sm-user-ui .sm-com-lb-sidebar-content,
.sm-user-ui .sm-com-lb-cart-summary-list-item,
.sm-user-ui .sm-com-lb-confirmation-product,
.sm-user-ui .sm-com-lb-confirmation-quantity,
.sm-user-ui .sm-com-lb-sidebar-footer-container {border-color: #2e2e30;}
.sm-user-ui .sm-form-field-underline {border-bottom-color: #1f1f21;}
/* Text and Icons */
.sm-lightbox-v2-sidebar h1,
.sm-lightbox-v2-sidebar h2,
.sm-lightbox-v2-sidebar h3,
.sm-lightbox-v2-sidebar h4,
.sm-lightbox-v2-sidebar h5,
.sm-lightbox-v2-sidebar .sm-label,
.sm-lightbox-v2-sidebar .sm-emphasized,
.sm-lightbox-v2-sidebar .sm-form-field-select,
.sm-lightbox-v2-sidebar .sm-form-field-select-arrow,
.sm-lightbox-v2-sidebar .sm-ml-4,
.sm-lightbox-v2-sidebar .sm-image-metadata-caption,
.sm-lightbox-v2-sidebar .sm-imageinfo-container .sm-imageinfo-label,
.sm-lightbox-v2-sidebar .sm-com-lb-confirmation-quantity-label.sm-flex-justify-start,
.sm-lightbox-v2-sidebar .sm-com-lb-confirmation-product,
.sm-lightbox-v2-sidebar .sm-com-lb-sku-quantity-picker,
.sm-user-ui .sm-com-lb-more-info,
.sm-user-ui .sm-tabview [role="tab"]:hover,
.sm-user-ui .sm-com-lb-sku-total-label,
.sm-user-ui .sm-com-lb-confirmation-total-label,
.sm-user-ui .sm-com-lb-sku-quantity-picker .sm-currency-amount,
.sm-user-ui .sm-com-lb-confirmation-product-value,
.sm-user-ui .sm-com-lb-confirmation-quantity-count,
.sm-user-ui .sm-com-lb-confirmation-total-amount,
.sm-user-ui .sm-com-lb-confirmation-check-mark .sm-icon,
.sm-user-ui .sm-com-lb-cart-summary-count-total > div,
.sm-user-ui .sm-com-lb-cart-summary-count-total .sm-icon,
.sm-user-ui .sm-lightbox-v2 .sm-button.sm-button-skin-default.sm-button-nochrome:hover,
.sm-user-ui .sm-lightbox-v2-navbar .sm-button.sm-button-skin-default.sm-button-nochrome[data-selected="true"]{color:#ededf0;}
.sm-user-ui .sm-share-content,
.sm-user-ui .sm-com-lb-more-info-details p,
.sm-user-ui .sm-com-lb-more-info-details h4 {color: #87878c;}
.sm-user-ui .sm-com-lb-description,
.sm-user-ui .sm-com-lb-in-cart-indicator,
.sm-user-ui .sm-com-lb-flat-catalog-category-title {color: #6e6e73;}
.sm-user-ui .sm-com-lb-list-item,
.sm-user-ui .sm-com-lb-image-list-item {color: #bababd;}
/* Comment stars */
svg.sm-icon.sm-icon-StarOutlined.sm-icon-small {color: #ededf0}
.sm-user-ui .sm-comment-add-stars .sm-icon[data-active],
.sm-user-ui .sm-comment-add-stars .sm-icon:hover,
.sm-user-ui .sm-comment-add-stars .sm-icon:hover~.sm-icon {color: #ffea00;}
/* Navigation Buttons */
.sm-user-ui .sm-lightbox-v2 .sm-button.sm-button-skin-default,
.sm-user-ui .sm-lightbox-v2 .sm-button.sm-button-skin-default[disabled],
.sm-user-ui .sm-lightbox-v2 .sm-button.sm-button-skin-default[disabled]:hover,
.sm-user-ui .sm-lightbox-v2 .sm-button.sm-button-skin-default[disabled]:active {
color: #bababd;
border-color: #2e2e30;
background: #0f0f0f;
}
.sm-user-ui .sm-lightbox-v2 .sm-button.sm-button-skin-default:hover,
.sm-user-ui .sm-button-group .sm-button.sm-button-skin-submit,
.sm-user-ui .sm-button-group .sm-button.sm-button-skin-submit:hover,
.sm-user-ui .sm-lightbox-v2 .sm-button-group .sm-button.sm-button-skin-submit,
.sm-user-ui .sm-lightbox-v2 .sm-button-group .sm-button.sm-button-skin-submit:hover {
color: #ededf0;
border-color: #2e2e30;
background-color: #1a1a1a;
}
.sm-user-ui .sm-lightbox-v2 .sm-button.sm-button-skin-submit,
.sm-user-ui .sm-lightbox-v2 .sm-button.sm-button-skin-submit[disabled],
.sm-user-ui .sm-lightbox-v2 .sm-button.sm-button-skin-submit[disabled]:hover,
.sm-user-ui .sm-lightbox-v2 .sm-button.sm-button-skin-submit[disabled]:active {
color: #ededf0;
background-color: #2e2e30;
}
.sm-user-ui .sm-lightbox-v2 .sm-button.sm-button-skin-submit:hover {background-color: #404042;}
.sm-user-ui .sm-lightbox-v2 .sm-button.sm-button-skin-default.sm-button-nochrome,
.sm-user-ui .sm-lightbox-v2 .sm-button.sm-button-skin-default.sm-button-nochrome[disabled],
.sm-user-ui .sm-lightbox-v2 .sm-button.sm-button-skin-default.sm-button-nochrome[disabled]:hover,
.sm-user-ui .sm-lightbox-v2 .sm-button.sm-button-skin-default.sm-button-nochrome[disabled]:active {
color: #87878c;
background-color: transparent;
}
.sm-user-ui .sm-lightbox-v2 .sm-button.sm-button-skin-default.sm-button-nochrome:hover {color: #ededf0;}
.sm-user-ui .sm-form-field-spinner > input,
.sm-user-ui .sm-form-field-stepper > input {
background-color: #1f1f21;
color: #e3e3e6;
}
.sm-user-ui .sm-form-field-spinner,
.sm-user-ui .sm-form-field-stepper,
.sm-user-ui .sm-form-field-spinner > input,
.sm-user-ui .sm-form-field-stepper > input {border-color: #262629;}
/* Photo Sharing Panel */
.sm-user-ui .sm-tab-label,
.sm-user-ui .sm-tab-label:visited,
.sm-user-ui .sm-tabview [role="tab"],
.sm-user-ui .sm-tabview [role="tab"]:visited,
.sm-user-ui .sm-tabs-vertical,
.sm-user-ui .sm-tabview[data-orientation="vertical"] [role="tablist"] {
color: #87878c;
background-color: #1a1a1a;
}
.sm-user-ui .sm-tab-selected > .sm-tab-label,
.sm-user-ui .sm-tab-selected > .sm-tab-label:hover,
.sm-user-ui .yui3-tab-selected > .sm-tab-label,
.sm-user-ui .yui3-tab-selected > .sm-tab-label:hover,
.sm-user-ui .sm-tabview [role="tab"][aria-selected="true"],
.sm-user-ui .sm-tabview [role="tab"][aria-selected="true"]:hover {
color: #ededf0;
background-color: #0f0f0f;
cursor: default;
}
.sm-user-ui .sm-form-field-textarea,
.sm-user-ui .sm-form-field-text-input,
.sm-user-ui .sm-comment-list .sm-comment-listitem {
color: #ededf0;
background-color: #1a1a1a;
border-color: #262629;
}
.sm-user-ui .sm-form-field-textarea:focus,
.sm-user-ui .sm-form-field-text-input:focus {
background-color: #262629;
border-color: #262629;
}
.sm-user-ui .sm-form-field-radio-item .sm-form-field-radio-icon-container,
.sm-user-ui .sm-form-field-checkbox-item .sm-form-field-checkbox-icon-container {
background-color: #1f1f21;
border-color: #404042;
}
.sm-user-ui .sm-form-field-radio-item:hover .sm-form-field-radio-icon-container,
.sm-user-ui .sm-form-field-checkbox-item:hover .sm-form-field-checkbox-icon-container {
background-color: #262629;
border-color: #47474a;
}
.sm-user-ui .sm-form-field-radio-item[disabled] .sm-form-field-radio-icon-container,
.sm-user-ui .sm-form-field-checkbox-item[disabled] .sm-form-field-checkbox-icon-container {background-color:#1a1a1a;}
.sm-user-ui .sm-form-field-select-option {background-color: #1a1a1a;}
/* Sidebar Tool Popup */
.sm-user-ui .sm-component-menu,
.sm-user-ui .sm-component-menu-item,
.sm-user-ui .sm-component-menu-item-link,
.sm-user-ui .sm-component-menu-item-link:visited {color: #87878c;}
.sm-user-ui .sm-component-menu {background-color: #1a1a1a;}
.sm-user-ui .sm-component-menu-item:focus,
.sm-user-ui .sm-component-menu-item:hover,
.sm-user-ui .sm-component-menu-item:focus > .sm-component-menu-item-link,
.sm-user-ui .sm-component-menu-item:hover > .sm-component-menu-item-link,
{color:#ededf0;}
.sm-user-ui .sm-component-menu,
.sm-user-ui .sm-component-menu-item,
.sm-user-ui .sm-component-menu-heading {border-color: #1f1f21;}
.sm-user-ui .sm-component-menu-item:hover:not([aria-disabled="true"]) {background:#1f1f21;}
/*Optional - removes attribution if image is 'Collected' from another gallery */
p.sm-image-metadata-attribution{display:none}
/* End Lightbox Code */
