amirho/expressjs.com
1
0
Fork 0
mirror of https://github.com/expressjs/expressjs.com.git synced 2026-02-22 03:51:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat - add icon in toggle theme (#1532)

Browse Source 
* feat - add icon in toggle theme

* feat- add new sun icon
This commit is contained in:
Carlos Stenzel
2024-07-03 16:58:27 -03:00
committed by GitHub
parent 3a5e90ae35
commit 523b10b53d
3 changed files with 30 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
_includes/header/header-en.html
View File

@@ -153,8 +153,11 @@
</li>
-->
</ul>
<div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
<i class="fa fa-moon-o fa-2x"></i>
</div>
<div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
<i class="fa fa-moon-o fa-lg hidden-dark"></i>
<span class="sun-icon hidden-light"></span>
<!--<i class="fa fa-sun-o fa-lg hidden-light"></i>-->
</div>
</div>
</header>

24
css/dark-theme.css
View File

@@ -15,6 +15,30 @@
min-width: 50px;
color: black;
}
#theme-icon-container i {
cursor: pointer;
line-height: 30px;
}
#theme-icon-container .hidden-light {
display: none;
}
.sun-icon {
background-image: url(/images/sun-icon.png);
background-size: 100%;
background-repeat: no-repeat;
width: 27px;
height: 27px;
cursor: pointer;
}
#theme-icon-container .hidden-dark {
display: block;
}
html.dark-mode #theme-icon-container .hidden-light {
display: block;
}
html.dark-mode #theme-icon-container .hidden-dark {
display: none;
}
html.dark-mode #theme-icon-container {
color: var(--dark_text);
background-color: var(--second_dark_bg);

BIN
images/sun-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 802 B