OzBargain Black Theme via Stylus

LBillyCool on 04/06/2020 - 20:07
Last edited 07/06/2020 - 23:15

Yes, it's another one of those and yes, I know there is a built-in dark mode now but it's not truly black and it's not customizable. This is why this exists.

It features:

  • Customizable color shade of background elements, you can choose between pitch black to any shade of dark.
  • Customizable color shade of text elements, you can choose between pure white to light gray.
  • Customizable highlight color used throughout the site, default is OzBargain orange.
  • Customizable dollar sign color in deal titles, because why not.
  • Customizable misc colors, like the blues, greens, reds etc.
  • Option to hide the sidebar.
  • Option to hide the footer.
  • Option to hide the newsletter form.
  • Option to hide highlighted competitions.
  • Option to hide highlighted topics.
  • Option to hide related stores.
  • Option to hide unpublished deals and topics.
  • Option to hide social media share buttons.
  • Automatically updates every time I fix something (or you can do it manually via Stylus).

It requires the Stylus (compatible with Stylish themes) browser extension, which you can get here:
Firefox: https://addons.mozilla.org/en-US/firefox/addon/styl-us/
Chrome: https://chrome.google.com/webstore/detail/stylus/clngdbkpkpe…

Once the extension is installed, you can visit this link to install the theme: https://gist.githubusercontent.com/BillyCool/cd2d74feeeb3736…

You can access all the options from the Stylus icon in your browser: https://imgur.com/a/3pEhj8H

Screenshots:
https://imgur.com/a/TToIIfz
https://imgur.com/a/HMNKhmL

I've been using this for about a month and have fixed any issues that came up. That said, I'm not actively using all parts of the website, so there's a chance there's more issues somewhere. Feel free to report those and I'll get them fixed asap :)

Bonus black theme for the Stylus extension itself: https://gist.githubusercontent.com/BillyCool/be2563be54d044b…

Site Discussion

Comments

  • Axelstrife on 04/06/2020 - 20:38

    The top deals to bell icon area and some other locations remain solid black color when changing the black to something different (i prefer a grey color instead of solid black.)
    https://i.imgur.com/43jZVu0.png

    • BillyCool on 04/06/2020 - 20:47

      Do you happen to have any other theme that could be conflicting? I don't experience that on my end: https://imgur.com/a/wUZjqgX

      Could you maybe try doing a refresh and see if that fixes it?

      • Axelstrife on 04/06/2020 - 21:00

        found the issue if it even is an issue.
        the two slider bars the top for color and the bottom for brightness, the bottom caused what mine looked like, however when i click on a grey color and leave that bottom bar all the way to the right it works.

        • BillyCool on 04/06/2020 - 21:13

          Oh, that's an odd one, never actually tested that. The second bar is basically opacity and should ideally be left at 1, or you'll run into other issues as well, like menus blending with the background and such.

          • BarginHunter on 06/06/2020 - 23:12

            @BillyCool: I'm having the same issue too, even if I leave the second bar at 1. Also, would it be possible to include the ability to change the colour of the vote button background and the new tag? Also, for some reason the reddit icon is not visible unless you highlight the button, all I see is the blue box.

            • BillyCool on 07/06/2020 - 18:31

              @BarginHunter: Looks like I'm unable to replicate that on my end, could you share a screenshot of your settings and let me know what browser you're using?

              I just pushed an update to allow more color customization that includes the things you suggested. The text, hover and border colors will adjust automatically based on your selection. These generic colors are used for multiple bits and pieces, for example red may be used for the expired badges and the downvote button, so changing it will affect all bits that use it. Ideally, you shouldn't change the base color, but just the shade of it to your liking. Screenshots: https://imgur.com/a/HMNKhmL

              To update, you can either wait and it will happen automatically, or you can re-visit the link in OP and reinstall the theme, or you can update manually via the Stylus interface.

              Regarding the reddit icon, I'm not sure what that refers to, could you provide a screenshot for that as well?

              • BarginHunter on 07/06/2020 - 22:01

                @BillyCool: Awesome, thanks mate. I'm using Waterfox, but I also tried it on Firefox and got the same issue. I've attached a screenshot https://i.imgur.com/AkyxcVb.png

                • BillyCool on 07/06/2020 - 23:13

                  @BarginHunter: Thanks for that, had no idea those buttons existed, always blocked by uBlock :D. Fixed those to look like normal. Also added an option to hide them if anyone wants to.

                  Regarding the other issue, I'm not really sure, I fired up Windows Sandbox, basically a clean Windows environment, installed both Firefox and Waterfox and they both work fine when using a different primary dark color. Only way I can replicate it, is by adjusting the opacity slider. See: https://imgur.com/a/rVDX7gO

                  Could you try resetting the primary dark color using the X button next to it and then try setting it? Otherwise, maybe double check that you don't have any other extension that might be conflicting.

                  • BarginHunter on 10/06/2020 - 10:21

                    @BillyCool: I still can't get it work right for some reason, I tried chrome yesterday too, including using a new chrome user with no other addons or extensions installed and that bar still won't match the rest of the site. Nor will the background of the live table on https://www.ozbargain.com.au/live

                    Tried also at work on my work pc and same issue. I assume running windows 7 has no effect? Also, does the version of Stylus installed have any effect?

                    • BillyCool on 11/06/2020 - 01:09

                      @BarginHunter: Not sure how to help here, looking at the styling, the colors of those bits is taken from the primary dark value. I setup a Windows 7 VM on a different PC to give it a try, and it still works properly on my end, tried a few color combinations: https://imgur.com/a/OJqfM0Z

                      Stylus version I don't think should matter, but I'm using the latest.

Login or Join to leave a comment
Login Join