Canvas dark mode stylesheet

README.md

This isn't useful on it's own, combine with some style/css applier, or a canvas bug to see it.

dark.css

:root {
    --ic-brand-color-dark: #111;
    --ic-brand-color-dark-lighter: #222;
    --ic-brand-color-dark-lightest: #444;
    --ic-brand-font-color-dark-darker: #999;
    --ic-brand-font-color-dark: #ccc;
    --ic-brand-font-color-dark-lighter: #eee;
    --ic-brand-font-color-dark-lightest: #fff;
    --ic-brand-primary: #046;
    --ic-brand-primary-lighter: #079;
    --ic-brand-primary-lightest: #0ac;
    --ic-brand-points-color: #0f0;
    --ic-brand-success-color: #070;
    --ic-brand-success-color-lighter: #090;
    --ic-link-color: #07f;
    --ic-link-color-dark: #05f;
    --ic-brand-button--primary-bgd: var(--ic-brand-primary);
    --ic-brand-button--primary-text:#ffffff;
    --ic-brand-button--secondary-bgd: #2D3B45;
    --ic-brand-button--secondary-text: #ffffff;
    --ic-brand-global-nav-bgd: var(--ic-brand-primary);
    --ic-brand-global-nav-bgd-lighter: var(--ic-brand-primary-lighter);
    --ic-brand-global-nav-bgd-lightest: var(--ic-brand-primary-lightest);
    --ic-brand-global-nav-ic-icon-svg-fill: var(--ic-brand-primary-lighter);
    --ic-brand-global-nav-ic-icon-svg-fill--active: var(--ic-brand-primary-lightest);
    --ic-brand-global-nav-menu-item__text-color: #ffffff;
    --ic-brand-global-nav-menu-item__text-color--active: var(--ic-link-color);
    --ic-brand-global-nav-avatar-border: #ffffff;
    --ic-brand-global-nav-menu-item__badge-bgd:#ffffff;
    --ic-brand-global-nav-menu-item__badge-bgd--active: var(--ic-brand-primary);
    --ic-brand-global-nav-menu-item___badge-text: #000000;
    --ic-brand-global-nav-menu-item__badge-text--active: #ffffff;
    --ic-brand-global-nav-logo-bgd: #ffffff;
}

body, .discussion_entry, .toolbarView .header Bar, .discussion-reply-box, #breadcrumbs, .toolbarView .headerBar,
.module-sequence-footer .module-sequence-footer-content,
[data-testid="desktop-message-action-header"] > div > div  {
    background-color: var(--ic-brand-color-dark);
}

.alert-info {
    background-color: var(--ic-brand-primary);
    color: var(--ic-brand-font-color-dark);
}

.discussion-pubdate, .discussion-tododate, #TextInput_0:-webkit-any(input)[type] {
    color: var(--ic-brand-font-color-dark);
}

.discussion-points {
    color: var(--ic-brand-points-color);
}

#search_entries_container label span, .btn, .Button, .ui-button, .showMore.loadNext, .al-options, .navigation-tray-container,  .navigation-tray-container div{
    background-color: var(--ic-brand-color-dark-lighter);
    color: var(--ic-brand-font-color-dark);
}

.btn:hover, .Button:hover, .ui-button:hover, .btn:hover.ui-state-hover,
.Button:hover.ui-state-hover, .ui-button:hover.ui-state-hover,
.new-and-total-badge .total-items, .btn:focus, .Button:focus, .ui-button:focus {
    background-color: var(--ic-brand-color-dark-lightest);
    color: var(--ic-brand-font-color-dark-lighter);
}

.discussion-reply-box:hover, .discussion-reply-box:focus, .discussion-reply-action:hover,
.discussion-reply-action:focus, .discussion-rate-action:hover, .discussion-rate-action:focus {
    color: var(--ic-brand-font-color-dark-lightest);
}

.btn-success, .Button--success{
    background-color: var(--ic-brand-success-color);
}

.btn-success:hover, .Button--success:hover {
    background-color: var(--ic-brand-success-color-lighter)
}

.list-view a.active {
    color: var(--ic-brand-font-color-dark-darker);
    border-left: 2px solid var(--ic-brand-font-color-dark-darker);
}

.standalone-icon:before {
    color: var(--ic-brand-font-color-dark-darker);
}

.navigation-tray-container a:-webkit-any(a) {
    color: var(--ic-link-color);
}

a:focus, a:hover, .navigation-tray-container a:-webkit-any(a):focus, .navigation-tray-container a:-webkit-any(a):hover {
    color: var(--ic-link-color-dark);
}

.ic-app-header__menu-list-item.ic-app-header__menu-list-item--active .ic-app-header__menu-list-link {
    background-color: var(--ic-brand-global-nav-bgd-lighter);
}