weather.com Dark Theme No Ads by spazmoose

/* ==UserStyle==
@name           weather.com Dark Theme No Ads
@namespace      userstyles.world/user/spazmoose
@version        20240826.17.52
@description    A dark theme for Weather.com that hides ads.
@author         spazmoose
@category       https://weather.com
==/UserStyle== */

@-moz-document url-prefix("https://weather.com/") {
    /* Remove Ads & Junk */
    iframe, cnx,
    .adLabel,
    #WX_WindowShade,
    [id^='WxuAd-contentTop'],
    aside [id^='WxuAd-sidebar'],
    .adWrapper,
    aside [id^='AnonymousNewsletter'],
    aside [id^='WxuPromoDriver'],
    main [id^='Taboola'],
    [data-testid='hourlyForecastUpsell'],
    [class^='HourlyForecast--adWrapper'],
    [class^='AccountLinks--accountButton'],
    [class^='VideoPlaylist--nativeAd'] {
        display: none !important;
    }
    
    /* Main Content Background*/
    div.appWrapper {
        background-image: linear-gradient(0deg,gray, darkgray 25%, darkgray 65%, dimgray 90%) !important;
    }
    
    /* Page Header */
    [role^="banner"] {
        background-color: #404040 !important;
    }
    
    [class*='MainMenuHeader--'][class*='wrapperLeft--'] a {
        background: #404040 !important;
    }
    
    [class*='MainMenuHeader--'] a {
        border-color: dimgray !important;
    }
    
    [role^='banner'] [class*='CountryList--DisclosureLink'] {
        background: dimgray !important;
    }
    
    [class^='SiteNavigationLinks--title'] {
        color: dimgray !important;
    }
    
    [class^='VideoWithPlaylist--'][class*='TabList--tabSelected'] {
        color: white;
        background: dimgray;
        border-color: dimgray !important;
    }
    
    [id^='WxuSavedLocations'] {
        background-color: #808080 !important;
    }

    [class^='TabList--tabSelected'] {
        color: dimgray;
    }
    
    [class^='ExpandableMenu'] {
        background-color: dimgray !important;
    }
    
    [class^='ExpandableMenu'] div,
    [class^='ExpandableMenu'] span,
    [class^='ExpandableMenu'] a,
    [class^='ExpandableMenu'] button {
        color: gainsboro;
    }
    
    [class*='Disclosure--SummaryIcon'] {
        fill: lightgray !important;
    }

    main [class*='Disclosure--SummaryIcon'] {
        fill: dimgray !important;
    }
        
    [class^='HourlyForecast--DisclosureList'] 
        > details 
        > summary [class*='Icon--icon'] {
        fill: dimgray !important;
    }
    
    /* Main Content*/
    [class^='Card-cardHeading'] {
        color: dimgray !important;
    }
    
    section {
        background: lightgray !important;
    }
    
        
    main div a[class^="ListItem--listItem"] {
        color: dimgray !important;
    }
    
    [class^='Button--primary'],
    footer a {
        background: dimgray !important;
        border-color: dimgray !important;;
    }
    
    [class*='fifteenMinuteSummary'] {
        background: gray;
    }
    
    /* Page Footer */
    [class^='Footer--container'],
    [class^='Footer--container'] div,
    [class^='Footer--container'] span,
    [class^='Footer--container'] a,
    [class^='Footer--container'] button {
        background: #202020 !important;
        color: dimgray !important;
    }
    
    [data-testid^='WeatherDetailsLabel'],
    [data-testid^='WeatherDetailsLabel'] svg,
    [data-testid^='WeatherDetailsLabel'] span,
    [class^='Button--default'],
    [class^='Button--default'] svg {
        color: dimgray !important;
        fill: dimgray !important;
    }
    
    [class*='detailsButton--'] {
        color: white !important;
        background-color: dimgray !important;
        border-color: dimgray !important;
    }
    
    [class*='Blur'] {
        filter: unset !important;
    }
    
    [class*='Icon--fullTheme'] {
        --color-moon: #FFFFCC;
        --color-star: #fdfd96;
        --color-cloud: white;
        --color-na: white;
        --color-fog: white;
        --color-hail: white;
        --color-tornado: white;
        --color-wind: white;
        --color-storm: white;
        --color-lightning: yellow;
        --color-sun: yellow;
        --color-drop: cornflowerblue;
        --color-snowflake: white;
        --color-thunderstorm-mask: #808080;
    }
    
    [class^='CalendarMonthPicker--forecastMonthlyNav'] {
        background-color: darkgray !important;
    }
    
    [class^='CalendarMonthPicker--forecastMonthlyNav'] svg,
    [class^='CalendarMonthPicker--forecastMonthlyNav'] span {
        color: dimgray !important;
        fill: dimgray !important;
    }
    
    [class^='LayerDetail--layersIconContainer'],
    [class*='Button--iconOnly--'] {
        background: lightgray !important;
        border: 1px solid dimgray;
    }

    [class^='LayerDetail--layerDetailImage--'] {
        border: 2px solid dimgray !important;
    }
    
    [class^='LayerDetail--layersIconContainer'] svg {
        fill: dimgray !important;
    }
    
    [data-testid^='TemperatureValue'] {
        color: dimgray !important;        
    }
    [data-testid^='unitSelectorSection'] {
        color: white;
        background: dimgray !important;
    }
}

@-moz-document url-prefix("https://weather.com/weather/radar") {
    .region-sidebar.regionSidebar {
        display: none !important;
    }
    
    .region-contentTop.regionContentTop {
        max-width: 100% !important;
    }
    
    [class^='Button--primary'],
    [class^='Button--primary'] svg {
        color: lightgray !important;
        fill: lightgray !important;
    }

}