How to change your site to dark mode

Want your Bamboo Site to be black with text? This is the article for you.

To change you site to dark mode, with black background, simply copy this css documentation as is and copy it to your Bamboo account under-> Website -> Branding -> Custom CSS

body[data-route="root.gallery.home"], body[data-route="root.gallery.play"], body[data-route="root.gallery.view"], body[data-route="root.home"], body[data-route="root.gallery.playentry"] {
background-color: #000000 !important;
}
.category-label {
color: #FFFFFF;
}
#home-carousel .caption .title, .home-carousel .caption .title {
color:  #FFFFFF;
}
Video description
#home-carousel .caption .description, .home-carousel .caption .description {
color:  #FFFFFF;
}
#home-carousel .caption .title, .home-carousel .caption .title {
color:  #FFFFFF;
}
#gallery-page .category-header {
color:  #FFFFFF;
text-shadow: 2px 2px black;
}
#gallery-page .category-description {
color:  #FFFFFF;
text-shadow: 2px 2px black;
}
.mobile .navbar-nav>li>a {
color: #000000 !important;;
}
.lower-caption .item-name h4 {
color: white;
}
.entry-name {
color: #FFFFFF;
}
.entry-metadata {
color: white;
}
.related-video-header{
color:white !important;
}
.lower-caption .item-short-sum {
color: #FFFFFF;
}
.relatedVideoSection > h4 {
color: white !important;
}
.related-streams-header {
color: white !important;
}
.entry-metadata .play-page-category-icon-text {
background-color: transparent !important;
}
.play-page-category-icon-text > a > span{
color:white;
}
#header .navbar [common-header-navigation]>ul>li>a:not(.instance-info) {
font-size: small;
}

Bamboo Pro Tip: If you want to add some custom colors to your site that match you brand, try changing some of the place it says "white" or #FFFFFF (which it also white), to your brand's color.

It's important to use hex colors, you can find some here- https://www.color-hex.com/

For additional help contact our support team at support@bamboo-cloud.com