Reading/Web/Accessibility for reading/Reporting/la.wikisource.org

Template:Titulus in Dark mode

Currently on la.wikisource, when Dark mode is active, the Template:Titulus displays white text on a light background, thus rendering it illegible (see image at the end).

1) Wikimedia guidelines state that is necessary to always define text color when defining background color to avoid any similar issues.

2) Furthermore, a different background color should be defined for the "light on dark theme"; obviously it should target only dark mode.

The style of the Template:Titulus is defined in that wiki’s global CSS styles as follows:

/* style for header box of Template:Titulus */
.titulusHeaderBox {
    margin:1em auto;
    width:30em;
    border:1px solid #CCCC99;
    background:#F4F0E5;
    padding:2ex;
    text-align:center;
    line-heigth:1.2;
}

To account for the points explained above, it should be changed to the following (by an authorized user):

/* style for header box of Template:Titulus */
.titulusHeaderBox {
    margin:1em auto;
    width:30em;
    border:1px solid #CCCC99;
    background:#F4F0E5;
    color:black;
    padding:2ex;
    text-align:center;
    line-heigth:1.2;
}

/* light on dark theme style for header box of Template:Titulus */
@media screen and (prefers-color-scheme: dark) {
  .skin-theme-clientpref-night .titulusHeaderBox {
	background:#303026;
    color:white;
  }
}

For the background color I chose the same color as the light style, but with a darker value, and left the border untouched.

Here are the changed shown visually (accomplished by changing the CSS as above on the client side):

I hope this helps, SZC 03 (talk page) 06:40, 16 February 2025 (UTC)[reply]