Dark Mode Suggestions

Puh ... where I start this?

Not only that this shouldn't be at all live in the current setup, the announcement on both Twitter and Discord was like we released a finished product. Instead as already explained on Discord that "we have now open Pandora's Box" in terms of editing either the CSS code or half of the wiki itself (or both). Before releasing a feature like this and bringing it live, we should make some specific rules (!) we need to discuss before (oops. agreed. ~Derf). But it seems that people got already excited with turning everything from White into Black without thinking about the consequences of the readability of the wikis itself.

• There's no way to fully test it all in isolation currently, but I could probably make a test environment down the road (beta.psdevwiki.com or something). A bit of a pain to setup, but it's also something I want to setup for testing MediaWiki 1.40 anyway. You gotta break a few eggs to make a dark mode omelet :) Derf (talk) 09:07, 11 June 2023 (CEST)
  • My suggestion would be that instead of releasing it immediately within PS3 wiki, we should have to implement it on the smaller ones like PS1 wiki or PS Classic Wiki. Since they have only 20 articles at all, it would be easier to check what needs to be fixed and what needs to be improved. Then we could implement it to bigger ones like PS2, PSP, Vita or PS5 to find even more errors and to fix them, kinda like a learning curve. Instead we implemented it on the biggest of all wikis, which is bad.

• We need to discuss what we will do with images uploaded as .jpg files having a white background.
  • I think this is the one big trade-off. JPGs are JPGs, and I definitely don't want to edit them all into PNGs. Potentially it could be done in bulk if there's a tool out there to convert them to PNGs and detect and remove the white background - but perhaps it's best to just leave it as is. I don't think it's a big deal for any images outside of the Main Pages (which those I can fix by hand). Derf (talk) 07:43, 11 June 2023 (CEST)
• We need to discuss which colors needs to replaced in Dark Mode because there are now red links for non-available pages displaying just white together with many more bad examples.
  • Fixed, described below. Derf (talk) 07:02, 11 June 2023 (CEST)
