Mastodon: Theme Engine

[mikebabb]

Would it be possible to add colour theming options to the user preferences menu?

(I'm raising this issue as requested by @ashfurrow in this thread: https://mastodon.technology/@ashfurrow/293424)

[ashfurrow]

I'd be interested in helping with this, either spec'ing out or implementing.

[wxcafe]

Let's make this issue the discussion about having a theme system in mastodon, I believe this would be great if possibly a bit complicated

[pahakalle]

Would be nice to have a simple way to change lets say login page color and what not, but also a place to add custom css in the admin settings.

[wxcafe]

There is a way to add custom CSS, but it's not in the UI: https://github.com/tootsuite/mastodon/pull/1368

[spacewasabi]

There is this cool chrome-extension called Stylus / StylishThemes that allow people to apply custom CSS to websites (like Twitter's web Client, Facebook, Stack Overflow, GitHub...) for example take a look at that : https://github.com/StylishThemes/GitHub-Dark

Is that what you where talking about @wxcafe ?

[wxcafe]

No. I'm talking about a way for an admin to set a default theme for an instance. See the PR referenced in my previous comment

[spacewasabi]

Oh, I see, my bad, should have opened it before assuming things.

[wxcafe]

No problem, don't worry

[mjankowski]

Sort of related to this, and a bunch of the other theme-related requests ... it would be a good first step towards any sort of theming improvement for someone to give a once-over to the scss files and replace the collection of $colorX (1-8) variables with more meaningful names ... because it will be sort of maddening to produce themes (assuming we just mean "a new option for a color scheme", and not a larger-scale html/css replacement) based on just those variable names.

[ashfurrow]

I can take a look at that unless someone beats me to it.

[Kimau]

It would be super handy as a starting point to make sure more elements have css classes so custom style sheets are easier to write.

I had to go pretty broad for example for a recent style hack to work because buttons, name ect... dont have css class. Only the content box. See example below.

Example: Compact Toots Style

`
.status > div {
max-height: 0;
font-size: 0.8rem;
transition: max-height 200ms;
overflow: hidden;
}

.status div.status__content {
max-height: 60px;
font-size: 0.8rem;
transition: max-height 200ms;
}

.status:hover > div { max-height: 20px; }
.status:hover div.status__content { max-height: 500px; }
`

[Kozlika]

Hello (I will try in english but I'm French; hope I can explain…)
My purpose is about instance's design only, as a first step (user's customization could be to be abble to chose one or another ready theme offers by the instance's admin)

A part of the problem to customize an instance's theme is that there is too few variables, not enough targeted. It would be great to:

• at least separate background-color variables, border-color variables, color variables, icons color, links color…;
• avoid to directly use lighten/darken functions in partials files (i.e. if your $color1 is white, lighten($color1, 8%) is just… white);
• using variables for font-size: I mean I would like to use rem/em instead of px and can't actually do that the right way, otherwise updates with mastodon master are very complicated.
• grouping layout rules together in components (or in a separate partial)

For now, I've a custom.scss in use for my instance but I had to rewrite a lot of rules and updates give me headaches :) https://github.com/Kozlika/cafe.des-blogueurs.org_skin

[jpdevries]

I think this is basically done in https://github.com/tootsuite/mastodon/pull/1587

but, it still needs some work. I abstracted all the Sass variables to CSS Properties but there are places where we do things like darken($color1, 10%) and I think we need to come up with some semantic names for those colors too.

Also needs to be hooked up to PostCSS in the build process for graceful fallbacks for older browsers.

[wxcafe]

Well I'm pretty sure this is now done so I'm closing this issue