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

harshad said:
Yeah. Just installed the stylus extension and followed the link you posted and it worked. Let me see if I can post some screenshots
4rIZA1F.jpg


APf8OSv.jpg
Click to expand...

Aside from the horrible font in the URL bar and clock this looks awesome.
 
P-Nut said:
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
Click to expand...

Good call on using Kiwi! It's actually the best browser I've tried so far and I've been through a few :)
 
Rudie said:
Good call on using Kiwi! It's actually the best browser I've tried so far and I've been through a few :)
Click to expand...

Yeah the night time mode is top
 
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
 
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:
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
 
donkeyfish said:
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
Click to expand...

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:
matherto said:
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.
Click to expand...
You add it to the custom CCS code for the theme that you installed using either the Stylus or Stylish addon.
 
Olly Gunnar Solskjær said:
Anywhere will work, just paste it at the end after everything will probably be easiest.
Click to expand...

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.
 
matherto said:
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.
Click to expand...
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;
}
 
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.
 
Green_Red said:
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.
Click to expand...
Wonderful
 
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..
 
golden_blunder said:
Why has mine gone dark? I didn’t change anything
Click to expand...

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:
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.
 
You must log in or register to reply here.