[WIP]Blue Night style

0E800

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

Forum home:

Forum post:

Admin area:

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

Ralkage

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

Prosperous

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. ?

Razor

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.

gurjyot

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

0E800

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:

user1993

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!

0E800

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.

user1993

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.

Felli

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.

0E800

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.

gurjyot

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

user1993

0E800 Exactly what I was looking for! You're a legend!

0E800

user1993

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

user1993

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

0E800

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.

0E800

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.

Victor12

0E800 Cheers mate! That fixed the issue.

luckykuno

0E800 How to fix this?

0E800

luckykuno

Please try it again.

Adding below custom css removes the transparency from the mobile menu.

@media (max-width: 767px) {
.App-drawer {
background-color: #222e41 !important;
}
}