Dark mode

[qwazix]

This adds dark mode css to writefreely which gets enabled automatically when the OS is set to dark mode (prefers-color-scheme: dark media query). It also leverages the built in pad dark mode functionality to choose the dark pad by default if prefers-color-scheme is dark.

That is all. I tried to just invert the colors and not do any other stylistic choices.

[ghost]

confirmed working: firefox 69.0.1
not working: chromium 76.0.3809.132, palemoon 28.7.1
tested with qutebrowser but the backend is only chromium 73 so won't support it as it was added in 76.

it looks like there are issue with chromium/chrome on linux using gtk themes that are still being ironed out, so it will work eventually. see https://bugs.chromium.org/p/chromium/issues/detail?id=1004246

[thebaer]

Thanks for taking the time to explore this, @qwazix! I like the idea in theory, but I'm still thinking about if this should be in the core platform. Just some thoughts below.

I do like the idea of the system setting the default mode of the pad -- I think that's a great use case for dark mode that we could incorporate today. But I'm very hesitant to change the entire site (especially the reading experience) to respect the mode. A few reasons:

• Users might not want dark mode affecting their system this deeply. I'm not sure about how widespread this feeling is, but it's my personal intuition.

• Readability is worse with light text on a dark background and can cause more eye strain, especially when reading in light conditions (this article goes into some of the details). As a platform made to enhance the reading experience as much as possible, I think this would go against our core design philosophy.

• This makes customizing blogs with CSS more difficult, since users would need to code against both dark and light mode. For example, even if I only wanted to create a light theme, I'd still need to put in the right CSS to disable our default dark mode rendering.

• Since it's tied to the system settings, if a user doesn't like reading in dark mode, there's nothing they can do besides turn off the setting for their entire system, which isn't a very good user experience. This is probably part of my intuition mentioned in the first point.

Considering all of this (and barring any other input), I think we should keep the part where the system setting determines the initial Pad theme, and then separately publish your CSS in our external resources. That way, instance admins and blog users can include it if they want their WF instance or blog to support dark mode.

[qwazix]

Ok perfect I will separate the changes into two branches.

[thebaer]

I think we should leave this out of the default stylesheet, mostly because it'll make customization much more difficult for users. But I think it'd make a great addition to our Themes showcase! So if you put this into a standalone style that we can feature there, then we'll do that.

Otherwise, I still think dark mode makes sense in the editor. So we'll continue that work in #196.

[qwazix]

The code for the front-end is as follows, anywhere better that I should put it?

@subheadersDark: #aaa;
@headerTextColorDarkMode: #cfcfcf;
@textLinkColorDark: rgb(162, 162, 255);

:root {
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    body{
		color: #eee;
		background: #111;

		.post-title a:link{
			color: #ccc;
		}

		&#collection{
			color: #eee;

			pre{
				background: #060606;
			}
		}

		h1, header h2 {
			a {
				color: @headerTextColorDarkMode;
				&:hover {
					color: #fff;
				}
				&:visited {
					color: @headerTextColorDarkMode;
				}
			}
		}

		#nav#manage ul a, .dropdown-nav ul a, nav#manage ul ul a, nav#manage ul a{
			color: #ccc;
		}

		.dropdown-nav ul ul, .dropdown-nav ul li:hover, nav#manage ul ul, nav#manage ul ul li:hover, nav#manage ul li:hover{
			background: #222;
		}

		#official-writing h2, #official-writing h3, #official-writing h4, #wrapper h2, #wrapper h3, #wrapper h4{
			color: #ddd;
		}

		a {
			color: @textLinkColorDark
		}

		a:visited{
			color: rgb(201, 138, 253);
		}

		#official-writing, #wrapper {
			h2, h3, h4 {
				color: @subheadersDark;
			}
			ul {
				&.collections {
					li {
						&.collection {
							a.title {
								&:link, &:visited {
									color: @headerTextColorDarkMode;
								}
							}
						}
						a.create {
							color: @subheadersDark;
						}
					}
				}
			}
		}

	}

	body#me #official-writing h2 a:link, body#me #official-writing h2 a:visited{
		color: @textLinkColorDark
	}

	.ace_editor {
		border: 1px solid #333;
	}

	input {
		background: #202020;
		color: #bbb;
	}

	nav#manage ul ul li img{
		filter: invert(1);
	}

	.alert {
		&.info {
			color: #4295be;
			background-color: #0a0b0c;
			border-color: #181d1f;
		}
		&.success {
			color: #5bb35c;
			background-color: #282b27;
			border-color: #21241e;
		}
	}

} 

[thebaer]

Here works! We'll just need to compile it into CSS -- looks like it's still in LESS form.