This will ultimately be a user controllable theme, just wanted to get some input on color scheme.

Forum home:

Forum post:

Admin area:

Demo:
https://forum.freeflarum.com

Paste into Custom CSS in Appearance options.

html {

*,
* *{
    color:#94aacd !important;
background-color: transparent !important;    
background-color: #222e41;
    border-color:#485974 !important;
    box-shadow: none;
}

&, #header {

  color: #dee5e1 !important;
   background-color:transparent !important;
    background-color: #222e41 !important;
    border-color:#485974 !important;
    box-shadow: none !important;
}

.Composer-content {
    background: #222e41 !important;
border-top: 2px solid #485974 !important;
}

.DiscussionPage-list {
background-color: #222e41 !important;
background: #222e41 !important;
border-top: 1px solid rgba(0, 0, 0, 0.2) !important; 
border-radius: 6px;
}

.TagDiscussionModal .Modal-footer {
background: #222e44 !important;
}

.SelectTagList {

background: #222e44 !important;
}


.Button--user .Button--flat {
border: 1px solid #eee !important;

}


.UserCard{
    background:  #222e41 !important;
    background-size:100% 100%;
}
.UserCard,.UserCard a{
    color:#fff
}
.UserCard .Button--link,.UserCard .Search-input{
    color:#fff
}
.UserCard .FormControl{
     background:  #222e41 !important;
background-color: #222e41 !important;
}

.UserCard--popover{
    width:500px;
    -webkit-box-shadow:0 2px 6px rgba(0,0,0,0.35) !important;
    box-shadow:0 2px 6px rgba(0,0,0,0.35) !important;
background-color: #222e41 !important;
}
.UserCard--popover,.UserCard--popover .darkenBackground{
    border-radius:4px
 background:  #222e41 !important;
background-color: #222e41 !important;
}
.UserCard--popover .container{
    width:auto !important;
    padding:20px !important;
background-color: #222e41 !important;

}
.UserCard--popover .UserCard-identity{
    font-size:22px;
background-color: #222e41 !important;

}


.Badge {
background-color: #485974 !important;
}

fieldset button {
border: 1px solid rgba(255,255,255,0.1) !important;
opacity: .8;
}

fieldset button:hover {
border: 1px solid rgba(255,255,255,0.3) !important;
opacity: 1.3;
}


.Avatar {
border: 1px solid rgba(255,255,255,0.3) !important;
}

.AlertManager .Alert  {
background-color: #222e44 !important;
border: 1px solid rgba(255,255,255,0.3) !important;
}

.Modal-content {
background-color: #222e44 !important;
}
.Modal-header {
background-color: #222e44 !important;
}

.Modal-body {
background-color: #222e44 !important;
}

h1,h2,h3,h1 *,h2 *,h3 *{
	color:#3ab3fe !important;
	font-weight: 700 !important;
	background-color: transparent !important;
}
.App-nav .AdminNav .Dropdown-menu>li.active>a .Button-label, .App-nav .AdminNav .Dropdown-menu>li.active>a .Button-icon, nav, .navitems, .navi, .nav, .footer, footer, header, .header{
	background: #222e41 !important;
}
img{
	-webkit-filter:brightness(0.6) !important;
}


.Checkbox--switch .Checkbox-display {
box-shadow: 0 0 1px rgba(0, 0, 0, 0.1), inset 0 0 1px transparent !important;
  background: linear-gradient(to left, transparent, rgba(62, 79, 103, 0.5), transparent) !important;	
	
}
.on.Checkbox--switch .Checkbox-display {
 background: #1b2028 !important;
}
.on.Checkbox--switch .Checkbox-display:before {
	left: 25px
}
.Checkbox--switch .Checkbox-display:before {
	content: ' ';
	background: slategray !important;
	border-radius: 11px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}


.DiscussionList-loadMore .Button {
background: rgba(255,255,255,0.3);
	border-radius: 5px;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.1), inset 0 0 1px transparent !important;
transition: all .5s ease;

}

.DiscussionList-loadMore .Button:hover:before {
	width: 100%;
}


.DiscussionList-loadMore .Button:hover {
background: rgba(0,0,0,0);
	color: #485974;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.4), inset 0 0 5px  #485974 !important;
border: 1px solid #485974 !important;
}


.DiscussionList-loadMore .Button:active {
background: rgba(0,0,0,0);
        color: #485974;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.4), inset 0 0 5px  #485974 !important;
border: 1px solid #485974 !important;
}




.TagLabel.colored .TagLabel-text {
 color: #3ab3fe !important;
opacity: .7;
}


.IndexPage-toolbar-view, .IndexPage-toolbar-action {
box-shadow: 0 0 10px rgba(46, 60, 84, 0.6), inset 0 0 1px transparent !important;
  background: linear-gradient(to right, transparent, rgba(62, 79, 103, 0.1), transparent) !important;

}

