[b][big]Similar Worlds Dark Theme[/big] is now released and available for use![/b] 🙂 🌒 🌠
Usage is quite simple. If you'd like to try out SW Dark Mode / Dark Theme, simply do the following:
[sep]
1) Once on Similar Worlds, Press the [big]☰[/big] "[b]Three Lined Drop Menu Icon[/b]" ⏬ on the top-right side of your screen (once the blue bar is visible).
2) Press 🌒 "[b]Dark Mode[/b]".
3) Lastly, Press the ⬛ [b]Black Square[/b] to [b]Activate Dark Mode![/b]
You can always disable Dark Mode at any time, by repeating these steps, and clicking on the Light-Blue box on the last step.
[sep]
[c=#008099][big]Similar Worlds Original Theme:[/big][/c]
[big]Similar Worlds Dark Theme:[/big]
[c=#666666][i]This "Dark Theme" can be considered a "Beta Release", as there will be numerous improvements progressively done to this theme, and a few bugs may be found along the way.[/i][/c]
[sep]
Kind regards! Have a great week ahead, and also a wonderful month of May! [c=#004A59][i]-The SW Team[/i][/c]
[sep]
[sep]
[b][i][Update]:[/i][/b]
Several minor improvements have been made, since this new Dark Theme [i](still Beta)[/i] was released about an hour ago.
Thanks for all the feedback and reporting of bugs/issues that users discovered. 👍
[sep]
[b][i][Update]:[/i][/b]
[b][big]Dark Theme Font Color Improvements [i][c=BF6900]( Just Released! )[/c][/i][/big][/b]
[sep]
[center][big]----- Live Test -----[/big]
[b]Default / Dark[/b] Theme [i]Color Test 123[/i]
[c=#666666][b]Default / Dark[/b] Theme [i]Color Test 123[/i][/c] [c=#BF0000][b]Default / Dark[/b] Theme [i]Color Test 123[/i][/c] [c=#BF6900][b]Default / Dark[/b] Theme [i]Color Test 123[/i][/c] [c=#A69800][b]Default / Dark[/b] Theme [i]Color Test 123[/i][/c] [c=#359E00][b]Default / Dark[/b] Theme [i]Color Test 123[/i][/c] [c=#009E4F][b]Default / Dark[/b] Theme [i]Color Test 123[/i][/c] [c=#008099][b]Default / Dark[/b] Theme [i]Color Test 123[/i][/c] [c=#003BB2][b]Default / Dark[/b] Theme [i]Color Test 123[/i][/c] [c=#7700B2][b]Default / Dark[/b] Theme [i]Color Test 123[/i][/c] [c=#BF0080][b]Default / Dark[/b] Theme [i]Color Test 123[/i][/c]
[c=#000000][b]Default / Dark[/b] Theme [i]Color Test 123[/i][/c] [c=#800000][b]Default / Dark[/b] Theme [i]Color Test 123[/i][/c] [c=#804600][b]Default / Dark[/b] Theme [i]Color Test 123[/i][/c] [c=#665D00][b]Default / Dark[/b] Theme [i]Color Test 123[/i][/c] [c=#1F5E00][b]Default / Dark[/b] Theme [i]Color Test 123[/i][/c] [c=#005E2F][b]Default / Dark[/b] Theme [i]Color Test 123[/i][/c] [c=#004A59][b]Default / Dark[/b] Theme [i]Color Test 123[/i][/c] [c=#002673][b]Default / Dark[/b] Theme [i]Color Test 123[/i][/c] [c=#4C0073][b]Default / Dark[/b] Theme [i]Color Test 123[/i][/c] [c=#800055][b]Default / Dark[/b] Theme [i]Color Test 123[/i][/c]
[quote] [b]Default / Dark[/b] Theme [i]Color Test 123[/i]
[c=#666666][b]Default / Dark[/b] Theme [i]Color Test 123[/i][/c] [c=#BF0000][b]Default / Dark[/b] Theme [i]Color Test 123[/i][/c] [c=#BF6900][b]Default / Dark[/b] Theme [i]Color Test 123[/i][/c] [c=#A69800][b]Default / Dark[/b] Theme [i]Color Test 123[/i][/c] [c=#359E00][b]Default / Dark[/b] Theme [i]Color Test 123[/i][/c] [c=#009E4F][b]Default / Dark[/b] Theme [i]Color Test 123[/i][/c] [c=#008099][b]Default / Dark[/b] Theme [i]Color Test 123[/i][/c] [c=#003BB2][b]Default / Dark[/b] Theme [i]Color Test 123[/i][/c] [c=#7700B2][b]Default / Dark[/b] Theme [i]Color Test 123[/i][/c] [c=#BF0080][b]Default / Dark[/b] Theme [i]Color Test 123[/i][/c]
[c=#000000][b]Default / Dark[/b] Theme [i]Color Test 123[/i][/c] [c=#800000][b]Default / Dark[/b] Theme [i]Color Test 123[/i][/c] [c=#804600][b]Default / Dark[/b] Theme [i]Color Test 123[/i][/c] [c=#665D00][b]Default / Dark[/b] Theme [i]Color Test 123[/i][/c] [c=#1F5E00][b]Default / Dark[/b] Theme [i]Color Test 123[/i][/c] [c=#005E2F][b]Default / Dark[/b] Theme [i]Color Test 123[/i][/c] [c=#004A59][b]Default / Dark[/b] Theme [i]Color Test 123[/i][/c] [c=#002673][b]Default / Dark[/b] Theme [i]Color Test 123[/i][/c] [c=#4C0073][b]Default / Dark[/b] Theme [i]Color Test 123[/i][/c] [c=#800055][b]Default / Dark[/b] Theme [i]Color Test 123[/i][/c]
[/quote] [/center]
This page is a permanent link to the reply below and its nested replies. See all post replies »
Credit where credit is due. Wish we had it a lot earlier, but it feels great to finally have that. Gonna make it so much easier on the eyes now.
You may already be aware of it, and I know it is considered a "beta", but as far as feedback goes there are some tiny things I noticed that might be worth tweaking:
Forgotten to make parts of the image upload dialog dark leading to invisible text.
Contrast on the "-The SW Team" formatting isn't ideal. Can be hard to read. Not sure what formatting tag that is (or if that is available to regular users at all).
Quickly dug up a site for checking the contrast.
It has been a while since I dabbled in that so might be a slight bit off with the numbers here, but last I checked I think the recommended contrast according to the WCAG standard (or whatever it's called) is at least 4.5 for standard, or 7 for extra readable.
Adding on to this another thing I noticed. On desktop at least the lower, left hand corner notifications you get also use a light background similar to the upload image dialog leading to text being unreadable. Not sure if they share CSS rules though so for all I know fixing one might fix the other. Thought it was worth mentioning though.
@Nuno Can confirm polls, image uploads and notifications are good now. Much appreciated!
Regarding the "-SW Team" coloring I mentioned earlier, I realize now it was chosen in the color tool in the text editor. May I suggest adding a palette swap for these colors when in dark mode? I can't remember them off the top of the head (and you might already have access to better tools) but I did find a page a while back that takes a background and foreground color and attempts to suggest closest matches that fall within "readable colors" (4.5+ and 7+ WCAG).
And sounds good. I do understand it takes time to develop and tweak, just figure it's better to be on the safe side and mentioned it rather than assume it's known.
Found the tool I used to help finding usable colors way back. Again, you might already have access to similar or better tools (I don't know what you have), but if not this is a good one for that purpose. And perhaps someone else will find use in this tool too so I'll just throw it out there:
