Editing Dark Mode Suggestions

Jump to navigation Jump to search
Warning: You are not logged in. Your IP address will be publicly visible if you make any edits. If you log in or create an account, your edits will be attributed to your username, along with other benefits.

The edit can be undone. Please check the comparison below to verify that this is what you want to do, and then publish the changes below to finish undoing the edit.

Latest revision Your text
Line 73: Line 73:
******** In the meantime... #1c1c1c looks better than #000, but the best readability is achieved only with grey tones equal or higher than #ccc --[[User:Sandungas|Sandungas]] ([[User talk:Sandungas|talk]]) 02:16, 14 June 2023 (CEST)
******** In the meantime... #1c1c1c looks better than #000, but the best readability is achieved only with grey tones equal or higher than #ccc --[[User:Sandungas|Sandungas]] ([[User talk:Sandungas|talk]]) 02:16, 14 June 2023 (CEST)
********* How about #303841? That's the default color SublimeText uses for its background. Honestly, black is most readable to my eyes; but maybe that's just because I've stared at code in dark mode at 2am for too long :)  [[User:Derf|Derf]] ([[User talk:Derf|talk]]) 04:42, 17 June 2023 (CEST)
********* How about #303841? That's the default color SublimeText uses for its background. Honestly, black is most readable to my eyes; but maybe that's just because I've stared at code in dark mode at 2am for too long :)  [[User:Derf|Derf]] ([[User talk:Derf|talk]]) 04:42, 17 June 2023 (CEST)
********** Im reading my previous comment and im not sure sure if i was clear, to summarize, the problem we have right now is the <nowiki><pre>, <code>, <source></nowiki> (deprecated) and some more tags are inheriting the colors from the syntaxhighlights settings, you already know this because we was talking about it in [[User_talk:Derf]]. The syntaxhighlights settings contains 75 colors (repeated many times) that was supposed to work fine with a bright background and we changed 3 of them to improve readability over bright backgrounds a bit more. Well... the only way to have a nice color selection for dark backgrounds is to replace most/all the syntaxhighlight colors, is not just the background, is needed to replace a lot more colors (remember i leave a link with a dark color setup in your tak page). The alternative (or better said... the easy way) is to dont change any color in the dark skin. #303841 probably is too bright, the comments in most languages have a middle grey color close to that --[[User:Sandungas|Sandungas]] ([[User talk:Sandungas|talk]]) 12:32, 17 June 2023 (CEST)
*********** Is it just me or why we can't just keep the same color like on standard mode, which is #F3F4F5. It would fix all problems. [[User:Roxanne|Roxanne]] ([[User talk:Roxanne|talk]]) - 17th June 2023 - 13:58 GMT+1
************ Well, this is one of the cases where i prefer to "do it well" or dont do it at all, and i think is a bad timing to enter in this forest specially because the syntaxhighligh color settings for vector skin was not fully reviewed (we just changed 3 colors but it can be made way better). Im reviewing the talk in derf user page and the way to do it right is by adding a lot of '''<code>.client-dark-mode .mw-highlight .s {color:WHATEVER}</code>'''<br> (in this example the .s changes the color for "strings" data types inside the highlighted code), i mentioned above that are up to 75 colors, but in derf tak page i counted only 11 colors because a lot of them are repeated (in the same way we can group them to change them in groups for the dark skin), anyway for reference of how many colors we need to modify take a look at this [https://myridia.com/dev_posts/view/2125] (it seems to be a "port" of [https://github.com/tanvirtin/monokai.nvim '''monokai skin'''] for linux terminal and looks really nice). Thats the better way to do it by replacing pretty much all the syntaxhighlight colors --[[User:Sandungas|Sandungas]] ([[User talk:Sandungas|talk]]) 14:15, 17 June 2023 (CEST)


=== Example 4 ===
=== Example 4 ===
Line 92: Line 89:
** The same applies for the black arrows for tables including a sorting function. They keep black on Dark Mode.
** 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. [[User:Derf|Derf]] ([[User talk:Derf|talk]]) 19:18, 11 June 2023 (CEST)
*** 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. [[User:Derf|Derf]] ([[User talk:Derf|talk]]) 19:18, 11 June 2023 (CEST)
**** Fixed! [[User:Derf|Derf]] ([[User talk:Derf|talk]]) 05:27, 17 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!
* 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. [[User:Derf|Derf]] ([[User talk:Derf|talk]]) 08:18, 11 June 2023 (CEST)
** Fixed. [[User:Derf|Derf]] ([[User talk:Derf|talk]]) 08:18, 11 June 2023 (CEST)
Line 128: Line 124:
|-
|-
| style="border-bottom:hidden; border-left:hidden; background:rgba(0,0,0,0)" | 3/1 || 3/2 || style="border-bottom:hidden; border-right:hidden; background:rgba(0,0,0,0)" | 3/3
| style="border-bottom:hidden; border-left:hidden; background:rgba(0,0,0,0)" | 3/1 || 3/2 || style="border-bottom:hidden; border-right:hidden; background:rgba(0,0,0,0)" | 3/3
|}
{| class="wikitable"
| cell 1/1 || cell 1/2 || cell 1/3
|-
| cell 2/1 || cell 2/2 <!-- cell 2/3 is missing intentionally to expose the problem -->
|}
|}