• Same as with the problematic about the red links, every page containing XML code or Templates are now broken in Dark Mode because of displaying every text in white in front of a black background (it seems templates are working as long there aren't in any tablecells).
• Also I have the feeling that the font is now bigger in Dark Mode together that spaces are needing more space (a good example are when looking at the Main Page where every Template is now needing more space than in light mode.
  • Fixed - Links were originally set to be bold to stand out a bit more, which caused some templates and tables to be slightly bigger. I unbolded them, but I do prefer the bold look in dark mode. Derf (talk) 07:02, 11 June 2023 (CEST)

Hover over each Image to see what I mean. (neat trick! ~Derf)

Example 1

Click on "show" on the right corner

• I know we can't fix the white background without uploading a new transparent file, yet we need to discuss this for future uploads.
  • Personally, I don't think it's a big deal except for the main pages. Derf (talk) 09:09, 11 June 2023 (CEST)
• Most of the Blue text (existing pages) turns into yellow but not all (see the Username from the Uploader of this image file or every link on the top right corner).
  • Fixed - Valid links all now match. White color on top-right menu and usernames was chosen to stand out more on history pages. Derf (talk) 07:02, 11 June 2023 (CEST)
    • What about those links for "Read", "Edit", "View History" on the top right corner? It was kept in white for purpose or shouldn't we turn them into gold as well?
      • Fixed. Derf (talk) 19:07, 11 June 2023 (CEST)
        • Everything behind the "More" button is still in white such as the options for "protecting the page" or for "move the page" etc.
          • Fixed. Derf (talk) 07:57, 12 June 2023 (CEST)
            • Sorry for being that picky today but can the "More" Button itelf stay in white please? This is intended from the light mode as well. Thanks - Roxanne (talk) - 12th June 2023 - 18:58 GMT+1
• Same for Red text (non-existing pages) (see my User name on the right top corner or the "Discussion" link on the top left corner).
  • Fixed - Redlinks are now all red. Derf (talk) 07:02, 11 June 2023 (CEST)
    • The "Discussion" link on the top left corner is still white assuming that there is a Discussion page available, but which isn't ! Also when on a Discussion page, getting back to the "Main" article displays still in white color instead of turning yellow as well.
      • Fixed. Derf (talk) 19:07, 11 June 2023 (CEST)
    • Also when editing a Talk Page for uploaded Files, the "File" button on the top left corner have a grey background. This was fixed for normal pages but probably forgot to change that for File pages as well.
      • Fixed. Derf (talk) 19:07, 11 June 2023 (CEST)
    • Editing pages in general also needs some small fixes. The buttons for "Saving your changes" (white font within blue background) and the "Abort" button (red font) is losing the color. In my opinion we could keep them the same as they are on the light standard mode.
      • Not seeing this - can you post a screenshot? Derf (talk) 19:07, 11 June 2023 (CEST)
        

• • • • • Fixed. Derf (talk) 07:13, 12 June 2023 (CEST)
          • Is it possible to make the "Abort" button also in red please, like it is for the standard light mode? Thanks. User:Roxanne (talk) 12th June 2023 - 18:48 GMT+1
• The * on the overview which pages are using this images keeps black.
  • Fixed. Derf (talk) 07:43, 11 June 2023 (CEST)
• The "More" Options on the right top corner still has a black downwards arrow together that the search box is now hard to read.
  • Fixed. Derf (talk) 07:02, 11 June 2023 (CEST)
    • Maybe I would turn the text inside the Search box in white ("Search PS3 Developer wiki") and the "Read", "Edit", and "View History", into yellow as mentioned before. This should fix the readibility clearly. Also maybe we can find something for the magnifier symbol inside the search box.
      • It was already white, but I just made it bold and a black background to be more readable. Derf (talk) 19:07, 11 June 2023 (CEST)

Example 2

Click on "show" on the right corner

• Every blue text inside the TOC turns into white and not into yellow anymore. We need to discuss a main color using for all blue text and not multiple ones.
  • Fixed - I prefer white since they are all links, but I have set them all to gold. Derf (talk) 07:15, 11 June 2023 (CEST)
    • I prefer yellow since as you say that they are clickable. We should kept one color since the light theme is also using only blue for existing links/pages and red for non-existent ones.
    • The "Hide" button inside the TOC needs to be changed to yellow as well.
      • Fixed. Derf (talk) 19:07, 11 June 2023 (CEST)
• Here is seems that Red Links are working now inside the table. Why not on other parts like explained in the first example above?
  • It was purposely set for my taste on ConsoleMods. Derf (talk) 07:15, 11 June 2023 (CEST)
• This is also a good example that the font seems to be bigger now.
  • Fixed - Addressed earlier. Derf (talk) 07:15, 11 June 2023 (CEST)

Example 3

Click on "show" on the right corner

• Black text behind grey background turns unreadable because of changing both the color of the text into white together with the background into a slighter grey
  • Fixed. Derf (talk) 08:22, 11 June 2023 (CEST)
• Now the * is turning into white. Why not in the first Example?
  • Fixed - described above. Derf (talk) 07:43, 11 June 2023 (CEST)
• XML code is now everything in white !!!
  • Fixed. Derf (talk) 07:43, 11 June 2023 (CEST)
    • This is a good example for the thing as mentioned on Discord earlier. Now it's working but we have blue font on a black background. It is still hard to read so I would make as mentioned the article page itself black and such things like <pre> text, tables, templates etc. into grey or another color of choice so it should be readable again.
      • I tried it with different gray colors; it's most readable in black. You can play with this by adding .client-dark-mode pre { background-color: #333!important; } to User:Roxanne/vector.css (this will also apply to any other "pre" field too). Derf (talk) 19:07, 11 June 2023 (CEST)
        • Sorry but there should be a way to find a good grey color. Especially since the standard light theme is also using a grey background. Every <pre> text, every XML code and every Template has another color than white in the standard theme.
          • Yeah, but those greys are nearly white and aren't exactly a "dark mode" color. You can play around the colors and see if you can find a good combo that would fit a dark mode. I will mess with it more when I get a chance. Derf (talk) 07:21, 12 June 2023 (CEST)
            • If nothing works, my suggestion would be just to use the same light grey color like on the standard mode. Everything looks better than having blue font on a black background, sorry. Roxanne (User talk:Roxanne|talk]]) 12th June 2023 18:33 GMT+1

Example 4

Click on "show" on the right corner

