Dark Mode

BigPanda's Dark Mode eases eye strain and sharpens display contrast with the help of Dark Reader.

📘

Disclaimer

Dark Mode is an optional capability and is not bundled with standard BigPanda deployment. It relies on a 3rd-party browser extension called Dark Reader, which has not been reviewed or approved for security or compliance by the BigPanda team. BigPanda is not responsible for any implications resulting from the use of Dark Reader.

To switch BigPanda into Dark Mode:

Refer to this screenshot as you follow the steps below.Refer to this screenshot as you follow the steps below.

Refer to this screenshot as you follow the steps below.

  1. Install the Chrome / Firefox ‘Dark Reader’ extension. You'll be automatically directed to Dark Reader Help, where you can learn more about Dark Reader features.
  2. After installation is complete, click the icon (it's in the top-right corner of your browser) to open the Dark Reader extension settings. This is the icon you will see when the Dark Reader is disabled.
  3. Click the Dev tools button and the Dark Reader Developer Tools popup opens. Copy this:
a.bigpanda.io
    
    CSS
    .bigpanda-logo {
    background-image: url(/static/img/bp_login_logo.svg) !important;
    }
    
    .integration-box img, .integration-icon {
    filter: brightness(0) invert(1);
    }
    
    .main-container .dialog-container .dialog-box {
        background-color: #f9f9f9 !important;
        border: 1px solid #ddd !important;
    }
    
    .login .main-container .dialog-container .dialog-box .title .bigpanda-text {
        color: #505050 !important;
    }
    
    .main-container .dialog-container .dialog-box .form .field-container .field-text {
        color: #505050 !important;
    }
    
    .login .main-container .dialog-container .dialog-box .form .field-container .sso-notice {
        color: #878787 !important;
    }
    
    .login .main-container .dialog-container .dialog-box .sign-up .txt {
        color: #878787 !important;
    }
    
    .main-container .dialog-container .dialog-box .button {
        background-color: #f0453b !important;
    }
    
    .main-container .dialog-container .dialog-box .button:hover {
        background-color: #f2584f !important;
    }
    
    .main-container .dialog-container .dialog-box .form .field-container .field {
        border: 1px solid #aeaeae !important;
        background-color: white !important;
        color: black !important;
    }
    
    .bp-icon-logo:before {
        color: black !important;
        border-radius: 50% !important;
        background-color: rgb(42, 48, 60) !important;
    }
    
    .search-area {
       box-shadow: rgb(98, 98, 98) 0px 0px 0px 1px;
    }
    
    .search-area button {
        box-shadow: rgb(98, 98, 98) 0px 0px 0px 1px;
    }
    
    .search-area:hover {
       box-shadow: rgb(16, 88, 126) 0px 0px 0px 1px;
    }
    
    .option:hover {
       background-color: #000000 !important;
    }
    
    .highlight {
       opacity: 0.1 !important;
    }
    
    #investigator .bp-awesomplete .wrapper .bp-awesomplete-input {
       background-color: white !important;
       color: black !important;
    }
    
    .bamboo .bp-incident-tile:hover {
        background: #2F3335 !important;
    }
    
    .environment-groups-container {
        border-top: 1px solid #43474f !important;
    }
    
    .environment-groups-container .filter-border {
        border-top: 1px solid #43474f !important;
        border-bottom: 1px solid #43474f !important;
    
    .pages ul.nav li a.selected {
        border-bottom: 1px solid #43474f !important;
    }
    
    .pages ul.nav li a {
        border-left: 1px solid #43474f !important;
        border-right: 1px solid #43474f !important;
        border-bottom: 1px solid #43474f !important;
    }
    
    .integrations bp-generic-list-item .item .center-content .left-side img.integration-icon {
       background-color: #43474f !important;
    }
    
    ================================
  1. Paste it at the top of the text area:
  1. Click Apply and close the window.
  2. Re-open BigPanda and click the to open the popup and switch the toggle to ON. The icon will now be .