Allow custom css at runtime

[Fajfa]

First iteration:

• BE Generates css which we always include in the head
• FE Textarea in Admin/UI
• Add ids to base divs for each web app to allow app-specific selectors

SCSS support should be added if needed and in next versions

[skamensky]

What about custom js?

There's a hack that can be used as a workaround but it'd be really cool to see official support for this!

[Fajfa]

Feel free to create a new issue, but it's not really planned at the moment

[skamensky]

There's already an older discussion open for it (which is where you're directed to when you click on "Ideas, enhancements and feature requests 🚀")

Should I turn this into an isssue instead?

[Fajfa]

Feel free, mark it as an enhancement please

[skamensky]

I don't have permisssions to add labels, but feel free to :-)

#1226

[KinyaElGrande]

The PR for enabling Custom CSS at runtime has been merged (ref: #1262).
For those looking to create a dark theme, here's an example of CSS configurations that can be utilized (still hacky):

:root {
    --body-bg: #092B40;
    --body-color: #FFFFFF;
    --white:         #FAF6F3;
    --black:         #0B344E;
    --primary:       #FF9661;
    --secondary:     #23495F;
    --success:       #43AA8B;
    --warning:       #E2A046;
    --danger:        #E54122;
    --light:         #567F92;
    --extra-light:   #162425;
    --dark:          #0B344E;
}

:root .btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
}

:root .bg-white {
    background-color: var(--black) !important;
}

:root .bg-light {
    background-color: var(--light) !important;
}

:root body {
    color: var(--body-color);
    background-color: var(--body-bg);
}

:root .text-dark {
    color: var(--white) !important;
}

:root .header-navigation {
    background-color: var(--black) !important;
}

:root .card {
    background-color: var(--dark);
}

:root .card-header {
    border-bottom: 1px solid #284C63;
}

:root .btn-link {
    color: var(--white);
}

Feel free to explore and experiment with different CSS properties and values to achieve your desired theme.

To target a specific webapp, you can utilize the following ID selectors:

• #admin for the Admin web app
• #compose for the Compose web app
• #discovery for the Discovery web app
• #one for the One web app
• #privacy for the Privacy web app
• #reporter for the Reporter web app
• #workflow for the Workflow web app