How to change the Switch to Darkmode text to a sun and moon icons on White Theme
Disclaimer: I'm using a modified version of White Theme 6.5. If you need to change something more to make this change works on your OSSN, leave a comment.
-
In the themes\WhiteTheme\ossn_theme.php file, replace the both ossn_print('darkmode:enable:darkmode'), for
'<i class="fas fa-sun me-0 p-0"></i><span class="m-0 p-0"></span><i class="fas fa-moon ps-0 ms-2"></i>',
Important: (don't forget the comma)
-
In the themes\WhiteTheme\plugins\default\css\core\default.php file, add >span on .menu-topbar-dropdown-darkmode[data-type="1"]:after and .menu-topbar-dropdown-darkmode[data-type="0"]:after. The CSS selector for both should look like this:
.menu-topbar-dropdown-darkmode[data-type="1"]>span:after {
content: "\f204";
font-family: 'Font Awesome 5 Free';
padding-left: 10px;
font-weight:900;
}
.menu-topbar-dropdown-darkmode[data-type="0"]>span:after {
content: "\f205";
font-family: 'Font Awesome 5 Free';
padding-left: 10px;
font-weight:900;
color: blue;
} -
Add the following CSS selector to make the sun icon in orange. This is optional and you can change the value if you like.
#theme-darkmode-btn .fas.fa-sun {
color: orange;
} -
Upload the files to your server. If you have cache enabled, flush the cache.
@Arsalan
Can you change the subject "White theme" for "Multi Purpose Theme" ? I didn't notice that the White Theme on code has the Multi Purpose Theme name
If you want to set a different color for the sun icon only in dark mode (green, as an example), add this CSS selector:
.white-darkmode #theme-darkmode-btn .fas.fa-sun {
color: green;
}
Due to the many requests in the past for additonal features and components we have decided to develope a premium version. Features like Hashtags, Videos, Polls, Events, Stories, Link Preview, etc included in it.
$199 (Life Time)
Learn More