Jump to content

Scioly.org:WikiProject Dark Mode

From Wiki - Scioly.org


WikiProject Dark Mode

Welcome to WikiProject Dark Mode! This is a collaborative community WikiProject with the goal of porting over existing templates and tables to support the 2022 version of Vector.

Everyone is welcome to participate in the project, no matter how experienced in wiki editing you are! Editors are always ready to help! (You are always welcome to reach out to editors or wiki moderators for assistance!)

Participants

Feel free to add your name below! More than one person can work on the same project at once!

Name Activity Working on
User:Nydauron Active Template:Shortcut, Template:Navbox


New Participants

New participants are always welcome! While this is a bit more technical compared to past WikiProjects (knowing basic CSS will be helpful), it offers a decent learning opportunity to learn CSS and design. There is no time commitment to this project, and you may complete as many or as few pages as you would like. Simply add your username to the list of participants above and have fun! :)

FAQ

Why do we need to fix templates?

While Vector's dark mode works almost out of the box, there are a handful of situations where colorings are not automatically applied. In most cases, the colors are hard-coded and static.

I can't see a native dark mode option!

Our site upgraded MediaWiki to 1.43, which comes with the new 2022 Vector template, which supports dark mode. In the top right nav, go to Preferences > Appearance > Vector (2022). Once the skin has been applied, when visiting a page, you should see a dropdown on the right-hand side to toggle between light and dark mode.

How do I report an issue?

There are two ways you can report an issue:

  • You can send a report by clicking the link under Appearance > "Report an issue with Dark mode". We can then triage through and add it to the table.
  • Update the table on the right accordingly so that everyone is aware it needs to be added.

How can I view what has been reported?

Scioly.org:WikiProject Dark Mode/Reports Note: Please use the hyperlink under "Appearance" located on the top right of the page to report new issues.

Editing Guidelines/Help

First, familiarize yourself with the general standard that MediaWiki provides on their guide on porting templates to support dark mode. Those steps will be how we port our templates over.

We will be porting over all CSS into TemplateStyles, which provides a way to externalize CSS from templates, making them easier to maintain and making wiki markup templates more readable. This is a new extension that we have added with the site upgrades, so please read the docs on MediaWiki for more information.

For color scheme choices, we can finalize this at a later time; however, generally speaking, background and foreground colors should be WCAG AAA compliant, which provides the best visibility and accessibility for users. We will use a contrast tool like the one on WebAIM to pick colors. Any colors that are shared across templates can be discussed and finalized.

If you still don't know how to start, you can refer to the completed templates marked on the table, examine their structure, and what CSS files they reference. Most of the other templates will follow a similar format.

Useful Links

Getting Help

Want more help from another editor? No worries, they're happy to help! Please feel free to join the #wiki channel on Discord, message the wiki moderators or admins, post on a talk page/your talk page, or another avenue you're comfortable with!

Progress

Please update this table as necessary!

Page Created: Indicates that a page has been made
Introduction: Indicates that there is an introduction for the page's content
Infobox: If the page needs an Infobox, it is on the page
Content: Indicates that the page has the content needed for the page to function
Navbox: Indicates that the page has a relevant Navbox
Template Stylesheet Page Created Supports dark mode and OS preference Are dark mode colors WCAG AAA compliant? Are light mode colors WCAG AAA compliant? Other notes
Template:Documentation N/A ✓ ✓ ✓ Imported updated modules and templates from MW
Template:Imbox ✓ ✓ ✓ ✓ Imported stylesheet from MediaWiki
Template:Sidebar ✓ ✓ ✓ ✓ Imported module and stylesheet from Wikipedia
Infoboxes (create more rows for individual templates)
Template:Infobox ✓ ✓ ✓ ✓
Template:Infobox event ✓ ✓ ✓ Under certain conditions Created Template:Infobox/styles.css for common CSS between infoboxes

light mode WCAG AA fails if top placement schools are link colors

Template:Infobox state ✓ ✓ ✓ ✓ Did not port over on page CSS since "fit-content" is not supported in templatestyles
Template:Infobox school N/A ✓ ✓ ✓ Refer to note for Template:Infobox state
Template:Infobox user ✓ ✓ ✓ ✓ Refer to note for Template:Infobox state
Template:Infobox service X X X X
Template:Infobox volunteer organization X X X X
Template:Infobox invitational tournament N/A ✓ X X light and dark mode WCAG AA fails if top placement schools are link colors
Template:Infobox regional tournament X X X X light mode WCAG AA fails if top placement schools are link colors
Template:Infobox state tournament X X X X light mode WCAG AA fails if top placement schools are link colors
Template:Infobox national tournament ✓ ✓ X X light mode WCAG AA fails if top placement schools are link colors
Template:Infobox state regions X X X X
Template:Infobox school district X X X X
Template:Bird X X X X
Template:Tree X X X X
Navboxes (create more rows for individual templates)
Template:Navbox N/A ✓ ✓ Double check Imported updated module navbox from Wikipedia, and while Module:Navbox/styles.css exists, there was no immediate dark mode support. Both Wikipedia and MediaWiki make the navbar transparent.
Template:Staff Navbox X WIP X Fails Yellow text (#FEE372) on blue background (#2E66B6) fails WCGA AA and WCAG AAA for normal text: https://webaim.org/resources/contrastchecker/?fcolor=FEE372&bcolor=2E66B6
State tournament navigational boxes Template:Tournaments_of_<State> (create more rows for individual templates)
Results boxes (create more rows for individual templates)
Template:Invitational results box X X X X
Template:Regional results box X X X X
Template:State results box X X X X
Miscellaneous
Template:Scioly.org Sidebar N/A ✓ ✓ ✓ Pretty much uses Template:Sidebar's default styling
Template:Shortcut ✓ ✓ WIP WIP May want to check to see if only Codex colors can be used
Year Templates
Template:Events by year X X X ✓
Template:Nationals_Results X X X ✓
Template:2009 X X X ✓
Template:2010 X X X ✓
Template:2011 X X X ✓
Template:2012 X X X ✓
Template:2013 X X X ✓
Template:2014 X X X ✓
Template:2015 X X X ✓
Template:2016 X X X ✓
Template:2017 X X X ✓
Template:2018 X X X ✓
Template:2019 X X X ✓
Template:2020 X X X ✓
Template:2021 X X X ✓
Template:2022 X X X ✓
Template:2023 X X X ✓
Template:2024 X X X ✓
Template:2025 X X X ✓
Template:2026 X X X ✓
Retrieved from "https://scioly.org/w/index.php?title=Scioly.org:WikiProject_Dark_Mode&oldid=192473"