Jump to content

Can we have a dark mode for this website?


 Share

Recommended Posts

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:

 

darkish1.jpg.396583254e8e1c275426c63029f1cc3e.jpg

 

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

 

pinkish.jpg.119c1620787762cfd7feeaa6e07a9a34.jpg

 

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)

 

megaThread.jpg.fd107587018b18eac3044b93fc2b3696.jpg

Link to comment
Share on other sites

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:

 

Screenshot_20210524_185257.png.1cc96e86616efa12dfb03620b4ef495b.png

 

@-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 {
}
*/


}

 

  • Like 2
Link to comment
Share on other sites

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:

 

Screenshot_20210524_185257.png.1cc96e86616efa12dfb03620b4ef495b.png

 

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

Link to comment
Share on other sites

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

  • Like 2
  • Thanks 2
Link to comment
Share on other sites

  • 3 weeks later...

@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 by shabbirss
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...