Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
:root {
--fandom-link-color--fadeout: rgba(var(--theme-link-color--rgb), .15) !important;
--fandom-text-color: var(--theme-page-text-color) !important;
--fandom-text-color--rgb: var(--theme-page-text-color--rgb) !important;
--fandom-text-color--hover: var(--theme-page-text-color--hover) !important;
--fandom-link-color: var(--theme-link-color) !important;
--fandom-link-color--hover: var(--theme-link-color--hover) !important;
--fandom-link-color--rgb: var(--theme-link-color--rgb) !important;
--fandom-accent-color: var(--theme-accent-color) !important;
--fandom-accent-color--hover: var(--theme-accent-color--hover) !important;
--fandom-accent-label-color: var(--theme-accent-label-color) !important;
--fandom-accent-color--secondary: var(--theme-page-text-color)!important;
--fandom-border-color: var(--theme-border-color) !important;
--fandom-border-color--secondary: var(--theme-page-text-mix-color)!important;
--fandom-dropdown-background-color: var(--theme-page-background-color--secondary) !important;
--fandom-notifications-background-color: var(--theme-page-background-color--secondary) !important;
--fandom-notifications-read-card-background-color: var(--theme-page-background-color--secondary) !important;
--fandom-notifications-unread-card-background-color: var(--theme-page-background-color--secondary) !important;
--fandom-notifications-footer-text-color: var(--theme-page-text-color) !important;
--fandom-banner-notification-background-color: var(--theme-page-background-color) !important;
--fandom-banner-notifications-close-icon: var(--theme-page-text-color) !important;
--fandom-global-nav-background-color: var(--theme-page-background-color) !important;
--fandom-global-nav-background-secondary-color: var(--theme-page-background-color--secondary)!important;
--fandom-global-nav-border-color: var(--theme-border-color)!important;
--fandom-global-nav-text-color: var(--theme-page-text-color) !important;
--fandom-global-nav-link-color: var(--theme-link-color) !important;
--fandom-global-nav-link-color--hover: var(--theme-link-color--hover) !important;
--fandom-global-nav-icon-color: var(--theme-page-text-color) !important;
--fandom-global-nav-icon-background-color: var(--theme-page-background-color--secondary) !important;
--fandom-global-nav-icon-background-color--hover: rgba(var(--theme-link-color--rgb), .15) !important;
--fandom-global-nav-icon-background-color--active: rgba(var(--theme-link-color--rgb), .15) !important;
--fandom-global-nav-icon-border-color: var(--theme-page-text-color) !important;
--fandom-global-nav-icon-border-color--hover: var(--theme-page-text-color) !important;
--fandom-global-nav-icon-border-color--active: var(--theme-page-text-color) !important;
--fandom-global-nav-bottom-icon-color: var(--theme-page-text-color) !important;
--fandom-global-nav-counter-background-color: var(--theme-page-text-color) !important;
--fandom-global-nav-counter-label-color: var(--theme-page-background-color) !important;
--fandom-global-nav-search-active-link-background-color: var(--theme-page-background-color--secondary) !important;
--fandom-global-nav-search-active-link-border-color: var(--theme-border-color) !important;
--fandom-global-nav-avatar-border-color: var(--theme-page-text-color)!important;
--fandom-global-nav-avatar-border-color--hover: var(--theme-link-color)!important;
--fandom-global-nav-avatar-border-color--active: var(--theme-link-color--hover)!important;
--fandom-secondary-color: var(--theme-page-background-color)!important;
--fandom-secondary-color--hover: rgba(var(--theme-page-dynamic-color-1--rgb), .07)!important;
--fandom-secondary-button-color: var(--theme-page-text-color)!important;
--fandom-text-color--secondary: var(--fandom-text-color)!important;
--fandom-primary-color: var(--fandom-secondary-color)!important;
--fandom-heading-color: var(--theme-page-text-color)!important;
--fandom-image-empty-state-color: rgba(var(--theme-page-background-color--secondary--rgb), .5)!important;
--fandom-search-background-color: var(--theme-page-background-color)!important;
--fandom-search-options-list: var(--theme-page-background-color--secondary)!important;
--fandom-search-option: var(--fandom-link-color--fadeout)!important;
--fandom-search-border-color: var(--theme-border-color)!important;
--fandom-search-color: var(--fandom-global-nav-text-color)!important;
--fandom-primary-background-color: var(--theme-page-background-color)!important;
--fandom-global-nav-panel-background-color: var(--theme-page-background-color--secondary)!important;
--fandom-global-nav-panel-scrollbar-color: var(--theme-border-color) !important;
--fandom-secondary-reverse-color: var(--theme-page-text-color) !important;
--fandom-content-overlay-color: rgba(var(--theme-page-background-color--secondary--rgb), 0.8) !important;
--fandom-secondary-button-color--hover: var(--theme-page-text-color--hover) !important;
--fandom-text-color--secondary--hover: var(--theme-page-text-color--hover) !important;
--fandom-border-color--light: var(--theme-page-text-mix-color) !important;
--fandom-image-empty-state-color--secondary: rgba(var(--theme-page-background-color--secondary--rgb), 0.3) !important;
--fandom-widget-primary-background-color: var(--theme-page-background-color) !important;
--fandom-widget-arrow-background-color: var(--theme-page-background-color) !important;
}
[data-theme="dark"] {
--fandom-global-nav-panel-background-color: color-mix(in srgb, var(--theme-page-background-color), var(--theme-page-background-color--secondary))!important;
}
/* NOTIFICATIONS */
[class^="NotificationsContent-module_contentHeader"] {
border-bottom: none !important;
}
[class^="NotificationCard-module_card"] {
transition: .3s;
}
[class^="NotificationCard-module_card"]:hover {
box-shadow: none !important;
background-color: rgba(var(--theme-link-color--rgb), .15) !important;
}
[class^="NotificationsContent-module_scrollableListWrapper"] > ul:before {
display: none !important;
}
[class^="NotificationCard-module_avatarIcon"] {
background: var(--theme-page-background-color) !important;
}
.notifications .wds-tabs__tab-label {
text-transform: uppercase;
font-weight: bold;
font-size: 12px !important;
height: 36px;
}
.notifications .wds-tabs__tab.wds-is-current {
box-shadow: none;
}
.notifications .wds-tabs__tab-label {
padding: 0 20px;
border-radius: 50px;
transition: .3s;
}
.notifications .wds-tabs__tab-label:hover,
.notifications .wds-is-current .wds-tabs__tab-label {
color: var(--theme-link-color) !important;
background: rgba(var(--theme-link-color--rgb), .15) !important;
}
.notifications .wds-tabs {
padding-bottom: .5em;
}
.global-footer {
background: rgba(var(--theme-page-background-color--rgb), 0.9);
}
.global-footer h3 {
color: var(--theme-page-text-color) !important;
}
.global-footer a {
color: var(--theme-link-color) !important;
font-weight: bold;
}
.global-footer__link svg {
color: var(--theme-page-text-color) !important;
}
.global-footer__bottom {
background: none;
}
.global-footer__section-fandom-apps {
color: var(--theme-page-text-color);
}
.global-footer__bottom div:first-of-type {
color: var(--theme-page-text-color);
font-weight: bold;
border-bottom: 2px solid var(--theme-page-text-color);
}
.global-footer__bottom {
background: none !important;
}
/* New nav */
.search-app__input:focus,
.search-app__input:hover,
.search-app__suggestions-box,
.search-app__input--focused {
border: 1px solid var(--fandom-search-border-color);
}
.search-app__suggestions-box {
padding: 12px;
}
.search-app__suggestions-list {
gap: 0;
}
.search-app__suggestion {
padding: 0
}
.search-app__suggestion-link {
padding: 6px 9px;
line-height: 1.5;
}
.search-app__suggestion-skeleton:not(:last-child) {
margin-bottom: 6px;
}
.search-app__suggestion-link:focus,
.search-app__suggestion:hover .search-app__suggestion-link,
.search-app__suggestion-link:hover {
color: var(--fandom-link-color);
text-decoration: none;
}
.search-app__suggestion:hover {
text-decoration: none;
}
.search-app.search--with-community-colors .search-app__button-remove-option svg {
stroke: var(--fandom-communitybar-search-color);
fill: var(--fandom-communitybar-search-color);
}
.wds-pill-button--secondary {
--pill-secondary-bg-color: var(--fandom-primary-background-color);
}
.global-explore-navigation {
--fandom-explore-nav-label-color: var(--theme-page-text-color);
--fandom-explore-icon-color: var(--theme-page-text-color);
--fandom-explore-icon-color--hover: var(--theme-page-text-color--hover);
}
.global-explore-navigation__item.wds-is-active .global-explore-navigation__label, .global-explore-navigation__panel-item.wds-is-active .global-explore-navigation__label {
color: var(--fandom-explore-nav-label-color)
}
.wds-cards {
--card-background-label-color: var(--theme-page-background-color);
--card-heading-color: var(--theme-page-text-color);
--card-subtitle-color: var(--theme-page-text-mix-color);
--card-thumbnail-color: var(--theme-page-background-color--secondary);
--card-bodytext-color:var(--theme-page-text-color);
--card-label-color: var(--theme-page-text-color);
--card-icon-fill-color: var(--theme-page-text-color);
--card-background-color: var(--theme-page-background-color)!important;
--card-background-color--hover: rgba(var(--theme-border-color--rgb),.5)!important;
--card-progress-bar-container-color: var(--theme-page-background-color--secondary)!important;
}
#wds-brand-fandom-logomark [fill="#FA005A"],#reuse-18[fill="#FA005A"],#wds-brand-fandom-logo [fill="#FA005A"] {
fill: var(--theme-accent-color)
}
#wds-brand-fandom-logomark [fill="#FFC500"],#reuse-19[fill="#FFC500"],#wds-brand-fandom-logo [fill="#FFC500"] {
fill: var(--theme-page-background-color);
}
#wds-brand-fandom-logo [fill="#520044"],#wds-brand-fandom-logo-light [fill="#F9EDD8"] {
fill: var(--theme-page-text-color)
}
.community-navigation__fandom-heart {
background-color: var(--theme-page-background-color);
}