Google Analytics Color Fixer

google.analytics.color.fixer.user.css

/* ==UserStyle==
@name           Google Analytics color fixer
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Swaps the default blue-based palette with a proper one. Thanks to https://learnui.design/tools/data-color-picker.html for the idea & color selection
@author         You
@updateURL      https://gist.githubusercontent.com/bre7/a0fb9886e8b4251cc1f69274fd0af96f/raw/google.analytics.color.fixer.user.css
@preprocessor   stylus
==/UserStyle== */

@-moz-document regexp("https:\\/\\/analytics.google.com\\/analytics\\/web\\/.+embed\\/report-home\\/.+\\/"), url-prefix("https://analytics.google.com/analytics/web/")

    colors = (#003f5c #2f4b7c #665191 #a05195 #d45087 #f95d6a #ff7c43 #ffa600)
    
    bar-chart rect.bar
        fill: colors[0] !important;
    
    .ga-card-list-container .realtime
        background-color: colors[3] !important
        .ga-data-table .ga-viz-table-row-background
            fill: colors[3] !important

    for i in range(0,(length(colors) - 1))
        posFromStart = colors[i]
        //posFromEnd = colors[(length(colors)-(i+1))]
        
        stacked-bar-chart > svg g.layer:nth-child({i+1})
            fill: posFromStart !important
        ga-tabbed-chart .metric-table-container:nth-child({i+1}) div.frequency.ng-scope.layout-row > div
            background-color: posFromStart !important
        
        pie-chart > svg > g.pie > path:nth-child({i+1})
            fill: posFromStart !important
        
        ga-time-of-day-chart
            .legend-block.blue-{i+1}
                fill: posFromStart !important
            .blue-{i+1} rect
                fill: posFromStart !important
        
        ga-d3-cohort-table .blue-{i+1} rect
            fill: posFromStart !important
        
        line-chart > svg > g.chart-root > g.chart-group > path:nth-child({i+1})
            stroke: posFromStart !important