Hello everyone,

I managed to make some minor changes to Lemmy’s default CSS Theme and uploaded that as a new theme which I set as the default for my instance.

I’m looking forward to making much larger changes, but I wanted to share the process since it took me a while to understand and thought other admins might find it interesting.

  1. Download the theme you want to customize and its corresponding SCSS file.

In my case I just did darkly.css and _variables.darkly.scss

  1. Edit them You can override classes and properties of the default styles.css by adding them to that theme and giving them a higher priority with !important.

  2. Change the name of the files, for example “defaulttheme.css” and “_variables.defaulttheme.scss”

  3. Upload the files to your server to the lemmy install folder. It’s probably something like “/srv/lemmy/<yourdomain>/volumes/lemmy-ui/extra-themes/”

  4. Enable the theme on your profile to make sure everything looks alright.

  5. As instance admin, go to main settings and set the new theme as the default for all users.

In my case what I did was simply removing the NSFW blur, which doesn’t make much sense to have if you’ve already agreed to see NSFW content. Anyone who still wants to have the blur can switch back to any of the other themes.

I’m not skilled at CSS, but I’ll try to make some more changes to customize the site’s experience.

Anyways, I hope somebody will find this useful.

  • TanakiEnglish
    4·
    1 year ago

    I’m terrible at CSS too. But the default theme is very much not for me – I’d like a “compact” mode that can fit more than a few article titles on the page. Do you think the layout is flexible enough to do that with CSS?

    • LockelyEnglish
      2·
      1 year ago

      This, please. I’d prefer an old.reddit experience with RES enabled versus this New Reddit Compact Mode experience. Shame I don’t know CSS in the slightest.

  • EhllayEnglish
    1·
    1 year ago

    Thank you for the tutorial! Sadly I don’t have my own instance, so I guess my only options are contributing a theme or use extensions like Stylus

    • Wander@yiffit.netOPEnglish
      3·
      1 year ago

      If you have CSS knowledge, maybe both Yiffit and Pawb instances could benefit from an awesome custom theme :3

      • EhllayEnglish
        2·
        1 year ago

        Well I don’t know anything about CSS, but I’ve taken a look at the files and it seems that making a custom theme is as easy as changing the hex values for colors, so I might give it a try.

  • redyoshi49q@furry.engineer
    0·
    1 year ago

    @Wander A more quality (but more labor intensive) solution would be to have an account setting that toggles a short CSS file containing overriding CSS for the adult image blur. This way, users could choose to have or not have that blur regardless of which theme they chose (without having to have two separate copies of each main CSS theme to achieve that).

    • Wander@yiffit.netOPEnglish
      1·
      1 year ago

      Sorry for the late reply. I finally figured out why I wasn’t able to get my reply sent. Apparently if you reply from Lemmy to Mastodon you need to choose a language or otherwise it won’t work.

      In any case, I really want to add the toggle to the UI, but I would first need to learn a bit more about how it’s set up currently. I know it uses typescript, but maybe I can simply add some vanilla JS to the exported html files in the docker container.