DEMO:
https://gsstyle.freeflarum.com/
Can be used(and maybe looks better) with dark mode.
In admin panel under appearance enable colored header.
For color themes used: RGB(12, 150, 165) and RGB(82, 126, 163).
Custom header(optional)
Administration>Appearance>Edit custom header
<nav class="navi" style="height:120px; background-color:#1098a6;">
<a href="#" class="navl">forum</a>
<div style="float:right; margin:20px 15px auto; display:inline;">
<a href="#" class="text"><button class="navb">Home</button></a>
<a href="#" class="text"><button class="navb">Forum</button></a>
<a href="#" class="text"><button class="navb">FAQ</button></a>
<a href="#" class="text"><button class="navb">Rules</button></a>
<a href="#" class="text"><button class="navb">Contact</button></a>
</div>
</nav>
<style>
@media (max-width: 900px){
.navi{
display:none!important;
}
}
.text{
color:#1098a6 !important;
}
.navb{
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
height:80px;
width:80px;
background-color:white!important;
border:none;
outline: none"
}
.navb:hover, .navl:hover{
background-color: #287a76 !important;
color: white;
}
.navl{
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
display:inline-block;
font-size: 45px;
text-decoration: none !important;
margin-left:30px;
margin-top:20px;
color:#1098a6;
background-color:white;
padding:5px;
height:85px;
</style>
CSS
Administration>Appearance>Edit custom CSS
body::-webkit-scrollbar {
width: 0.5em;
}
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: white;
}
body::-webkit-scrollbar-thumb {
background-color: #1098a6;
outline: 1px solid slategrey;
}
.Hero{
background-color: #287a76;
margin: 5px auto;
}
.Hero h2, .Hero-subtitle{
color:white !important;
}
.DiscussionListItem{
background-color:#1098a6;
padding-bottom: 5px;
margin-bottom: 7px;
border-radius:0px;
}
.DiscussionListItem:hover{
background-color:#287a76 !important;
}
.DiscussionListItem-title{
color:white !important;
}
.DiscussionListItem-info{
color: #fcfcfc !important;
}
.DiscussionListItem-count{
color: #fff !important;
}
.Post{
background-color: #429b97;
margin-bottom: 10px;
color: #fff !important;
border-radius:0px;
}
.Post-header, .Post-header a{
color: #9ed5db !important;
}
.DiscussionPage-list .DiscussionListItem-content{
margin-bottom:1px;
}
.Button{
color:#fff!important;
background-color: #429b97;
}
.Button:hover{
background-color: #287a76;
}
.DiscussionPage-list .DiscussionListItem-count{
margin-right: 2px;
}
For dark mode, first enable in Administration>Appearance dark mode and than change in header under .navb and .navl from background-color:white to background-color:#141a1f and in CSS from
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: white;
}
to
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #141a1f;
}
Dark mode screenshots:
