10 votes

Any custom themes using Stylus?

I switched to the light theme the other day. I'm typically all-in with dark themes for everything, but there was some convincing research.

I started working on a light theme, but it's fairly basic.

I was digging through the old thread and found a few gems, but I'm wondering what everybody has been up to since. Time for some show and tell!

25 comments

  1. [23]
    cfabbro
    Link
    I like your theme, it's very clean. I personally still use @Bauke's Baukula, which is a modified version of Tildes default Dracula theme. It's got a bit more of a cyberpunk aesthetic than the...

    I like your theme, it's very clean.

    I personally still use @Bauke's Baukula, which is a modified version of Tildes default Dracula theme. It's got a bit more of a cyberpunk aesthetic than the default Dracula IMO... plus, I like pink. :)

    4 votes
    1. [22]
      tomf
      Link Parent
      I love Dracula! I use it for everything. In this theme I did up, I'm using some Dracula colors, actually (text, highlights, alerts, and exemplary posts.) In this theme I'm doing up, the colors and...

      I love Dracula! I use it for everything. In this theme I did up, I'm using some Dracula colors, actually (text, highlights, alerts, and exemplary posts.)

      In this theme I'm doing up, the colors and type are all in variables, so it's easier to mess with.

      I'll say this, a light theme is really growing on me.

      It'd be nice if Tildes had a set of variables we could simply override.

      1 vote
      1. [21]
        cfabbro
        Link Parent
        Like a totally custom theme picker, essentially? That could be kinda neat... though it might also be a bit overkill. :P BTW, are you going to release your theme at some point? I wouldn't mind...

        It'd be nice if Tildes had a set of variables we could simply override.

        Like a totally custom theme picker, essentially? That could be kinda neat... though it might also be a bit overkill. :P

        BTW, are you going to release your theme at some point? I wouldn't mind giving it a spin. :)

        2 votes
        1. [18]
          tomf
          Link Parent
          okay! I initially lost it... but HACKERMAN over here got everything back. https://gist.github.com/hello-party/fafc3e4a586c54b067417746d737b6d7 Give it a swing. Search for my username and replace...

          okay! I initially lost it... but HACKERMAN over here got everything back.

          https://gist.github.com/hello-party/fafc3e4a586c54b067417746d737b6d7

          Give it a swing. Search for my username and replace it with your own (~ line 202). Let me know if you find any errors or whatever.

          2 votes
          1. [17]
            cfabbro
            (edited )
            Link Parent
            Nice... It looks sweet. I especially love the ... instead of Actions, but I understand that's probably not ideal for the default theme because of new users/usability/accessibility. My only issue...

            Nice... It looks sweet. I especially love the ... instead of Actions, but I understand that's probably not ideal for the default theme because of new users/usability/accessibility. My only issue is that the font is pretty small on my 1440 Ultrawide, but that's an easy enough fix for me to do myself. Thanks!

            1 vote
            1. [16]
              tomf
              Link Parent
              I also added icons to the little actions menu. I couldn't think of anything else to replace the Actions with. haha I'm so rusty with CSS. I wasn't ever good to begin with, but working through this...

              I also added icons to the little actions menu. I couldn't think of anything else to replace the Actions with. haha

              I'm so rusty with CSS. I wasn't ever good to begin with, but working through this has been fun.

              1 vote
              1. [15]
                cfabbro
                (edited )
                Link Parent
                What about a cog? (e.g. ⚙️) That's what I originally used in the very first Tildes mockup I made (from before the site was launched) that had a similar dropdown for topics. :)

                I couldn't think of anything else to replace the Actions with.

                What about a cog? (e.g. ⚙️) That's what I originally used in the very first Tildes mockup I made (from before the site was launched) that had a similar dropdown for topics. :)

                2 votes
                1. [14]
                  tomf
                  Link Parent
                  yeah, that or ☉ is good. So, I took the solarized light theme from the stylesheet and bulk mapped it (roughly) with variables. It's pretty close. With a little work, this might work as a good...

                  yeah, that or ☉ is good.

                  So, I took the solarized light theme from the stylesheet and bulk mapped it (roughly) with variables. It's pretty close. With a little work, this might work as a good Stylus template for color changes.

                  give it a swing

                  1 vote
                  1. [13]
                    cfabbro
                    Link Parent
                    Some stuff is a bit off, like the dark text on the spoiler tag and browse groups button... but that's pretty neat!

                    Some stuff is a bit off, like the dark text on the spoiler tag and browse groups button... but that's pretty neat!

                    1 vote
                    1. [12]
                      tomf
                      Link Parent
                      yeah, that's a straight find and replace. When I get some time, I'll work through it to iron out the kinks and change some variables so they're logical. Once the colors are set, it'd be a breeze...

                      yeah, that's a straight find and replace. When I get some time, I'll work through it to iron out the kinks and change some variables so they're logical. Once the colors are set, it'd be a breeze to have a second section for physical changes.

                      Then once it's all done, the three of us who are into this will go 'hm.. that's slick.' and forget it ever existed :)

                      1 vote
                      1. [11]
                        cfabbro
                        Link Parent
                        LOL Nostradamus level prediction there. ;) Though if someone were to create a frontend using that same find/replace technique to allow people to custom pick their Tildes theme and then output the...

                        LOL Nostradamus level prediction there. ;)

                        Though if someone were to create a frontend using that same find/replace technique to allow people to custom pick their Tildes theme and then output the corresponding Stylus code for them, I suspect it would be far more than just 3 of us who go "hm.. that's slick"... but that would be a hell of a lot more work. :P

                        1 vote
                        1. [10]
                          tomf
                          Link Parent
                          well, I did generate the variables using Google sheets. I have a script that automatically updates the cell background to the hex value. Using Sheets, someone could use https://terminal.sexy/ to...

                          well, I did generate the variables using Google sheets. I have a script that automatically updates the cell background to the hex value.

                          Using Sheets, someone could use https://terminal.sexy/ to generate their color scheme, copy the Xresources formatting, paste it into a sheet and then the formula would spit it out..

                          ={":root {";
                            ARRAYFORMULA(
                             "    "&
                             QUERY(
                              IF(ISBLANK(A2:A),,
                               REGEXREPLACE(A2:A,"\*.","--")),
                              "select Col1 
                               where not Col1 contains '!' and 
                               Col1 is not null")&";");"}"}
                          

                          which blesses us with

                          :root {
                              --foreground:   #565e65;
                              --background:   #f3f4f5;
                              --cursorColor:  #565e65;
                              --color0:       #1c2023;
                              --color8:       #747c84;
                              --color1:       #c7ae95;
                              --color9:       #c7ae95;
                              --color2:       #95c7ae;
                              --color10:      #95c7ae;
                              --color3:       #aec795;
                              --color11:      #aec795;
                              --color4:       #ae95c7;
                              --color12:      #ae95c7;
                              --color5:       #c795ae;
                              --color13:      #c795ae;
                              --color6:       #95aec7;
                              --color14:      #95aec7;
                              --color7:       #c7ccd1;
                              --color15:      #f3f4f5;
                          }
                          

                          That would be one way to go about it :)

                          quick edit: did you see the code blocks in my theme? I'm curious if they worked for anyone else.

                          1 vote
                          1. [9]
                            cfabbro
                            Link Parent
                            Have now... I'm personally not a huge fan of zebra striping, but that's probably just me. ;)

                            did you see the code blocks in my theme? I'm curious if they worked for anyone else.

                            Have now... I'm personally not a huge fan of zebra striping, but that's probably just me. ;)

                            1 vote
                            1. [8]
                              tomf
                              (edited )
                              Link Parent
                              okay -- give this a swing. Purely as a proof of concept I mashed together a CYBERPUNK NEON theme I found on github. I plunked everything in place really quickly without much thought....

                              okay -- give this a swing. Purely as a proof of concept I mashed together a CYBERPUNK NEON theme I found on github. I plunked everything in place really quickly without much thought.

                              https://gist.github.com/hello-party/06f7d9b65e9b3ccaabba327e69cd7862

                              Right now the neon stuff is commented out and Dracula is commented in. I haven't got a generator going, but it's fairly easy to set up a decent theme.

                              quick note: if anyone stumbles onto this and tries it out, there are bound to be errors.

                              Here it is with (roughly) the same colors as my previous theme and some other modifications not in the gist -- https://i.imgur.com/Av8bzEG.png

                              1 vote
                              1. [7]
                                cfabbro
                                (edited )
                                Link Parent
                                Not bad. It's a tad dark and too low-contrast for my tastes, but regardless... it's really neat how you have managed to do all this. Colour me impressed! I'm gonna have to play around with some of...

                                Not bad. It's a tad dark and too low-contrast for my tastes, but regardless... it's really neat how you have managed to do all this. Colour me impressed! I'm gonna have to play around with some of the colours myself and see what I can come up with. :P

                                1 vote
                                1. [6]
                                  tomf
                                  Link Parent
                                  yeah, it works well -- but that super dark neon theme was pretty close to the output of a terminal theme. So not all work well, but doing it manually seems to be alright. I posted one here with...

                                  yeah, it works well -- but that super dark neon theme was pretty close to the output of a terminal theme. So not all work well, but doing it manually seems to be alright.

                                  I posted one here with some tweaks from my previous theme

                                  https://gitlab.com/tomflint/tildes-stylus-template/raw/master/template.css

                                  1 vote
                                  1. [5]
                                    cfabbro
                                    Link Parent
                                    Hmmm... I dunno how I feel about moving the topic sort options to the top bar and left aligned. On my Ultrawide that moves it all super super far away from the actual topic listings. :P

                                    Hmmm... I dunno how I feel about moving the topic sort options to the top bar and left aligned. On my Ultrawide that moves it all super super far away from the actual topic listings. :P

                                    1 vote
                                    1. [4]
                                      tomf
                                      Link Parent
                                      oh yeah, that wouldn't be good. But this is all separate stuff that can easily be commented out or completely removed.

                                      oh yeah, that wouldn't be good. But this is all separate stuff that can easily be commented out or completely removed.

                                      1 vote
                                      1. [3]
                                        cfabbro
                                        Link Parent
                                        Oh yeah, for sure. I am not mentioning any of this to get you to change anything. You do you, and anything I don't like is easy enough for me to change myself. I'm just letting you know my own...

                                        Oh yeah, for sure. I am not mentioning any of this to get you to change anything. You do you, and anything I don't like is easy enough for me to change myself. I'm just letting you know my own thought process. :P

                                        1 vote
                                        1. [2]
                                          tomf
                                          Link Parent
                                          The sidebar links are mapped to var(--cyan) instead of var(--link). Not bad for a quick evening project. The bulk of the work was done by whoever did the initial themes for the site. :)

                                          The sidebar links are mapped to var(--cyan) instead of var(--link).

                                          Not bad for a quick evening project. The bulk of the work was done by whoever did the initial themes for the site. :)

                                          1 vote
                                          1. cfabbro
                                            Link Parent
                                            Yep, not bad indeed! That would probably be @Deimos and @Bauke (who contributed the major theme system overhaul).

                                            Yep, not bad indeed!

                                            The bulk of the work was done by whoever did the initial themes for the site.

                                            That would probably be @Deimos and @Bauke (who contributed the major theme system overhaul).

                                            2 votes
        2. [2]
          Kuromantis
          Link Parent
          I asked deimos this question and he said it wasn't that simple to make.
          2 votes
          1. tomf
            Link Parent
            yeah, with it being compiled, that'd be a pain in the ass. And really, for those of us who want to change things, it's not difficult to use stylus.

            yeah, with it being compiled, that'd be a pain in the ass. And really, for those of us who want to change things, it's not difficult to use stylus.

            3 votes
  2. [2]
    rfr
    Link
    Check out the customization wiki article for more userstyles. Some might be out of date.

    Check out the customization wiki article for more userstyles. Some might be out of date.

    4 votes
    1. tomf
      Link Parent
      yeah, I was digging through that. Your section on using uBlock Origin is smart!

      yeah, I was digging through that. Your section on using uBlock Origin is smart!

      2 votes