Dark Theme - reduce contrast

❓Help
#1

I like using the Dark Theme at night to ease the strain on my eyes but I find there is too much contrast between the black page background and the white font. I want to lighten the page background. Can anyone give me the CSS code for my Stylish script?

Thanks.

1 Like
Rename Dark theme to Black and introduce new dark theme that is (dark) Grey with sepia font
#2

So you want the black to be lighter rather than darker…?

#3

Yes, that’s right. I find it a little hard adjusting from a completely white background to a completely black one. Might just be my failing eyesight! I’ve noticed some other software night modes don’t use total black now to soften the contrast. Of course, the alternative is to make the font an off-white shade.

#4

In mobile there’s now a true black mode option, not sure if that would help you. Have you tried it?

#5

No, true black is what I’m trying to avoid :grinning: although contrast is less of an issue for me on mobile devices. Looking for a very dark grey colour just to take the edge off the black. Something like #222222

#6

The current background is #181818, so I don’t think #222 would make that much of a difference :grimacing:

#7

The difference would be subtle I agree but I’ve got a really good monitor and the gradation of shades of grey is clearly visible. I was hoping to get the correct CSS code so I could play around with different hex settings to get the appearance that gave me the best results for my eyesight. Any ideas what it would be?

#8

If you don’t have document border enabled:

.AppContainer {
    background: #222222 !important;
}
#9

Thanks Erica.

Sorry to be a nuisance, but what would it be if I had document border enabled?

#10

That depends if you want to change the outer background color as well, or just the background color inside the document border.

Which one do you want?

#11

Hi Erica,

I got there in the end by experimenting. For reference, the code I used was: -

.is-desktop .AppContainer.is-borderShowing .Document {
border-color: #444;
background-color: #242424;
background-image: none;
}

.DocumentTools-overlay {
background: #242424;
box-shadow: 0 0 3px 3px #242424;
}

The setting #242424 gave me the contrast I was looking for.

Many thanks for your extended help. Much appreciated. :+1:

3 Likes
#12

Great to know you figured it out! Enjoy!

2 Likes
#13

I have the same issues as @pottster but am less adept at css. By a long way. I can limp along and make minor tweaks via Stylish theme code tweaks for DL but how-where do I access the DL code to make the above changes? I know this is tangential to this thread in a way, but can’t go any farther towards implementing erica’s instructions unless I have more info. Baby steps. Maybe there are others with this same knowledge gap.

#14

@fred its the same way with the other theme :slight_smile:

Although I usually use default theme, and occassionally a dark theme on specific Dynalist documents only. I don’t know if you change settings a lot from default to dark, but I hardly ever do this. I like some documents to be dark theme only, everything else as light default theme

This is what my stylish setup looks like

WM0PlpX.png821×232 18.9 KB

Everything above is specific to my workflow, but if you want to play around with the settings erica and pottster mentioned above, here’s how I’d do it (see below)

what code does

note these are all gifs

First,

This is what adding this snippet of css code does (Look at topleft of image)

.AppContainer {
    background: #222222 !important;
}

CdOrnNG.gif1322×270 9.06 KB

Adding Pottsters code here

.DocumentTools-overlay {
background: #242424;
box-shadow: 0 0 3px 3px #242424;
}

Adding this code

.is-desktop .AppContainer.is-borderShowing .Document {
border-color: #444;
background-color: #242424;
background-image: none;
}

this is only if you had “show document border” on

Adding code

If you want to add the code, all you have to do is write a new style in stylish

say you want to add all of pottsters code. Just dump it on there

Before you do that make sure this is specified at the bottom though

Now disable all your other themes, only have the one you just made enabled. I have lots of themes here I tested and never use

d9ZlaHN.png791×818 54.8 KB

Make sure you have the correct settings on dynalist on

  • ✓ Show Document Border On
  • Theme: Dark

Now you can preview the results.

So in summary

  • you can always have multiple css files enabled in stylish, maybe you turn one on in day (default theme), turn another on at night (dark theme)
  • or you can specify some dynalist url docs to be all dark theme, everything else default

I personally use a dark theme on a case by case basis per document

https://userstyles.org/styles/145727/dynalist-simple-colors-dark-for-default-theme

everything else I use a basic light-colored theme (I use dynalist default theme only)

https://userstyles.org/styles/144225/dynalist-simple-colors-for-default-theme

1 Like
#15

Many thanks (again) Vincent. Going back to school now! :grinning: I look forward to digging in and feel sure I’ll be scratching my head AND having AHA! moments in the process. I learn something every time I have a “problem” and all the more, when there are willing teachers. Your help is most encouraging and hopeful towards knowing more tomorrow than I do today–even at almost 70!

1 Like