Add Wikipedia's own Dark Mode solution

[Jaifroid]

Wikipedia now has a native Dark Mode. See https://diff.wikimedia.org/2024/07/17/dark-modes-bright-future-how-dark-mode-will-transform-wikipedias-accessibility/. If it is possible to export a generic CSS file containing all the CSS required, it would be fairly easy to integrate this into our current Dark Mode solution, which is also CSS based.

This could then be applied downstream in the PWA.

[harikrishna-au]

@Jaifroid I checked the app.css file and found the dark theme styles. Should I replace the Kiwix dark theme styles with the following Wikipedia dark theme styles?html.skin-theme-clientpref-night { color-scheme: dark; --color-base: #eaecf0; --color-base--hover: #f8f9fa; --color-emphasized: #f8f9fa; --color-subtle: #a2a9b1; --color-disabled: #54595d; --color-disabled-emphasized: #72777d; --color-inverted: #101418; --color-progressive: #88a3e8; --color-progressive--hover: #b0c1f0; --color-progressive--active: #cbd6f6; --color-destructive: #fd7865; --color-destructive--hover: #fea898; --color-destructive--active: #ffc8bd; --color-visited: #a799cd; --color-visited--hover: #c5b9dd; --color-visited--active: #d9d0e9; --color-destructive--visited: #c99391; --color-destructive--visited--hover: #dcb5b3; --color-destructive--visited--active: #e8cecd; --color-error: #fd7865; --color-error--hover: #fea898; --color-error--active: #ffc8bd; --color-warning: #ca982e; --color-success: #2cb491; --color-notice: #a2a9b1; --color-content-added: #80cdb3; --color-content-removed: #fd7865; --color-base--subtle: #a2a9b1; --box-shadow-color-base: #fff; --box-shadow-color-progressive--focus: #6485d1; --box-shadow-color-progressive-selected: #88a3e8; --box-shadow-color-progressive-selected--hover: #b0c1f0; --box-shadow-color-progressive-selected--active: #cbd6f6; --box-shadow-color-destructive--focus: #6485d1; --box-shadow-color-inverted: #000; --mix-blend-mode-blend: screen; --background-color-base: #101418; --background-color-neutral: #27292d; --background-color-neutral-subtle: #202122; --background-color-interactive: #27292d; --background-color-interactive--hover: #404244; --background-color-interactive--active: #54595d; --background-color-interactive-subtle: #202122; --background-color-interactive-subtle--hover: #27292d; --background-color-interactive-subtle--active: #404244; --background-color-disabled: #404244; --background-color-disabled-subtle: #27292d; --background-color-inverted: #f8f9fa; --background-color-progressive--focus: #6485d1; --background-color-progressive-subtle: #1b223d; --background-color-progressive-subtle--hover: #233566; --background-color-progressive-subtle--active: #3056a9; --background-color-destructive--focus: #6485d1; --background-color-destructive-subtle: #3c1a13; --background-color-destructive-subtle--hover: #612419; --background-color-destructive-subtle--active: #9f3526; --background-color-error-subtle: #3c1a13; --background-color-error-subtle--hover: #612419; --background-color-error-subtle--active: #9f3526; --background-color-warning-subtle: #2d2212; --background-color-success-subtle: #13282A; --background-color-notice-subtle: #27292d; --background-color-content-added: #233566; --background-color-content-removed: #453217; --background-color-backdrop-light: rgba(0, 0, 0, 0.65); --background-color-backdrop-dark: rgba(255, 255, 255, 0.65); --border-color-base: #72777d; --border-color-subtle: #54595d; --border-color-muted: #404244; --border-color-interactive--hover: #a2a9b1; --border-color-interactive--active: #c8ccd1; --border-color-disabled: #54595d; --border-color-inverted: #101418; --border-color-progressive--hover: #88a3e8; --border-color-progressive--active: #b0c1f0; --border-color-progressive--focus: #6485d1; --border-color-destructive--hover: #fd7865; --border-color-destructive--active: #fea898; --border-color-destructive--focus: #6485d1; --border-color-error--hover: #fd7865; --border-color-error--active: #fea898; --border-color-content-added: #233566; --border-color-content-removed: #987027; }