• Moderation toolbox is hardly visible.
  • Where do you mean? Derf (talk) 08:18, 11 June 2023 (CEST)
    • The yellow one on top when there is Moderation needed. I would keep it in yellow so Mods won't ignore it. Wait we need to find another bright color since the blue text will be already turned into yellow. Or maybe we can make a exception that CSS won't change the Moderation toolbox.
      • Default colors are a bit blinding and hard to read when surrounded by darkness. I changed it to a red background for now. Colors are hard. Derf (talk) 07:13, 12 June 2023 (CEST)
• Again black text behind grey background is hard to read like on the 3rd example.
  • Fixed. Derf (talk) 08:59, 11 June 2023 (CEST)
• The 4th Example is a great example what we will do with transparent images, which have a black font tho, like the "PS2" and "PS3" logos on that wiki since black text on a black background is never a good idea.
  • This still needs fixing but could be made manually by User:Sandungas by choosing another color for the table if there is no other solution available.
    • I think we can make it a "PS3 Logo" template and I can invert the color when in dark mode. I'll try this out soon. Derf (talk) 19:18, 11 June 2023 (CEST)
      • Added Template:InvertibleImage to do it.
  • The same applies for the black arrows for tables including a sorting function. They keep black on Dark Mode.
    • This one is weird and will take me a bit of looking into since it's not immediately obvious what HTML element is showing that icon. Derf (talk) 19:18, 11 June 2023 (CEST)
• It seems that Dark Mode is creating additional borders within some tables. As an author of the PS4 version from the PS2 Classics Emulator Compatibility List, I highly doubt that this was intended!
  • Fixed. Derf (talk) 08:18, 11 June 2023 (CEST)
    • There is one small border still left on the left side of the "Legend" template. Hmm seems I get different results on different screen resolutions. This "hidden" tag might be problematic, needs more testing. Fixed by not handling the text below the Legend not as a tablecell anymore, so it also fits with the background from the article itself and not with the table by creating a unnecessary black background.
• Custom tablecell templates made by User:Sandungas seems to work only outside of a table. This makes the whole page kinda obsolete now !!!
  • Fixed. Derf (talk) 08:18, 11 June 2023 (CEST)
• The indicator for each letter displaying on which table you are right now turns from red into white. While the indicator is still working with white, it was intended to keep it in red because it works like that on light mode normally.
  • Not sure what you mean. Can you post a screenshot? Derf (talk) 07:18, 12 June 2023 (CEST)
    • Please check the A, B, C, D, E letters and so on on the hover example 4 image right above when the first PS2 Title is listed. User:Roxanne (talk) - 12th June 2023 - 18:52 GMT+1

---

The vertical border that appeared at botom left of Template:PS2_Classics_Emulator_Compatibility_List_Legend is a problem of the dark skin, the template was fine, see the same problem in this minimalistic samples, it seems the default border auto collapse is partially broken User:Sandungas

row 1

row 2

1/1	1/2	1/3
2/1	2/2	2/3
3/1	3/2	3/3

• Feel free to revert my edits on the PS2 Legend Template. It was just an idea to fix it quickly for the current Dark Mode setup without changing your design but I would also welcome to fix the Dark Mode itself and not to change various Templates / Pages. --- User:Roxanne (11th June 2023 - 23:38 CET + 1)
  • The idea was to keep all the legend contents inside the same wikitable for convenience, to prevent problems caused by dinamic width changes caused by small screens resolutions, to have better control of the surrounding margins with other templates, etc... I was starting the last row of the table with "!" (table header style) because i wanted that texts in bold and centered... but as a payback it was also inheriting the blue color of header cells, thats why i also added a background:#ffffff to override the blue header color. I have to admit it was a dirty/lazy way to do it but after thinking in it i figured the best solution (to achieve the same) is what i did in this edit. The line starts as "|" (standard row) and aligning the text to center and setting bold font manually. Is only a detail that i like how it looks but i dont have much preferences of how to do it, what you did replacing the table row with a <span> is fine but i would like to see the next changes to the dark skin settings before deciding, specially how the background color of wikitables changes if we fill the table cell with transparent colors. In theory fully transparent colors (either "background:rgba(0,0,0,0)" or "background:transparent") and colors with intermediate alpha levels (either "background:rgba(0,0,0,0.2)" or "background:hsla(0,0%,0%,0.2)") could be used to solve a lot of the problems caused by the dark skin because are going to be "merged" with the skin color behind them User:Sandungas