Dark

<header class="iop-header">
    <div class="container">
        <div class="iop-header__inner">
            <span role="button" tabindex="0" aria-pressed="false" class="iop-header__explore-button" data-toggle="other-sites" data-toggle-scroll="disable" data-toggle-remove="profile">
        Explore
      </span>
            <span role="button" tabindex="0" aria-pressed="false" class="iop-header__menu-button" data-toggle="nav" data-toggle-scroll="disable" data-toggle-remove="other-sites,profile">
        Menu
      </span>
            <span role="button" tabindex="0" aria-pressed="false" class="iop-header__close-button" data-toggle-scroll="enable" data-toggle-remove="nav,other-sites,profile">
        Close
      </span>
            <a class="iop-header__logo" href="#0">
        IOP | Institute of Physics
      </a>
            <div class="iop-header__nav">
                <nav class="iop-link-list iop-link-list--staggered iop-nav" data-toggle-target="nav" data-expandable-nav>
                    <ul>
                        <li>
                            <a href="#0">About</a>
                            <ul class="iop-link-list__sublist">
                                <li>
                                    <a href="#0">Publications</a>
                                </li>
                                <li>
                                    <a href="#0">Education</a>
                                </li>
                                <li>
                                    <a href="#0">Activities</a>
                                </li>

                        </li>
                        </ul>
                        </li>
                        <li>
                            <a href="#0">Resources</a>
                        </li>
                        <li>
                            <a href="#0">Visit</a>
                        </li>
                        <li>
                            <a href="#0">Contact</a>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class="iop-header__actions">
                <a href="#0" class="iop-avatar iop-header__user-button" data-toggle="profile" data-toggle-remove="nav,other-sites" data-toggle-scroll="disable" style="background-image: url(https://ca.slack-edge.com/T0347CC9W-U715K3AKX-10679806659f-48)">
          
          
        </a>
            </div>
        </div>
    </div>

    <div class="iop-tray iop-tray--other-sites" data-toggle-target="other-sites">
        <div class="iop-tray__screen" role="button" tabindex="0" aria-pressed="false" data-toggle="other-sites" data-toggle-scroll="enable"></div>
        <div class="iop-tray__inner context-dark">
            <span role="button" tabindex="0" aria-pressed="false" class="iop-tray__close-button" data-toggle-scroll="enable" data-toggle-remove="other-sites">
        Close
      </span>
            <div class="iop-tray__container">
                <nav class="iop-other-sites iop-link-list" data-toggle-target="other-sites">
                    <h4 class="iop-other-sites__title iop-text-muted">Explore</h4>
                    <ul>
                        <li>
                            <a href="#0">Website 1</a>
                        </li>
                        <li>
                            <a href="#0">Website 2</a>
                        </li>
                        <li>
                            <a href="#0">Website 3</a>
                        </li>
                        <li>
                            <a href="#0">Website 4</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>

    <div class="iop-tray iop-tray--profile" data-toggle-target="profile">
        <div class="iop-tray__screen" role="button" tabindex="0" aria-pressed="false" data-toggle="profile" data-toggle-scroll="enable"></div>
        <div class="iop-tray__inner context-light">
            <div class="iop-tray__container">
                <div class="iop-profile-nav">
                    <div class="iop-profile-nav__header">
                        <p class="h3 margin-reset">
                            <span class="iop-text-sm iop-text-accent">Welcome,</span>
                            <br> Robin Ince
                        </p>
                        <span class="iop-avatar iop-profile-nav__avatar" style="background-image: url(https://ca.slack-edge.com/T0347CC9W-U715K3AKX-10679806659f-48)">
              
              
            </span>
                    </div>

                    <nav class="iop-link-list iop-profile-nav__list" data-toggle-target="profile">
                        <ul>
                            <li class="is-active">
                                <a href="#0">For you</a>
                            </li>
                            <li>
                                <a href="#0">Account</a>
                            </li>
                        </ul>
                    </nav>

                    <p class="h4 iop-text-accent">
                        <a href="#0">Logout</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</header>