Ocean style

Razor

Screenshot:

Demo:
https://style6.freeflarum.com/

Administration>Appearance:
-Color:
First white, second black.

-Enable: Dark Mode

-Edit Custom Header:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).scroll(function() {
if ($(document).scrollTop() > 10) { 
$(".App-header").css("background", "rgba(0, 0, 0, 0.9)");
} 
else {
$(".App-header").css("background", "transparent");
}
});
});
</script>


<div class="tc">
<button class="tcb"><i class="fa fa-cog" aria-hidden="true"></i></button>
</div>
<div class="themes">
<button class="default">Default</button>
<button class="theme1">Theme 1</button>
<button class="theme2">Theme 2</button>
<button class="theme3">Theme 3</button>
<button class="theme4">Theme 4</button>
</div>
<style>
.tc{

}
.tcb{
width:36px;
height:36px;
right:0;
margin-right:5px;
position:fixed;
border-radius:4px;
z-index:100000;
margin-top:7px;
}
.themes{
display:none;
background: #1a1a1a;
width: 110px;
height: 140px;
text-align: center;
line-height: 2;
position: fixed;
right: 0;
top: 45px;
z-index: 100000;
border-radius:4px;
}
.themes>button{
border:none !important;
}
.themes>button:focus, .tcb:focus{
outline:0;
}
@media screen and (max-width:768px){
.tc{
display:none;
}
}
</style>
<script>
$(document).ready(function(){
    $(".tcb").click(function(){
        $(".themes").toggle();
});
    $(".default").click(function(){
$('body').css("background", "linear-gradient(#1d4350, #a43931)");
});
    $(".theme1").click(function(){
$('body').css("background", "linear-gradient(#093028, #237a57)");
});
    $(".theme2").click(function(){
$('body').css("background", "linear-gradient(#43cea2, #185a9d)");

});
    $(".theme3").click(function(){
$('body').css("background", "linear-gradient(#141e30, #243b55)");
});
    $(".theme4").click(function(){
$('body').css("background", "linear-gradient(#aa076b, #61045f)");
});
});
</script>

-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: black;
}
 
body::-webkit-scrollbar-thumb {
background: lightgray;
outline: 1px solid slategrey;
}
body{
 background: linear-gradient(#1D4350,#A43931);
}
.Hero {
background: rgba(0, 0, 0, 0.4);
color: white;
}


@media screen and (min-width:768px){
h1, a, h3{
color:white !important;
}

.App-header{
background:transparent;
transition:0.4s;
}

.App:before{
display:none;
}
.App-content{
border:none;
}
div#admin-navigation{
background:transparent;
border-top:none;
border-right:1px solid white;
box-shadow: none;
}
.Scrubber-handle{
background:none;
}
.Search-input input{
background:transparent;
border:1px solid white;
}
button{
color:white !important;
background:transparent !important;
border:1px solid white !important;
}
button:hover{
opacity:0.5;
transition:0.5s;
}
button.Dropdown-toggle.Button.Button--user.Button--flat, button.Dropdown-toggle.Button.Button--flat, button.Button.Button--link, .Dropdown-menu>li>button.hasIcon{
border:none !important;
}
.DiscussionListItem-count{
color:white;
}
header.Post-header{
color:#cacaca !important;
}
}
@media (max-width: 767px){
.Dropdown .Dropdown-menu>.active>a, .Dropdown .Dropdown-menu>.active>button, .Dropdown .Dropdown-menu>.active>a:hover, .Dropdown .Dropdown-menu>.active>button:hover {
color: #000 !important;
}
.App-content{
background:transparent;
}
}

Looking forward for feedback. I hope u liked this style.

Pollux

Razor -Edit Custom Header:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).scroll(function() {
if ($(document).scrollTop() > 10) { 
$(".App-header").css("background", "rgba(0, 0, 0, 0.9)");
} 
else {
$(".App-header").css("background", "transparent");
}
});
});
</script>

You can skip the whole Javascript part above.

Flarum comes with an extra class called scrolled which is attached to the <div id="app"> element once the page is somewhat scrolled down. To change the background of your .App-header (or #header as I prefer accessing IDs if available and feasable) you could therefore resort to this CSS only solution:

#header {
    background: transparent;
}
#app.scrolled #header {
    background: rgba(0, 0, 0, 0.9);
}