.DiscussionPage-stream {
background: #222e41 !important;
}


.Dropdown-menu>li>a:hover {
text-decoration: underline;
box-shadow: 0 0 1px rgba(46, 60, 84, 0.1), inset 0 0 1px transparent !important;
  background: linear-gradient(to right, transparent, rgba(62, 79, 103, 0.2), transparent) !important;

}


.Dropdown .Dropdown-menu>.active>a,.Dropdown .Dropdown-menu>.active>button,.Dropdown .Dropdown-menu>.active>a:hover,.Dropdown .Dropdown-menu>.active>button:hover .dropdown-menu>li>a:hover {
box-shadow: 0 0 1px rgba(46, 60, 84, 0.1), inset 0 0 1px transparent !important;
  background: linear-gradient(to right, transparent, rgba(62, 79, 103, 0.2), transparent) !important;
}

.DiscussionListItem:hover {
box-shadow: 0 0 1px rgba(46, 60, 84, 0.2), inset 0 0 1px transparent !important;
  background: linear-gradient(to right, transparent, rgba(62, 79, 103, 0.3), transparent) !important;
	}


.sideNav .Dropdown--select .Dropdown-menu>li>a {

  transition: background 0.5s cubic-bezier(.33,.66,.66,1) !important;
}


.sideNav .Dropdown--select .Dropdown-menu>li>a:hover {
 box-shadow: 0 0 1px rgba(46, 60, 84, 0.1), inset 0 0 1px transparent !important;
  background: linear-gradient(to right, transparent, rgba(62, 79, 103, 0.2), transparent) !important;
}








.DiscussionPage-list .DiscussionListItem.active {
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 2px;
        -webkit-transition: border-color .15s, background .15s;
        -o-transition: border-color .15s, background .15s;
        transition: border-color .15s, background .15s;
        -webkit-appearance: none;
}

.Post undefined .CommentPost {
background: #222e41 !important;
}
 


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

.Button--primary {
border: 1px solid rgba(255,255,255,0.1) !important;
  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 {
border: 1px solid rgba(255,255,255,0.1) !important; 
  content: "";
  background-color: rgba(255, 255, 255, 0.5) !important;
  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;

}

.SubscriptionMenu-button--false {
border: 1px solid rgba(255,255,255,0.1) !important;
  text-align: center;
  text-decoration: none;
}


.SubscriptionMenu-button--follow: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;
}

.SubscriptionMenu-button--follow {
border: 1px solid rgba(255,255,255,0.1) !important;
  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;
}

.SubscriptionMenu-button--follow:before {
border: 1px solid rgba(255,255,255,0.1) !important;
  content: "";
  background-color: rgba(255, 255, 255, 0.5) !important;
  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;
}

.SubscriptionMenu-button--follow: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;
}

.SubscriptionMenu-button--follow:hover {

opacity: 1;
  color: white;

}



.SettingsPage .Button {
box-shadow: 0 0 10px rgba(107, 131, 168, 0.4), inset 0 0 1px transparent !important;
background-image: linear-gradient(to right, transparent, rgba(62, 79, 103, 0.3), transparent) !important;
background-position: 0 4rem;
  background-size: 1px 1px;
  background-repeat: repeat-x;
  font-size: 1em;
  text-decoration: none;
  transition: all 210ms ease-out;
}
.SettingsPage .Button:hover, .SettingsPage .Button:focus {
background-image: linear-gradient(to top, transparent, rgba(62, 79, 103, 0.3), transparent) !important;
  background-position: 0 0;
  background-size: 100% 100%;
  border-radius: 5px;
  color: #fefefe;
}
.SettingsPage .Button:active {
background-image: linear-gradient(to bottom, transparent, rgba(62, 79, 103, 0.3), transparent) !important;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2), inset 0 0 1px transparent !important;
  border-radius: 5px;
}


 .UserPage .UserCard-controls {
box-shadow: 0 0 3px rgba(107, 131, 168, 0.2), inset 0 0 1px transparent !important;
background-image: linear-gradient(to right, transparent, rgba(62, 79, 103, 0.2), transparent) !important;
  border-radius: 5px;
}






.Dropdown-menu>.Scrubber {
border: 10px solid #222e41 !important; 
}
.Scrubber-handle{
border-left: 1px groove rgba(255,255,255,0.1) !important;
}

.disabled .Scrubber-bar {
 border: 10px solid #222e41 !important;
}

.Dropdown-menu {
border: 1px solid rgba(255,255,255,0.1) !important;
background:  #222e41 !important;
background-color: #222e41 !important;
}

.sideNav .Dropdown--select .Dropdown-menu {
border: 1px solid #222e41 !important;
}







code, kbd, pre, samp {

    color: #BDC6C1 !important;
background: rgba(0,0,0,0.52) !important;
}

.Post-body pre {
 
   


}

.Post-body code {

padding: 3px;
}

