Dark theme for Suprbay (Easy setup)
#1
Let me start by saying that I'm not a pro at styling/CSS. This is something i put together because recently i started spending a lot of time on Suprbay and I'm a night owl. So the bright screen kind of start to burn my eyes within a few hours. This is just a simple solution i made for myself and thought of sharing it with everyone. The theme is built only with CSS so it's pretty much weightless.

[Image: -jXBz7eOSr_-K7WQVaxWyA.png]

Remember this is not a finalized version. There could be a lot of bugs. All the CSS pros are welcome to develop this further. To install this all you have to do is get the Stylish (Userstyles) extension for your browser and install the "Suprbay Dark" theme from the library or by visiting the theme URL.

Stylish for Chromehttps://chrome.google.com/webstore/detai...cffe?hl=en

Stylish for Firefox - https://addons.mozilla.org/en-US/firefox/addon/stylish/

An alternative for Safari usershttp://sobolev.us/stylish/

Suprbay Dark themehttps://userstyles.org/styles/156808/suprbay-dark

For anybody who likes to take a peek here's the source. If you like you can just copy this source and import into Stylish. If there's any confusion in installing and managing the theme, just Follow this video guide.

Code:
@-moz-document url-prefix("https://pirates-forum.org") {
table,
body,
textarea {
   color: #d3d3d3 !important;
}
.tborder,
#footer,
body {
   background: #1d1d1d !important;
}
.post.classic .post_author {
   border: 1px solid #1d1d1d !important;
}
.post .post_author,
blockquote,
.post_controls,
#panel .lower,
#footer .upper.tpb_links,
#footer .upper.sb_links,
#footer .upper.contact,
textarea {
   background: #2f2f2f !important;
}
.post .post_author div.author_avatar img {
   padding: 0px !important;
   margin: 5px !important;
   box-shadow: 0 0 12px rgb(255, 255, 255) !important;
   background: none !important;
}
.reputation_positive {
   color: #06b506 !important;
}
.post_body a:link,
.post_body a:visited {
   color: #03A9F4 !important;
}
#content {
   background: #1d1d1d !important;
   color: #d3d3d3 !important;
   box-shadow: 0 0 8px rgb(255, 255, 255) !important;
}
a:link,
a:visited,
a:hover,
a:active {
   color: #d3d3d3 !important;
}
.navigation .active,
.pagination .pagination_current,
blockquote cite > span,
#container {
   color: #fff !important;
}
.pagination a {
   background: #3e3e3e !important;
}
.post .post_author div.author_statistics {
   color: #c7c7c7 !important;
}
.postbit_buttons > a:link {
   background: none !important;
}
.tfoot {
   border-top: 1px solid #5d5d5d !important;
   background: #1d1d1d !important;
}
.trow1,
.trow2 {
   background: #2f2f2f !important;
   border-color: #7b7b7b !important;
}
#site_status,
#team_no_pm {
   background: #272727 !important;
}
*::-webkit-scrollbar {
   width: 10px !important;
   height: 10px !important;
   background: #1e1e1e !important;
   border: 1px solid #252525 !important;
}
*::-webkit-scrollbar-button {
   display: none !important;
}
*::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-track {
   border: 0 !important;
   box-shadow: none !important;
}
*::-webkit-scrollbar-thumb {
   min-height: 28px !important;
   background: #333 !important;
}
*::-webkit-scrollbar-corner,
*::-webkit-scrollbar-track {
   background: #1e1e1e !important;
}
}

Hope you enjoy this and contribute to develop this further.  Blush
Reply
#2
Nice addition, congratz!
Reply
#3
(Mar 08, 2018, 17:40 pm)dueda Wrote: Nice addition, congratz!

Thank you.
Reply
#4
This looks interesting. Maybe it could be useful enough at some point to be implemented here.
Reply
#5
(Mar 09, 2018, 01:00 am)contrail Wrote: This looks interesting. Maybe it could be useful enough at some point to be implemented here.

I agree. But still it needs a lot more work to be stable.
Reply
#6
No Stylish for Opera?
Reply
#7
It would be convenient if the dark mode theme was default and could be selected-changed in the account preferences.
Reply
#8
Well, it did not happen all the 4 years, unlikely to happen now...
Reply
#9
Very nice theme, but I'm wondering if we can optimize this process. See, you have to install Stylish, and I'm wondering if it'll be more efficient to convert it to a userscript that embeds CSS. Weird preference I know, but I reckon more users would have greasemonkey installed than they do Stylish.
Reply
#10
Oh, thanks! My eyes can finally rest for once. It feels as if the spirit of the French Revolution has manifested in the form of Dark Mode, granting respite to my weary eyes. At last, visual tranquility is within reach!
Reply


Possibly Related Threads…
Thread Author Replies Views Last Post
  Which one is the lightest wordpress theme for you? Edward Smith 2 22,609 Mar 19, 2024, 12:56 pm
Last Post: Madrox
  Customizing Inno Setup esharoth 3 28,007 Jan 17, 2020, 03:28 am
Last Post: srdmnry
  The Code of SuprBay RobertX 14 42,949 Jan 19, 2018, 04:16 am
Last Post: AncientRome



Users browsing this thread: 1 Guest(s)