How to change the Switch to Darkmode text to a sun and moon icons on White Theme

Rafael [redcrested.net] Posted in Theme Development 1 year ago

enter image description here

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.

1) 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)

2) 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;
}

3) 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;
}

4) Upload the files to your server. If you have cache enabled, flush the cache.

Replies
jp Macib macib Replied 1 year ago

How to change? To learn how to screenshot on windows or an iPad, please see the page below. Use the Snipping Tool, Windows + Print Screen, or other tools or shortcuts, for example.

Breton Rafael [redcrested.net] Replied 1 year ago

@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

Breton Rafael [redcrested.net] Replied 1 year ago

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;
}