Modernish Dark Spigot Theme

Discussion in 'Community Feedback and Suggestions' started by PiggyPiglet, May 24, 2019.

  1. Around 2 years ago, I had an epiphany: bright themes are quite detrimental to my eye sight. So, my next course of action was to start fixing this issue, by converting the previous bright theme, into a dark theme. Worked on this off and on till today, when I decided around 12 hours ago that today was the day to finish it, and 12 hours later, it's finished as far as I can tell. Here's some screenshots:
    upload_2019-5-25_1-3-45.png
    upload_2019-5-25_1-4-32.png
    upload_2019-5-25_1-36-12.png

    Installing the theme is pretty ez, first download this and extract it, then install this chrome extension https://chrome.google.com/webstore/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld (or an alternative).

    You'll then want to click on the extension's icon in the top right corner of your chrome, and click "+ Add New"
    upload_2019-5-25_1-59-17.png
    This will then open a new page, with two text boxes, one for js and one for css. Paste the contents of the main.js file into the js text box, and the contents of the main.css file into the css box, then press save in the top right corner.
    upload_2019-5-25_2-1-13.png
    Make sure to change spigotmc.org to www.spigotmc.org, because this theme was not made with hub.spigotmc.org support in mind. Then, you're done, it should work as soon as you reload spigot (shift + f5).

    Just something to note, as you should be able to tell, this theme fucks around with javascript a bit to change some images and other bits and bobs, which can result in a "flicker" on fresh reloads for users with potato connections. This is most apparent in the twitter embed and the logo, unfortunately there's nothing I can do to prevent this, short of becoming a wizard.

    Time for a little rant now, spigotmc by far has the worst css I have ever seen. It was an absolute nightmare to theme, and has absolutely no consistency in regards to the way the css was made. To any bored developers, I strongly advise to not make a spigot theme. Now, with that out of the way, would also like to mention how shit my code is. This is the result of 2 years of randomly adding css snippets until this was produced, with absolutely no thought put into the actual code design.

    Don't expect any updates, I'll probably forget about this post in a few weeks. During that time period though, feel free to report any bugs you find to me, via convo, reply, or discord. Apart from that, please enjoy the theme.

    • spoiler input title
    • editing
    • save inline page
    • new thread button flicker on hover
    • post thread preview code block
    • insert quotes popup
    • report popup
    • insert quotes dragging background
     
    #1 PiggyPiglet, May 24, 2019
    Last edited: Jul 14, 2019
    • Winner x 11
    • Like x 7
    • Useful x 2
    • Creative x 2
    • Agree x 1
    • Friendly x 1
  2. FINALLY! It's about time someone made a dark mode for Spigot... this theme looks amazing, dark, sleek, and generally AWESOME. No visible errors as far as I can tell. If you aren't using this, USE IT.

    Keep me updated! Thank you!
     
    • Like Like x 1
    • Friendly Friendly x 1
  3. ----------------------------------------------------------------------------------------------------------------------------------------------------------
    Amazing, thanks <3
    ----------------------------------------------------------------------------------------------------------------------------------------------------------
     
    • Friendly Friendly x 1
    • Funny Funny x 1
    • Friendly Friendly x 1
  4. Awesome! I have been waiting for a dark theme for a while now.
     
    • Friendly Friendly x 1
  5. We owe you our eyesight. Thank the dark theme lords! Perhaps md_5 will make it official?
     
    • Friendly Friendly x 1
  6. Thanks for this dude!
     
    • Friendly Friendly x 1
  7. Finally I can turn off my jank auto dark theme extension that makes half of the content unreadable.
     
    • Like Like x 1
  8. Good Theme.
     
    • Friendly Friendly x 1
  9. upload_2019-5-26_10-59-4.png
    I am not sure if you can fix this but there is an awkward gap at the top of the updates page on the latest update that makes the title slightly ugly.
     
  10. Thanks for saving my eyes!

    EDIT: I've found these issues:
    • The edit post popup is still white.
    • When loading a page with slow internet, the spigot logo is huge, and then after a few seconds turned into the dark themed one. This causes you to scroll down a bit.
     
    • Friendly Friendly x 1
  11. Thanks, I’ll add these bugs to my todo list. I’m currently working on an update, but there’s no eta, as I’m also pre-occupied on a few other projects.
     
  12. Watching this thread <3 And it loooks awesome!
     
    • Friendly Friendly x 1
  13. Having albinism, I can tell you: THANK YOU.
     
    • Friendly Friendly x 1
  14. Two things cause that, one is the 0 padding that needs to be specifically disabled, and the other is the margin that's currently set to 10px 0, has to be set to 0 0 10px 0, and then the gap is closed, the title is vertically centered again (visually)
    Screenshot 2019-06-02 at 09.21.58.png Screenshot 2019-06-02 at 09.24.02.png

    The PNG file is okay in size, but compared to svg it's 10x more than it needs to be. The colors are very simple, so it would be easy to convert over anyway, helping mobile users.
    This video is just a quick convert to monochrome but you guys get the idea.



    Something for @OP
    The quick reply box at the bottom has the profile/avatar top/left rather than how it looks in a post, with a bit of space; it kinda looks out of it's place now in my opinion.

    Screenshot 2019-06-02 at 09.34.57.png Screenshot 2019-06-02 at 09.35.01.png
     
    #16 mrfloris, Jun 2, 2019
    Last edited: Jun 2, 2019
    • Friendly Friendly x 1
  15. Did you know that you can put the developer tools in dark mode? (Three dots -> Settings -> Theme -> Dark)
     
    • Agree Agree x 1
  16. Yeah, but I was so smart to move it from the right to the bottom and that reset a few things for me. Already changed it back after taking the screenshot.
     
    • Friendly Friendly x 1
  17. By the way, I'd like to point out that changing the theme on this site is a perk for donators. I notice nobody in this thread besides me has actually donated to SpigotMC. Go show some love to @md_5 with a donation! So you can feel a little less guilty about enjoying a perk you'd otherwise not get. Just saying!
     
    • Like Like x 1
  18. while i dont wanna discourage the effort of the OP (i like the colors used by him actually more) there is a browser extension called "night eye" it works nearly always pretty well, spigotmc has some weird 3 color theme (this is not really normal) but its still working well as "dark-mode"
    downside of the extension is, it comes with a 3 month trial and costs after the trial expires, not that much tho (40$ lifetime or 9$ per year)

    thats how it looks
    https://imgur.com/BpxovXw.png

    not affiliated or something like this (you also can quiet well re-do the trial every 3 months if you know how *cough*, but its a reasonable price), just wanna share since for me its unreplacable without the hassle of tinkering yourself, just switch it on

    On the other hand i have to agree with mrfloris, since dark mode is a donator perk, i dont know how far md5 likes to see us sharing those "methods" :eek: