Catppuccin Macchiato theme for Lemmy. GitHub Gist: instantly share code, notes, and snippets.

Hello everyone, I didn’t really like the darkly lemmy theme, so I’ve decided to port Catppuccin Macchiato Pink. You should be able to see it in action by going to my instance, as I’ve set it to be the default there.

I’ve shared both the final CSS that you can use as a custom theme if you’re an instance owner and as a theme for the https://github.com/openstyles/stylus extension, and the _variables.scss file if you want to modify something using https://bootstrap.build

https://gist.github.com/n3oney/21716419d84a1c777910327f404231fd

  • PoorPocketsMcNewHold@lemmy.mlEnglish
    1·
    1 year ago

    Sweet. Do you plan on making the others flavors and suggest it to be added to other Catppuccin ports ? (Would doubt as i think it’s more of a personal one, but still asking)

    • neoney@lemmy.neoney.devOPEnglish
      1·
      1 year ago

      I would be willing to give my findings for someone to maintain. I can’t really be bothered with maintaining all the…56? combinations

      Maybe if I figure out a script to compile them automatically, that could be done.

  • Slashzero@hakbox.socialEnglish
    0·
    1 year ago

    Hi! I was trying to install some themes, including this one on my instance. I added extra_themes with the CSS files in volumes/lemmy-ui/extra_themes, and then added that volume to the lemmy-ui container mapping it to /app/assets/css/extra_themes. When I bring the container back up, the new themes are not available in settings, even though they are on the container file system. What am I missing?

    • neoney@lemmy.neoney.devOPEnglish
      0·
      1 year ago

      Hi, the themes only take one file, so the extra_themes directory just directly contains CSS files. Make sure to include the .css extension, otherwise they won’t get picked up

      When I first tried, I did something like extra_themes/catppuccin-macchiato/bootstrap.min.css, that’s not valid, it’s extra_themes/catppuccin-macchiato.css

      • Slashzero@hakbox.socialEnglish
        0·
        1 year ago

        Thanks for your quick reply.

        Where exactly does the extra_themes volume need to end up inside the container? Does it belong in /app/assets/css/extra_themes? That is where I dropped the CSS files but they were not picked up.

        • neoney@lemmy.neoney.devOPEnglish
          1·
          1 year ago

          I’m not sure. I don’t use the container. I believe the extra_themes folder should be inside of the lemmy-ui folder

          • Slashzero@hakbox.socialEnglish
            1·
            1 year ago

            OK, thanks. I’ll keep poking around when I get some more time and see if I can figure it out. Your theme looks great, by the way!

            • neoney@lemmy.neoney.devOPEnglish
              1·
              1 year ago

              Thank you! If you don’t want to be looking for the folder, you can specify a custom one using the LEMMY_UI_EXTRA_THEMES_FOLDER environment variable, but it’s currently broken and waiting for the fix by yours truly to be merged.

              In the meantime, you can use the CSS in an extension like stylus! I do that to have it on lemmy.ml and lemmy.world