Can we have a dark mode for this website?

[CosmoGenesis]

THE WHITE, IT BURNS MY DELICATE EYES 

 

Thanks

[Macnamara]

Have you tried turning the blue light off on your computer?

[Guest]

2 hours ago, Macnamara said:

Have you tried turning the blue light off on your computer?

 

I turn the blue light right down and it does help .... Just had a look at the css controlling the background and added 2 filters to the U Block Origin I use (it could be other software such as Adblock Plus etc) and changed the white to a very light grey .... I like it and will keep it (had a quick look around and there are bits of white and the post reply field is white but I may get round to finding the css controlling that and change it sometime).

 

It now looks like this across the forum:

 

 

But you can simply change the colour code to whatever you wish .... fancy some pink??

 

 

The two filters are:

 

forum.davidicke.com##.ipsAreaBackground_reset:style(background-color: #f2f2f2 !important)
forum.davidicke.com##:root :style( --box--backgroundColor: #f2f2f2 !important)

 

Changing the #f2f2f2 to the colour you want changes most things.

 

I have a third filter which removes the righthand block of statistics, if any wishes that?

 

forum.davidicke.com##.ipsLayout_sidebarright

 

Which means if I go into a thread (such as the mega thread) I don't see it and it don't push all the posts to the left (such as)

 

[metak88]

One option is to use an add-on for browsers like Stylus and override the default colors with custom dark versions. I made a simple dark theme style-sheet for this forum if anyone wants it until there's proper dark-mode/dark theme. It looks like this:

 

 

@-moz-document url-prefix("https://forum.davidicke.com") {
:root {
    --informational-dark: 255, 215, 0;
    --theme-page_background: 35, 35, 35;
    --theme-area_background: 15, 15, 15;
    --theme-area_background_dark: 0, 0, 0;
    --theme-area_background_light: 74, 74, 74;
    --theme-area_background_reset: 25, 25, 25;
    --theme-widget_title_bar: 25, 25, 25;
    --theme-widget_title_font: 164, 164, 164;
    --theme-text_color: 184, 184, 184;
    --theme-text_dark: 184, 184, 184;
    --theme-text_light: 105, 105, 105;
    --theme-primary_button: 15, 15, 15;
    --theme-primary_button_font: 135, 135, 135;
    --theme-light_button: 10, 10, 10;
    --theme-light_button_font: 164, 164, 164;
    --theme-very_light_button: 135, 135, 135;
    --theme-very_light_button_font: 15, 15, 15;
    --theme-main_nav: 23, 23, 23;
    --theme-main_nav_tab: 70, 70, 70;
    --theme-header: 23, 23, 23;
    --theme-header_text: 146, 146, 46;
    --theme-section_title: 55, 55, 55;
    --theme-section_title_font: 164, 164, 164;
    --theme-timeline_color: 12, 12, 12;
    /*--radius-1: 0;*/
    --form-field--borderColor: 0, 0, 0;
    --theme-active_input_border: 255, 215, 0;
    --form-field--focusShadow: rgba( var(--theme-active_input_border), 0.3 ) 0px 0px 0px 4px;
    --theme-button_bar: 15, 15, 15;
}

html[dir="ltr"] .ipsComposeArea_withPhoto .ipsComposeArea_editor:focus {
    border-color: #fff;
}

/*
body {
    font-family: "Arial";
}
*/

#elSearch input[type="search"] {
    background: rgb(12, 12, 12);
    color: rgb(111, 111, 111);
    border-radius: 0;
}

#elSearch .cSearchSubmit {
    background: rgb(12, 12, 12);
    color: rgb(111, 111, 111);
    border-radius: 0;
}

/*
.ipsType_medium {
    font-size: 14px;
}
*/

/*
a.ipsType_blendLinks, .ipsType_blendLinks a {
    color: rgb(104, 2, 79);
}
*/

.ipsType_blendLinks a {
    color: rgb(142, 59, 59);
}

.ipsReactOverview_small ul img {
    max-width: 24px;
    max-height: 24px;
}

.ipsReactOverview ul img {
    border: 0px solid #fff;
}

.ipsType_sectionTitle {
    border-bottom: 1px solid rgba( var(--theme-text_light),.15);
}

.ipsQuote_citation, .ipsSpoiler_header {
    background: rgba( var(--theme-area_background),.5);
}

.ipsQuote, .ipsSpoiler, .ipsStyle_spoiler {
    border: 4px solid rgba( var(--theme-area_background_dark),.15);
}

/*
.ipsQuote p:first-child {
}
*/


}

 

[Beaujangles]

On 5/24/2021 at 12:59 PM, metak88 said:

One option is to use an add-on for browsers like Stylus and override the default colors with custom dark versions. I made a simple dark theme style-sheet for this forum if anyone wants it until there's proper dark-mode/dark theme. It looks like this:

 

 

