search

Gernott / mask

TYPO3 Extension Mask
https://www.facebook.com/typo3mask
GNU General Public License v2.0
130 stars 86 forks source link

Add dark mode support #649

Closed nitori closed 5 days ago

nitori commented 6 days ago

Fixes #648

This adds dark mode support for mask in TYPO3 13.

Since the SCSS color variables where only few, and a lot of colors where actually hardcoded, I simply replaced them with CSS variables everywhere.

There where a few styles in the SCSS I could not link to specific areas in the Module, e.g. the icon picker, that seems to have been removed?

Anyway, here is a sample screenshot:

image

Greetings Nitori

nhovratov commented 6 days ago

Woow, nice!! Thank you ❤️

Yes, Icon Picker is removed since v12. You can remove the styling altogether.

nitori commented 6 days ago

I'll do that then.

There is also the .mask-shared-info class that has a white-ish background and blue border, but I couldn't identify where that is, as well as .form-switch.checkbox-invert .form-check-input:checked that has a white background, but it might not be relevant as it's only a checkbox (couldn't find it either).

I left those untouched.

nitori commented 6 days ago

Nvm. I found the latter in "select" type. image

nhovratov commented 6 days ago

.mask-shared-info: This could be the little blue icon at the bottom left of a field, when fields are shared between elements.

nitori commented 6 days ago

That doesn't seem to be the case. That one uses mask-field__multiuse. Which is just an inline svg icon.

I tried to make that one brighter actually, but it doesn't seem to work with CSS variables. At least not in Chrome as far as I could find out - so I left it as it is.