Pollux

Razor

Or, as you have the .App-headeralready in your CSS:

.App-header{
    background:transparent;
    transition:0.4s;
}

... and sticking to .App-header instead of #header, you could simply add this to your CSS:

#app.scrolled .App-header {
    background: rgba(0, 0, 0, 0.9);
}

instead of your Javascript added to the Custom Header.

Felli

I like the style, although it looks to be more of a sunrise than an ocean. ?

Razor

Felli
Depends on how u look at that ?

Razor

Pollux
I prefer using classes instead of ids, when it is possible.
Going to test this tomorrow, and probably update the first post. This is definitely more efficient.
Thank you, didn't know there is built in class for that.

Glombersik

Good job BRO ?

Razor

Glombersik
Thank you, i appreciate that a lot.

0E800

Razor
It looks really nice man.

Possibly you could allow for the mobile view to also be themed?

Razor

0E800
I am planning on update which will include a themed mobile view. Right now it would break a usability.
Probably next or at the end of this week, i will update a code.
Thank you for feedback and i am glad u like how it looks.

0E800

Razor
Played a little with your theme:

Styled some elements.

My css is really messy and I am still not done.

Demo:
https://forum.freeflarum.com/

Code so far:

body {
 background: linear-gradient(#1D4350, #A43931);
}

.div#admin-navigation {
border-right: 1px solid rgba(255,255,255, .3);
}

.Dropdown-menu>li.active>a .Dropdown-menu>li.active>button {
background: linear-gradient(transparent,rgba(0,0,0,0.32));

}