Line 142: Line 132:


It seems the problem is caused by the default:<br>
It seems the problem is caused by the default:<br>
<syntaxhighlight lang="css">
'''<code>.wikitable{background-color:#f8f9fa; color:#202122; etc....}</code>'''<br>
.wikitable{
    background-color: #f8f9fa; /* this is the phantom border... but is not a border, it smells like a bug of vector skin */
    color: #202122; /* this is a black font.... completly unreadable over a black background */
    margin: 1em 0;
    border: 1px solid #a2a9b1;
    border-collapse: collapse;
}
</syntaxhighlight>
I dont know where is located this default settings (i can see it in a code inspector but i cant find it in [[MediaWiki:Common.css]]) anyway, its location doesnt matters because we dont need to modify it (seems to be common for all skins)<br>
I dont know where is located this default settings (i can see it in a code inspector but i cant find it in [[MediaWiki:Common.css]]) anyway, its location doesnt matters because we dont need to modify it (seems to be common for all skins)<br>
The other "etc" attributes i mentioned (margin, border, and border-collapse) are overrided by the dark skin settings, in other words... the dark skin is modifying them (as expected), but the dark skin settings are not overriding the #f8f9fa and the #202122<br>
The other "etc" attributes i mentioned (margin, border, and border-collapse) are overrided by the dark skin settings, in other words... the dark skin is modifying them (as expected), but the dark skin settings are not overriding the #f8f9fa and the #202122<br>
Line 159: Line 141:
--[[User:Sandungas|Sandungas]] ([[User talk:Sandungas|talk]]) 00:09, 13 June 2023 (CEST)
--[[User:Sandungas|Sandungas]] ([[User talk:Sandungas|talk]]) 00:09, 13 June 2023 (CEST)
* What settings do you want me to set? [[User:Derf|Derf]] ([[User talk:Derf|talk]]) 04:50, 17 June 2023 (CEST)
* What settings do you want me to set? [[User:Derf|Derf]] ([[User talk:Derf|talk]]) 04:50, 17 June 2023 (CEST)
** Is a property inherited from the wikitable class and needs to match with the color you setted for the .mw-datatable td. Im not sure if there is a less intrusive way to do it but this should fix the phantom border --[[User:Sandungas|Sandungas]] ([[User talk:Sandungas|talk]]) 12:52, 17 June 2023 (CEST)
 
'''<code>.client-dark-mode .wikitable{background-color:black!important}</code>'''<br>
And this should fix both problems by replacing the black font by white (or whatever other color you used for fonts)<br>
'''<code>.client-dark-mode .wikitable{background-color:black!important; color:white;}</code>'''


=== Header sorting arrows images ===
=== Header sorting arrows images ===
Line 172: Line 151:
* I was able to figure those selectors out, but the issue is doing <code>filter:invert(1)</code> on it inverts the colors of the whole cell, not just the image. It's odd they make it part of the <code>th</code> instead of a <img> tag like everything else. I'll try and see if I can hide the image and add it back in a :after tag and invert that. Otherwise, I guess the only way is to upload an inverted .svg and override. [[User:Derf|Derf]] ([[User talk:Derf|talk]]) 04:50, 17 June 2023 (CEST)
* I was able to figure those selectors out, but the issue is doing <code>filter:invert(1)</code> on it inverts the colors of the whole cell, not just the image. It's odd they make it part of the <code>th</code> instead of a <img> tag like everything else. I'll try and see if I can hide the image and add it back in a :after tag and invert that. Otherwise, I guess the only way is to upload an inverted .svg and override. [[User:Derf|Derf]] ([[User talk:Derf|talk]]) 04:50, 17 June 2023 (CEST)
** Tried doing ::before, but to get it to actually show the image you have to use a different display type for the element (like display:inline-block) which shoves everything in that cell together and is generally a pain to work with. I ended up just uploading inverted SVGs and replaced em - fixed! [[User:Derf|Derf]] ([[User talk:Derf|talk]]) 05:27, 17 June 2023 (CEST)
** Tried doing ::before, but to get it to actually show the image you have to use a different display type for the element (like display:inline-block) which shoves everything in that cell together and is generally a pain to work with. I ended up just uploading inverted SVGs and replaced em - fixed! [[User:Derf|Derf]] ([[User talk:Derf|talk]]) 05:27, 17 June 2023 (CEST)
== Link Colors ==
The gold color that all links currently are is arbitrary. It looked good on the ConsoleMods theme, but it definitely can be different here.
The best looking of each color seems to be:
* cornflowerblue
* red
* blueviolet
* deeppink
* deepskyblue
* fuchsia
* gold (current color)
* lawngreen
You can set this in your user CSS (e.g. [[User:Roxanne/vector.css]]) to see it live by adding:
.client-dark-mode a, .client-dark-mode .mw-userlink bdi, .client-dark-mode #toc a *, .client-dark-mode .toctitle .toctogglelabel {
    color: blueviolet!important;
}
*cornflowerblue looks nice, im fully into keeping the links in a blue tone, either cornflowerblue or something close to it (yellows and oranges fits better for page section titles and things that are not clickables.. and red for errors and broken links) --[[User:Sandungas|Sandungas]] ([[User talk:Sandungas|talk]]) 13:50, 17 June 2023 (CEST)
** I've added a selector feature under Preferences > Appearance at the bottom! [[User:Derf|Derf]] ([[User talk:Derf|talk]]) 07:16, 18 June 2023 (CEST)
== [[PARAM.SFO]] ==
Just when I started to like the Dark Mode, I found another example '''where instead of bringing new features, we should fix the existing code first !!!''' The [[PARAM.SFO]] page is a horrible example what can go wrong on Dark Mode. In fact I don't even know where to start. What I can tell you tho regarding the "best color background" used for every <nowiki><pre></nowiki> and XML code is that the newest suggestion from [[User:Sandungas]] is again flawed because of two reasons. Luckily the [[PARAM.SFO]] page is a good example.
* The example shown above still shows no blue text and how it's handled within that background.
* Code on this wiki posted written in "C" language contains "<nowiki>{</nowiki>" and "<nowiki>}</nowiki>" symbols shown as standard black color on the light mode. So either we make them white or as I suggested, just use the same background color like on light mode and every problem is solved.
[[User:Roxanne]] - 18th June 2023 - 12:21 GMT+1
*Flawed "again" ?, by saying that you are insinuating two (or more) of the things i said related with syntaxhighlight was flawed but you are not telling what you consider flawed of the things i said, and i dont think i said anything flawed about it. Honestly im wondering  if you understood what i said about the molokai skin. Btw derf dont get misleading into thinking the problems in PARAM.SFO page are something isolated, there are tenths of pages affected by that kind of problems... or better said hundreds because some pages have many tables... or better said thousands because some of that problems affects table '''cells''' individually, so please before starting messing around with PARAM.SFO page take some time to consider whats the scope of the problems and think in the most practical way to solve them by minimizing the need to do thousands of edits in hundreds of pages [[User:Sandungas]]
** Just changed it back to the light mode color to avoid the whole issue. Also updated a lot of templates and searched for pages setting white backgrounds to fix issues. Still WIP. [[User:Derf|Derf]] ([[User talk:Derf|talk]]) 06:11, 1 July 2023 (CEST)
*** Problem solved in my eyes. Many thanks for your hard work. [[User:Roxanne]] - 01st July 2023 - 08:19 GMT+1
Please note that all contributions to PS3 Developer wiki are considered to be released under the GNU Free Documentation License 1.2 (see PS3 Developer wiki:Copyrights for details). If you do not want your writing to be edited mercilessly and redistributed at will, then do not submit it here.
You are also promising us that you wrote this yourself, or copied it from a public domain or similar free resource. Do not submit copyrighted work without permission!

To protect the wiki against automated edit spam, we kindly ask you to solve the following hCaptcha:

Cancel Editing help (opens in new window)

Templates used on this page:

Retrieved from "http://www.psdevwiki.com/ps3/Dark_Mode_Suggestions"