@-moz-document url-prefix("https://forum.davidicke.com") {
:root {
    --informational-dark: 255, 215, 0;
    --theme-page_background: 35, 35, 35;
    --theme-area_background: 15, 15, 15;
    --theme-area_background_dark: 0, 0, 0;
    --theme-area_background_light: 74, 74, 74;
    --theme-area_background_reset: 25, 25, 25;
    --theme-widget_title_bar: 25, 25, 25;
    --theme-widget_title_font: 164, 164, 164;
    --theme-text_color: 184, 184, 184;
    --theme-text_dark: 184, 184, 184;
    --theme-text_light: 105, 105, 105;
    --theme-primary_button: 15, 15, 15;
    --theme-primary_button_font: 135, 135, 135;
    --theme-light_button: 10, 10, 10;
    --theme-light_button_font: 164, 164, 164;
    --theme-very_light_button: 135, 135, 135;
    --theme-very_light_button_font: 15, 15, 15;
    --theme-main_nav: 23, 23, 23;
    --theme-main_nav_tab: 70, 70, 70;
    --theme-header: 23, 23, 23;
    --theme-header_text: 146, 146, 46;
    --theme-section_title: 55, 55, 55;
    --theme-section_title_font: 164, 164, 164;
    --theme-timeline_color: 12, 12, 12;
    /*--radius-1: 0;*/
    --form-field--borderColor: 0, 0, 0;
    --theme-active_input_border: 255, 215, 0;
    --form-field--focusShadow: rgba( var(--theme-active_input_border), 0.3 ) 0px 0px 0px 4px;
    --theme-button_bar: 15, 15, 15;
}

html[dir="ltr"] .ipsComposeArea_withPhoto .ipsComposeArea_editor:focus {
    border-color: #fff;
}

/*
body {
    font-family: "Arial";
}
*/

#elSearch input[type="search"] {
    background: rgb(12, 12, 12);
    color: rgb(111, 111, 111);
    border-radius: 0;
}

#elSearch .cSearchSubmit {
    background: rgb(12, 12, 12);
    color: rgb(111, 111, 111);
    border-radius: 0;
}

/*
.ipsType_medium {
    font-size: 14px;
}
*/

/*
a.ipsType_blendLinks, .ipsType_blendLinks a {
    color: rgb(104, 2, 79);
}
*/

.ipsType_blendLinks a {
    color: rgb(142, 59, 59);
}

.ipsReactOverview_small ul img {
    max-width: 24px;
    max-height: 24px;
}

.ipsReactOverview ul img {
    border: 0px solid #fff;
}

.ipsType_sectionTitle {
    border-bottom: 1px solid rgba( var(--theme-text_light),.15);
}

.ipsQuote_citation, .ipsSpoiler_header {
    background: rgba( var(--theme-area_background),.5);
}

.ipsQuote, .ipsSpoiler, .ipsStyle_spoiler {
    border: 4px solid rgba( var(--theme-area_background_dark),.15);
}

/*
.ipsQuote p:first-child {
}
*/


}

 

 

 

Looks good...but I dont have the first clue how to implement it...totally not tech savvy.

[metak88]

9 hours ago, Beaujangles said:

Looks good...but I dont have the first clue how to implement it...totally not tech savvy.

 

1. Install stylus browser add-on.

 

Chrome: https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne

( & chome based browsers like chromium, opera, vivaldi, etc.)

Firefox: https://addons.mozilla.org/sl/firefox/addon/styl-us/

 

2. Open tab with https://forum.davidicke.com initial page and click on the stylus add-on icon in browser toolbar. Pick the option 'Write style for:' this URL...

 

3. That will open new tab with 'Add Style' title, now you just paste in the css code from my comment above into that empty text field. ( paste as plain text ) A pop-up window will open and click 'Overwrite style'. Click 'Save' in the left pane and that should be it. ;-)

[CosmoGenesis]

OMFG

 

THANK YOU. 

Much easier on my stoned eyes. 

 

The above works in Brave browser too.

Edited May 26, 2021 by CosmoGenesis

[shabbirss]

@CosmoGenesis
maybe try this app too...

https://justgetflux.com/

 

The light that comes from computer and mobile phone screens has a real effect on the human circadian system, especially at night. Based on your wake time and location, f.lux creates a custom lighting schedule for you that changes every day throughout the year. By moving the sliders, you can fine tune the colors to fit your needs.

 

f.lux makes your computer screen look like the room you're in, all the time.

When the sun sets, it makes your computer look like your indoor lights. In the morning, it makes things look like sunlight again.

Tell f.lux what kind of lighting you have, and where you live. Then forget about it. f.lux will do the rest, automatically.

 

it makes the color of your computer's display adapt to the time of day, warm at night and like sunlight during the day.

It's even possible that you're staying up too late because of your computer.

You could use f.lux because it makes you sleep better, or you could just use it just because it makes your computer look better.

 

Edited June 13, 2021 by shabbirss

[Seeker]

An option for dark mode, much easier on the eyes

[DaleP]

+1

[metak88]

 

[Guardian]

Install Dark mode extension in your browser

 

 

[metak88]

@Guardian Hey, that Dark mode extension that you're using is somehow botching your posts which quote another post.

 

 

Edit: can mods merge this thread and the previous one above I mentioned? @Grumpy Owl @screamingeagle

Edited December 20, 2021 by metak88

[Guardian]

4 minutes ago, metak88 said:

 

Whatever... I just thought you should know since ALL of your quoted parts of comments look like black text on black background. Only yours and I've tested on different browser with clean profile just to make sure. Take care.

 

 

It's weird... If that is the case.

 

My extension works on my browser. It has nothing to do with yours. Or maybe I am missing something

 

This is the extension I am using.

 

 

[screamingeagle]

Mod note 

 

threads have been merged and some posts deleted