10 votes

Any custom themes using Stylus?

Posted January 14, 2020 by tomf

Tags: ask.survey, css, stylus, themes.display

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

[23]
cfabbro
January 14, 2020
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 (OP)
  January 14, 2020
  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
    January 14, 2020
    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
    
    [18]
    tomf (OP)
    January 14, 2020
    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
    
    [17]
    cfabbro
    January 14, 2020 (edited January 14, 2020)
    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
    
    [16]
    tomf (OP)
    January 14, 2020
    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
    
    [15]
    cfabbro
    January 14, 2020 (edited January 15, 2020)
    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
    
    [14]
    tomf (OP)
    January 15, 2020
    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
    
    [13]
    cfabbro
    January 15, 2020
    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
    
    [12]
    tomf (OP)
    January 15, 2020
    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
    
    [11]
    cfabbro
    January 15, 2020
    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
    
    [10]
    tomf (OP)
    January 15, 2020
    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...
    
    Exemplary
    
    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
    
    [9]
    cfabbro
    January 15, 2020
    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
    
    [8]
    tomf (OP)
    January 15, 2020 (edited January 15, 2020)
    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
    
    [7]
    cfabbro
    January 15, 2020 (edited January 15, 2020)
    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
    
    [6]
    tomf (OP)
    January 15, 2020
    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
    
    [5]
    cfabbro
    January 15, 2020
    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
    
    [4]
    tomf (OP)
    January 15, 2020
    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
    
    [3]
    cfabbro
    January 15, 2020
    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
    
    [2]
    tomf (OP)
    January 15, 2020
    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
    
    cfabbro
    January 15, 2020
    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]
    Kuromantis
    January 14, 2020
    Link Parent
    I asked deimos this question and he said it wasn't that simple to make.
    
    I asked deimos this question and he said it wasn't that simple to make.
    
    2 votes
    
    tomf (OP)
    January 14, 2020
    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]
rfr
January 14, 2020
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 (OP)
  January 14, 2020
  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