Skip to content

Instantly share code, notes, and snippets.

@Firepup6500
Last active May 14, 2024 03:24
Show Gist options
  • Save Firepup6500/118489a6574174e371cdbef5c197e95c to your computer and use it in GitHub Desktop.
Save Firepup6500/118489a6574174e371cdbef5c197e95c to your computer and use it in GitHub Desktop.
Canvas dark mode stylesheet

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

: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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment