Custom theming harder since Grafana 10

[spaceone]

Hello,

in Grafana 8 it was easily possible to customize the theme by adding a custom CSS.
For example the login background could be set via:

div.login-content-box {                                                                                                                                                                                                                        
        background-color: #1e1e1d;                                                                                                                                                                                                             
}                                                                                                                                                                                                                                              
                                                                                                                                                                                                                                               
div.login-content-box button {                                                                                                                                                                                                                 
        background-color: #5e881d;                                                                                                                                                                                                             
}   

Now there is a purple background on a div-container which has a probably random autocreated identifier, which will probably change in the future:

div.css-17taakh::before {                                                                                                                                                                                                                      
    background: none;                                                                                                                                                                                                                          
    opacity: 0;                                                                                                                                                                                                                                
}  

Also the grafana logo is now somewhere in the dom via an image:

<img class="css-1m01c8l" src="public/img/grafana_icon.svg" alt="Grafana">

while prior it was at least easily underneath of a sidemenu class selector:

nav.sidemenu ul[data-testid="navbar-section"]:first-of-type img:first-of-type {                                                                                                                                                                
    background-image: url(/dashboard.svg); 
}

now:

#reactRoot > div.grafana-app > main > div.css-11s8juy > div.css-15okvyg > div:nth-child(1) > a > img

The user avatar / profile image:
Prior: a[href="/ucs-dashboard/profile"] img
Now: #reactRoot > div.grafana-app > main > div.css-11s8juy > div.css-15okvyg > div.css-68hv8y > button.css-ldaruv-toolbar-button > img

[visalnaqvi]

Hi @spaceone , i am trying to change the size of the logo image how can i apply some custom styling to the class css-1m01c8l i can see from dev tool that this class is assigned to the logo img on top left corner, as you have mentioned that this is on dom
#reactRoot > div.grafana-app > main > div.css-11s8juy > div.css-15okvyg > div:nth-child(1) > a > img but where can i define the styling for this.

[joshhunt]

Hey @spaceone @visalnaqvi - sorry for the late reply, but I just spotted this after it fell through the cracks. Grafana does not support custom themes. Our CSS and DOM structure is not a supported API contract, so relying on it to hack in custom themes will always break. This path will be filled only with disappointment.

We're aware of requests for custom themes, but it's a significant undertaking, and not something we're prioritising soon.

Essentially, this is a dupe of #10495.

[oori]

@joshhunt Doesn't Emotion assist us with themes "out of the box" using ThemeProvider ? (for all components that have been migrated)