Dark Mode

ar33bshola

https://yetikyachalan.flarum.cloud/

I use the night mode extension but its causing problems and few items arent visible? Can you help me pleeaasse.

ar33bshola

title is dark, buttons are ark icons are dark so plz

esymeo

ar33bshola CSS will help you!

.App-header .Button, .App-header .Button:hover /*icons in the header*/
{ color: #hex-code_of_the_color_you_want !important; }

.App-header, .App-header a /*name of the forum*/
{ color: #hex-code_of_the_color_you_want !important; }

If you want icons and name of the form same color, do this:

.App-header .Button, .App-header .Button:hover, 
.App-header, .App-header a 
{ color: #hex-code_of_the_color_you_want !important; }

❗This will change the colors in your light theme as well. So, my advice is to use universal colors, like light grey or white, that will look OK in both themes OR I there is also an option to use “var” instead of hex-codes. But is is more complicated to do if you do not know css well.

Hope you know where you should write you css-code… If not, let me know, I will show to you.

ar33bshola

i used #808080. but few problems are still there

esymeo

ar33bshola Yes, because there are different css-selectors. What I wrote was only for header.

So, I think now it should be something like this:

.App-header .Button, .App-header .Button:hover, /*icons in the header*/ 
.App-header, .App-header a, /*name of the forum*/
.IndexPage-nav .item-newDiscussion .Button, /*start discussion*/
.sideNav .Dropdown--select .Dropdown-menu>li.active>a,  /*all discussion*/
.sideNav .Dropdown--select .Dropdown-menu>li>a:hover /*button when we hover on*/
{ color: #808080 !important; }

Changes color for header, start discussion button, button when we hover on and all discussion.

ar33bshola

the start a discussion button, button when we hover on it or the tag we are in at the sidebar is like the above img