.PostMention, .UserMention {
background: rgba(66, 103, 153, .8);
color: white;
}



.tooltip * {
color: #eee !important;
background-color:rgba(0,0,0,0.9) !important;


}
}

@media (max-width: 767px) {
.App-drawer {
background-color: #222e41 !important;
}
}
0E800 changed the title to [WIP]Blue Night style .

Great choice of colors, I can see why @Kyrne wants you as our "style" expert ?

Whilst I've never been a fan of dark colour schemes, I do like this one. Blues are just my preferred colour scheme regardless so I may be a bit bias. ?

Nice looking, love the choice of colors.
One suggestion, next time try to make ur code shorter by grouping elements and achieving what u want with less code.

Great work, liked the use of blue. Just found this small style issue, have a look at it as you get free.

    Thank you gurjyot

    I need to remove the transparency from the side post area.
    Ill update the code soon.

    Update: gurjyot

    Add this code to fix the transparent Discussion-list background:

    
.DiscussionPage-list {
background-color: #222e41 !important;
background: #222e41 !important;
border-top: 1px solid rgba(0, 0, 0, 0.2) !important; 
border-radius: 6px;
}

    I updated the original post to include new code addition.

    Review change:

        7 months later

        Thank you @0E800 This is awesome! May I ask how did you keep the header banners on keys-daggers, as well as using your own image? Is it an HTML/CSS customization or? Any help will be much appreciated!

          user1993

          Yeah, there is alot of custom css. I am not certain what you are speaking of, but I can share whatever customs you like.
          Apologies, I have been absent for some time with personal demons, I will try to be more prompt at responding.

          If you can show an image of what you are referring too I will understand more.

              0E800 Thanks for the reply! I really like the sticky header image you have, as well as the rectangular transparent backgrounds behind the texts. (Worst possible way to explain things, excuse me).

              Would be grateful if you could share the CSS code for that. I will customize it.

                  user1993

                  .WelcomeHero,
.UserHero,
.Hero {
  background: url(IMAGE-URL) repeat center center !important;
  text-align: center;
  color: #fff;
  padding-bottom: 16px;
}

                  I've not played around with the CSS of Flarum in a while though, I'm pretty sure I remember hearing that Hero banners were going to be removed in the future of Flarum.

                      Felli yes you are right. That is scheduled for beta 0.9.

                        user1993

                        This part right here applies the image to the header.

                        .Hero{
margin-top: -1px;
background: url("https://i.imgur.com/OyRAJDJ.png") no-repeat center center fixed;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
background-position: 0 0 !important;
text-align: center;
color: #FFFFFF;
text-shadow: 0 0 2px #000;
opacity: 0.68
}

                        This part right here adds the transparent background whatever behind the header text.

                        .DiscussionHero-title,.Hero-title,.Hero-subtitle,.PageHero-title > a{
background-color: rgba(0,0,0,0.3);
padding: 5px;
margin: 0px
}

.PageHero-title > a{
color: #FFFFFF;
border-radius: 2px
}

.PageHero-title > a:link{
text-decoration: none
}

.Hero-title{
border-radius: 2px 2px 0px 0px
}

.Hero-subtitle{
border-radius: 0px 0px 2px 2px
}

.DiscussionHero-title{
border-radius: 2px
}

                        This part right here hides the "X" that a user would be tempted to click to remove the header.

                        .Hero-close{
display: none !important
}

                        This part right here I felt necessary to include but am too inebriated to find the words to put meaning to it.

                        .UserCard--popover{
background-color: #E3E3E3 !important
}

.UserHero{
max-height: 394px
}

.UserBio-content{
max-height: 252px;
overflow: hidden
}

                        Flarums built in dark mode enabled + above code in pasted in Custom CSS demo results:
                        https://forum.freeflarum.com/

                        Hope this helps.

                            5 days later

                            user1993

                            Maybe try creating a short seamless animated gif as the image header.

                                0E800 That's exactly what I did. I only wish I could have different ones for different categories, but this works as well.

                                  Apologies the mobile responsive version has transparency issues. I will work on that post haste. Ultimately the end goal is to add this to the Revdev Night theme extension as a alternative theme.

                                  Thanks you for your reply.

                                  Victor12

                                  The fix:

                                  .Hero{
margin-top: -1px;
background: url("https://i.imgur.com/OyRAJDJ.png") no-repeat center center fixed !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
background-position: 0 0 !important;
text-align: center !important;
color: #FFFFFF;
text-shadow: 0 0 2px #000 !important;
opacity: 1 !important;
}

                                  The problem was that the .Hero opacity setting was causing the mobile responsive dropdown menu to share the same value. ( just for the changing avatar image dropdown)

                                  Changing opacity to 1 from 0.65 does the trick.

                                  I also added more !important flags as I noticed the Blue Night theme was overriding the header images.

                                      24 days later