.disabled .Scrubber-bar {
background: linear-gradient(#A43931, #1D4350);
}

.paneShowing .DiscussionPage-list {
 background: linear-gradient(#1D4350, #A43931);
border: 1px solid rgba(255,255,255, .3);
}

.ReplyPlaceholder {
border: none;
}

.Search:focused .Search.focused {
background-color: transparent !important;
}

.FormControl:focus,.FormControl.focus {
background-color: transparent !important;
border-color: #eee;
}

header.Hero.DiscussionHero.DiscussionHero--colored {

opacity: 0.3;
background-color: linear-gradient(#1D4350, #A43931) !important;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
padding: 0px 5px 0px 10px;
margin-bottom: 5px;
}

.Dropdown-menu,.Search-results {
background: linear-gradient(#A43931,rgba(0,0,0,0.12));
border: 1px solid rgba(0,0,0,0.52);
}

.Dropdown-menu>li>a:hover,.Dropdown .Dropdown-menu>li>button:hover {
background: linear-gradient(#A43931,rgba(0,0,0,0.82));

}

.sideNav .Dropdown--select .Dropdown-menu>li.active>a {
padding: 10px;
background: transparent;
border-bottom: 1px solid rgba(255,255,255, 0.42);
}

.Composer.active:not {
box-shadow: none !important;
}

.Composer {
background: linear-gradient(rgba(0,0,0,0.62),rgba(0,0,0,0.12));
box-shadow: none !important;
}
.Composer.minimized.visible {
background: linear-gradient(rgba(0,0,0,0.62),rgba(0,0,0,0.12));
}

.Composer.normal.visible {
background: linear-gradient(rgba(0,0,0,0.62),rgba(0,0,0,0.12));
}
.Composer:normal {
background: linear-gradient(rgba(0,0,0,0.62),rgba(0,0,0,0.12));
}

.Composer:active {
background: linear-gradient(rgba(0,0,0,0.62),rgba(0,0,0,0.12));
box-shadow: none !important;
}
.Composer:focus {
background: linear-gradient(rgba(0,0,0,0.62),rgba(0,0,0,0.12));
}

.Composer:hover {
background: linear-gradient(rgba(0,0,0,0.62),rgba(0,0,0,0.12));
}
//CSS FOR MAX WIDTH 1100px
@media (min-width: 1100px){


.PostStream-item{

box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
padding: 0px 5px 0px 10px;
margin-bottom: 5px;
}
.PostsUserPage-list>li{

box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
padding: 0px 5px 0px 10px;
margin-bottom: 5px;
}
.DiscussionListItem{
  background: linear-gradient(transparent,rgba(0,0,0,0.12));
border-bottom: 1px solid rgba(0,0,0,0.62);
}

.DiscussionListItem:active {
background: linear-gradient(transparent,rgba(0,0,0,0.31));
border-bottom:1px solid rgba(0,0,0,0.62);}
.DiscussionListItem:hover {
background: linear-gradient(transparent,rgba(0,0,0,0.31));
border-bottom:1px solid rgba(0,0,0,0.62);}

.Dropdown-menu {
background: linear-gradient(rgba(0,0,0,0.62),rgba(0,0,0,0.12));
}

.Dropdown-menu>li.active>a .Dropdown-menu>li.active>button {
background: linear-gradient(transparent,rgba(0,0,0,0.32));

}


.Dropdown-menu>li>a:hover,.Dropdown .Dropdown-menu>li>button:hover {
background: linear-gradient(transparent,rgba(0,0,0,0.32));
}

.Composer:visible {
background: linear-gradient(rgba(0,0,0,0.62),rgba(0,0,0,0.12));
}
.Composer:normal {
background: linear-gradient(rgba(0,0,0,0.62),rgba(0,0,0,0.12));
}

.Composer:active {
background: linear-gradient(rgba(0,0,0,0.62),rgba(0,0,0,0.12));
}
.Composer:focus {
background: linear-gradient(rgba(0,0,0,0.62),rgba(0,0,0,0.12));
}

.Composer:hover {
background: linear-gradient(rgba(0,0,0,0.62),rgba(0,0,0,0.12));
}


}
//CSS for Buttons
.Button--flat {
background: none !important;
}
.Button{
border-radius: 2px;
}
//CSS FOR MAX WIDTH 1099px
@media (max-width: 1099px) and (min-width: 676px){
.IndexPage .container{

box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2)
}
.PostStream-item{

box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
padding: 0px 5px 0px 10px;
margin-bottom: 5px;
}
.PostsUserPage-list>li{

box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
padding: 0px 5px 0px 10px;
margin-bottom: 5px;
}
.DiscussionListItem{
border-bottom:1px solid rgba(0,0,0,0.62);
}
}

//CSS FOR MAX WIDTH 675px
@media (max-width: 675px){
.IndexPage .container{
background: #ffffff;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
margin-left: 5px;
margin-right: 5px;
}
.PostStream-item{

box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
margin: 0px 5px 5px 5px !important;
}
.PostsUserPage-list>li{

box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
padding: 0px 5px 0px 10px;
margin-bottom: 5px;
}
.DiscussionListItem{
border-bottom:1px solid #e9e9e9;
}
}



//CSS for Primary Button

.DiscussionHero .TagsLabel .TagLabel{
border-radius: 2px !important;
}
.TagsLabel .TagLabel:first-child:last-child{
border-radius: 2px;
}


.Button--primary {
 
  text-align: center;
  text-decoration: none;
 
opacity: .8;
  
  
  display: inline-block;
 
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  position: relative;
  overflow: hidden;
}

.Button--primary:before {
   content: "";
  background-color: rgba(255, 255, 255, 0.5);
color: #ce8483;
border: #eee;
  height: 100%;
  width: 3em;
  display: block;
  position: absolute;
  top: 0;
  left: -7em;
  -webkit-transform: skewX(-45deg) translateX(0);
          transform: skewX(-45deg) translateX(0);
  -webkit-transition: none;
  transition: none;
}


.Button--primary:hover {

opacity: 1;
  color: white;
 
}

.Button {
color: white !important;
background: linear-gradient(rgba(0,0,0,0.62),rgba(0,0,0,0.12));

} 

button {
color: white !important;
background: linear-gradient(transparent,rgba(0,0,0,0.12));
border: 1px solid #e9e9e9;
} 


.Button--primary:hover:before {
  -webkit-transform: skewX(-45deg) translateX(33em);
          transform: skewX(-45deg) translateX(33em);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

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: black;
}
 
body::-webkit-scrollbar-thumb {
background: linear-gradient(#A43931,#1D4350);
outline: 1px solid slategrey;
}


body {
 background: linear-gradient(#1D4350, #A43931);
}

@media screen and (min-width:768px){
h1, a, h3{
color:white !important;
}

.App-header{
background:transparent;
transition:0.4s;
}

.App:before{
display:none;
}
.App-content{
border:none;
}
div#admin-navigation{
background:transparent;
border-top:none;
border-right:1px solid white;
box-shadow: none;
}
.Scrubber-handle{
background:none;
}
.Search-input input{
background:transparent;
border:1px solid white;
}
.Hero {
background: rgba(0, 0, 0, 0.4);
color: white;
}

button:hover{
opacity:0.5;
transition:0.5s;
}
button.Dropdown-toggle.Button.Button--user.Button--flat, button.Dropdown-toggle.Button.Button--flat, button.Button.Button--link, .Dropdown-menu>li>button.hasIcon{
border:none !important;
}

body {
 background: linear-gradient(#1D4350, #A43931);
}
.Dropdown-menu {
background: linear-gradient(rgba(0,0,0,0.62),rgba(0,0,0,0.12));
}

.Dropdown-menu>li.active>a .Dropdown-menu>li.active>button {
background: linear-gradient(transparent,rgba(0,0,0,0.32));

}


.Dropdown-menu>li>a:hover,.Dropdown .Dropdown-menu>li>button:hover {
background: linear-gradient(transparent,rgba(0,0,0,0.32));
}

.Composer {
background: linear-gradient(rgba(0,0,0,0.62),rgba(0,0,0,0.12));
}

.Composer:visible {
background: linear-gradient(rgba(0,0,0,0.62),rgba(0,0,0,0.12));
}
.Composer:normal {
background: linear-gradient(rgba(0,0,0,0.62),rgba(0,0,0,0.12));
}

.Composer:active {
background: linear-gradient(rgba(0,0,0,0.62),rgba(0,0,0,0.12));
}
.Composer:focus {
background: linear-gradient(rgba(0,0,0,0.62),rgba(0,0,0,0.12));
}

.Composer:hover {
background: linear-gradient(rgba(0,0,0,0.62),rgba(0,0,0,0.12));
}
}

@media (max-width: 767px){

.IndexPage .container {
background: transparent;
}

.App-content{
background: transparent;
}

.Dropdown .Dropdown-menu>.active>a, .Dropdown .Dropdown-menu>.active>button, .Dropdown .Dropdown-menu>.active>a:hover, .Dropdown .Dropdown-menu>.active>button:hover {
color: #000 !important;
}

body {
 background: linear-gradient(#1D4350, #A43931);
}
.Dropdown-menu {
background: linear-gradient(rgba(0,0,0,0.62),rgba(0,0,0,0.12));
}

.Dropdown-menu>li.active>a .Dropdown-menu>li.active>button {
background: linear-gradient(transparent,rgba(0,0,0,0.32));

}


.Dropdown-menu>li>a:hover,.Dropdown .Dropdown-menu>li>button:hover {
background: linear-gradient(transparent,rgba(0,0,0,0.32));
}

.Composer {
background: linear-gradient(rgba(0,0,0,0.62),rgba(0,0,0,0.12));
}

.Composer:visible {
background: linear-gradient(rgba(0,0,0,0.62),rgba(0,0,0,0.12));
}
.Composer:normal {
background: linear-gradient(rgba(0,0,0,0.62),rgba(0,0,0,0.12));
}

.Composer:active {
background: linear-gradient(rgba(0,0,0,0.62),rgba(0,0,0,0.12));
}
.Composer:focus {
background: linear-gradient(rgba(0,0,0,0.62),rgba(0,0,0,0.12));
}

.Composer:hover {
background: linear-gradient(rgba(0,0,0,0.62),rgba(0,0,0,0.12));
}
}

To fix the mobile just add under
@media (max-width: 767px){

.IndexPage .container {
background: transparent;
}

.App-content{
background: transparent;
}

Thanks again for sharing, it helps me to figure out all the nifty css tricks to customizing Flarum.

Razor

0E800
Feel free to customize style however u like. U can make ur code shorter by grouping classes which share same attributes.
If u need any help about customizing flarum, feel free to ask for help.
For mobile view, i think there is a reason why i didn't include that part of code, not actually sure right now, as i am not home.

Razor

Code updated.
Added
Mobile view themed
-Mobile view is now also themed.
Themes
-Users can choose between few themes(color schemes for this particular style).
Fixed some minor bugs.
Looking forward for feedback and i hope u liked this style.