Recently, I have created a community with Flarum and there was a problem with WelcomeBox when I turned on FoF Night Mode. Then I made a little tweak to fix it.
I added the following custom CSS codes, and now it's working fine. I thought it's better to share it with you all.
Change WelcomeBox color
Adding theme color to WelcomeBox, Thank you @ctupramod for giving me an idea about adding custom color.
// welcomebox
.item-welcomeBox .backgrwb {
background: fade(#2cb474, 10%);
}
.item-welcomeBoxGuest .backgrwbguest {
background: fade(#2cb474, 10%);
}
Change #2cb474 as you wish. .item-welcomeBox .backgrwb is for logged-in user and .item-welcomeBoxGuest .backgrwbguest is for guest user.
Changing font color when Dark mode turned on
But There was another problem, the font color. I want to change font color when someone turned on dark mode. Then I added the following CSS to configure font color for dark mode.
body when (@config-dark-mode = true) {
.textinfo {color:#fff}
.TagLabel.colored .TagLabel-text {
color: #fff !important;
}
.Button--primary {
color: #fff;
}
}
Bonus
You can use the following CSS code to changing styles in Dark mode.
body when (@config-dark-mode = true) {
CSS code
}
Add these codes through Appearance > Custom Styles. Thanks me later.
If you want a demo, please visit https://community.androidwedakarayo.com
