Do we have a dark mode/theme for the caf?

Rado_N

Yaaas Broncos!
Joined
Apr 6, 2009
Messages
111,121
Location
Manchester
Yeah. Just installed the stylus extension and followed the link you posted and it worked. Let me see if I can post some screenshots


Aside from the horrible font in the URL bar and clock this looks awesome.
 

Rudie

Mentary
Joined
Jan 4, 2006
Messages
4,586
Location
Yorkshire
For people that want basically the same theme for mobile though I've found kiwi browser has a night mode and uses basically the exact same set up as chrome
Good call on using Kiwi! It's actually the best browser I've tried so far and I've been through a few :)
 

prateik

Full Member
Joined
Dec 14, 2005
Messages
42,182
For anyone using chrome on mobile.. you can force dark mode for all websites using the chrome flags ..
Might not work perfectly.. as its still experimental.. but its working fine for me.
chrome://flags
search for dark
enable - force dark mode for web contents
 

donkeyfish

Full Member
Joined
Apr 23, 2016
Messages
10,397
Location
Plumbus - Uncompromising and Innovative
Let's get rid of some more borders:

Code:
.block-body:last-child {
    border-bottom: 1px solid #40343A;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.block-body:nth-child(1) {
    border-top: 1px solid #40343A;
}

.fr-box.fr-basic .fr-wrapper {
    background: #eee;
    border: 1px solid #40343A;
    border-top: 0;
    top: 0;
    left: 0;
}
.block-body:last-child {
    border-bottom: 1px solid #40343A;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
.node-body {
    background: #292024;
    color: #fff;
    border-top: 1px solid #100000;
    padding: 0px;
}
 
Last edited:

donkeyfish

Full Member
Joined
Apr 23, 2016
Messages
10,397
Location
Plumbus - Uncompromising and Innovative
Code:
.bbCodeBlock-title {
    padding: 10px 16px;
    font-size: 1.3rem;
    color: #e0e0e0;
    background: #31272d;
    border: 0;
}
.bbCodeBlock--code .bbCodeBlock-content {
    background-color: #40343A;
    color: #e0e0e0;
}
And fix code blocks too
 

matherto

ask me about our 50% off sale!
Joined
Nov 3, 2009
Messages
17,545
Location
St. Helens
Code:
.bbCodeBlock-title {
    padding: 10px 16px;
    font-size: 1.3rem;
    color: #e0e0e0;
    background: #31272d;
    border: 0;
}
.bbCodeBlock--code .bbCodeBlock-content {
    background-color: #40343A;
    color: #e0e0e0;
}
And fix code blocks too
Where do we put these in?

At the minute I've got light blue usernames, borders and Times New Roman as the font somehow

Edit - got rid of the light blue usernames but everything around the username area is in what looks like Times New Roman rather than the normal font.
 
Last edited:

Olly Gunnar Solskjær

Marxist bacon-hating kebab-dodging Tinder rascal
Scout
Joined
Jan 26, 2008
Messages
36,895
Location
dreams can't be buy
Where do we put these in?

At the minute I've got light blue usernames, borders and Times New Roman as the font somehow

Edit - got rid of the light blue usernames but everything around the username area is in what looks like Times New Roman rather than the normal font.
You add it to the custom CCS code for the theme that you installed using either the Stylus or Stylish addon.
 

matherto

ask me about our 50% off sale!
Joined
Nov 3, 2009
Messages
17,545
Location
St. Helens
Anywhere will work, just paste it at the end after everything will probably be easiest.
Cheers. Done fantastic work all of you. Really looks good.

Is there an edit for the font for the usernames section? I don't mind the serif font but the same font as the current non-dark forum would be nice.
 

Olly Gunnar Solskjær

Marxist bacon-hating kebab-dodging Tinder rascal
Scout
Joined
Jan 26, 2008
Messages
36,895
Location
dreams can't be buy
Cheers. Done fantastic work all of you. Really looks good.

Is there an edit for the font for the usernames section? I don't mind the serif font but the same font as the current non-dark forum would be nice.
I think the font is only edited in this section of the code

Code:
html{
    background: #1f171a;
    font-family: 'Segoe UI','Helvetica Neue',Helvetica,Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans',sans-serif;
}
So you can either edit or define your own fonts there, or just delete that line completely leaving it as this:

Code:
html{
    background: #1f171a;
}
 

Green_Red

New Member
Joined
May 29, 2013
Messages
10,296
If you use chrome browser you can type chrome://flags into the url and then search "dark". You'll see an option to set all webpages as dark ui. Select enable. It will ask you to reload your browser. Then you will have all web pages in dark ui.
 

WR

Frankie Barwell ITK
Joined
Sep 20, 2009
Messages
15,559
Location
Well done he’s 13
If you use chrome browser you can type chrome://flags into the url and then search "dark". You'll see an option to set all webpages as dark ui. Select enable. It will ask you to reload your browser. Then you will have all web pages in dark ui.
Wonderful
 

littleman

New Member
Joined
Dec 28, 2015
Messages
837
Is there any simple easy way for me to be able to use this on an iOS device? Looks like all the screenshots here are Android..
 

Balljy

Full Member
Joined
Jan 31, 2016
Messages
3,325
Why has mine gone dark? I didn’t change anything
It has something to do with the 6th February and a certain anniversary related to Munich(which is a good tribute and looks amazing btw) :)
 
Last edited:

Spielmacher

Full Member
Joined
Aug 18, 2013
Messages
3,554
Location
Austria
Will have to wait until the council has made a decision, because of the implications this change could have on the White Text culture in the caf.