Communities

Writing
Writing
Codidact Meta
Codidact Meta
The Great Outdoors
The Great Outdoors
Photography & Video
Photography & Video
Scientific Speculation
Scientific Speculation
Cooking
Cooking
Electrical Engineering
Electrical Engineering
Judaism
Judaism
Languages & Linguistics
Languages & Linguistics
Software Development
Software Development
Mathematics
Mathematics
Christianity
Christianity
Code Golf
Code Golf
Music
Music
Physics
Physics
Linux Systems
Linux Systems
Power Users
Power Users
Tabletop RPGs
Tabletop RPGs
Community Proposals
Community Proposals
tag:snake search within a tag
answers:0 unanswered questions
user:xxxx search by author id
score:0.5 posts with 0.5+ score
"snake oil" exact phrase
votes:4 posts with 4+ votes
created:<1w created < 1 week ago
post_type:xxxx type of post
Search help
Notifications
Mark all as read See all your notifications »
Q&A

Welcome to Codidact Meta!

Codidact Meta is the meta-discussion site for the Codidact community network and the Codidact software. Whether you have bug reports or feature requests, support questions or rule discussions that touch the whole network – this is the site for you.

UX changes: dark theme, distinct borders and shortcuts

+11
−1

I was asked to spill out what would be my UX changes, so here I go. My personal opinion on UX is in majority about my own discomfort with white background. As person working on computer for 10-12 hours per day, every time I open website with white background I get "blasted" with brightness and it makes my eyes tired faster. Please take a note this is all just my personal opinion which does not represent what might be preferred UX by majority.

  • It is generally better for human eyes to work with dark colors not just for performance but for medical reason as well. There are 3rd party programs which compensate brightness (warmth and cooling) based on your preferred settings, but I still prefer if it is "built-in" perhaps as a themes or hard coded.

  • More distinct borders of cells and frames might help faster orientation on website. Right now I feel like I am staring on a wall full of information which I need to "manually" filter out by focusing on those sneaky light grey borders (or perhaps they are just lost in the bright white background - at the end it is matter of contrast). Eg. I need to spend extra time on focusing what is Menu, Headline, Information, Button etc.

  • Shortcuts for basic formatting like Bold - CTRL+B.

That is all what is "bothering" me. It is not deal breaker at all, just something I would found more convenient

History
Why does this post require moderator attention?
You might want to add some details to your flag.
Why should this post be closed?

1 comment thread

Not a native dark mode, but codidact works well with [Darkreader](https://darkreader.org/): https://m... (1 comment)

3 answers

+12
−0

Dark theme is something I'd like to do, but right now it has to take a back seat to developing the features that we want to have. Creating and maintaining a dark theme is a significant amount of work, and not something we have the development time for right now. Once we've got all of our basic features, we'll be able to have another look at adding a new theme.

History
Why does this post require moderator attention?
You might want to add some details to your flag.

0 comment threads

+10
−0

I'm photosensitive and bright white backgrounds bother me too. Dark-mode themes tend to fail me in other ways, so I usually try to soften the bombardment of bright white pixels instead. In case it helps, I'll share my workaround. This is the CSS override I use, with the Stylus add-on, for Codidact sites:

@-moz-document domain("codidact.com") {

.is-12 {background-color: #FDF9F0; }
.is-8-lg {background-color: #FDF9F0; }
.is-4-lg {background-color: #FBEFD1; }
.has-margin-4 {background-color: #FDF9F0; }
}

You can adjust those colors to suit your preferences.

If I recall correctly, there are some transparent backgrounds in play too, and this doesn't catch those. In addition to using Stylus to make per-site CSS adjustments, I've also set a default background color in my browser. You can do this in Chrome and Firefox at least; I don't know about others.

These changes don't get everything; in particular, this doesn't catch the white background in the top bar, but since I'm not usually trying to read lots of text there, that's ok for me.

Here's a screenshot of what this looks like:

screenshot

History
Why does this post require moderator attention?
You might want to add some details to your flag.

0 comment threads

+7
−0

Horrible hacky dark mode

Until there's a real dark mode, here are some quick CSS hacks that you can try out in the developer window of your browser, and add to a userscript or user stylesheet if you like the results.

The site as it currently looks

With no CSS changes, here's the starting point:

Codidact Meta home page in standard colours

Codidact Meta home page in standard colours

Inverted colours

With the following CSS every colour is swapped with its opposite, with the exception of the background which remains at the default white (unless you have overridden your browser's background colour):

body {
    filter: invert(1);
}
Codidact Meta home page in inverted colours with white background showing through in places

Codidact Meta home page in inverted colours with white background showing through in places

Background colour set to black

The parts of the page where the background colour shows through can be overridden in CSS:

body {
    filter: invert(1);
    background-color: black;
}
Codidact Meta home page in inverted colours with black background

Codidact Meta home page in inverted colours with black background

Rotating back to familiar colours

This leaves the page readable but with inverted colours. Rotating the hues brings them back to the expected colours, but still keeping light and dark swapped:

body {
    filter: invert(1) hue-rotate(0.5turn);
    background-color: black;
}
Codidact Meta home page in standard colours but dark and light swapped

Codidact Meta home page in standard colours but dark and light swapped

Reducing contrast

Although this looks like a dark mode, you may find the bright white text uncomfortable. You can reduce the contrast to 50% (or whatever percentage you prefer) to make this less harsh:

body {
    filter: invert(1) hue-rotate(0.5turn) contrast(50%);
    background-color: black;
}
Codidact Meta home page in standard colours but dark and light swapped and contrast at 50%

Codidact Meta home page in standard colours but dark and light swapped and contrast at 50%

Increasing contrast

You can also increase the contrast above 100% if you wish. This will not affect the white text on black background, which is already the maximum contrast your screen can display, but it will exaggerate the other colours, giving you that oversaturated smart phone look even when viewing on your desktop:

body {
    filter: invert(1) hue-rotate(0.5turn) contrast(300%);
    background-color: black;
}
Codidact Meta home page in standard colours but dark and light swapped and contrast at 300%

Codidact Meta home page in standard colours but dark and light swapped and contrast at 300%

Dark mode only when signed in

This user id based approach does not work for all pages (for example, it doesn't work for the user profile page) so you will occasionally be unexpectedly confronted with light mode.

Sometimes I want to take a screenshot to raise a bug or feature request, so I need the site to appear the standard way without being affected by my user stylesheet. My hacky way of switching back to light mode is to open the same page in a private browsing window, so I'm no longer signed in. The following CSS will only work when I'm signed in (replace 53890 with your own user id):

body[data-user-id="53890"] {
    filter: invert(1) hue-rotate(0.5turn) contrast(80%);
    background-color: black;
}

This isn't guaranteed to continue working with future updates to the site, but as a temporary hack it does what I need.

If you need to take a screenshot while still signed in, you can also untick the CSS on the <body> tag in the developer window.

Making Exceptions

As Moshi points out in a comment, this also makes images have the same dark/light inversion, which may not be desirable.

You can reverse the filter for all images using Moshi's code:

img {
    filter: invert(1) hue-rotate(0.5turn) contrast(125%);
    background-color: black;
}

This will make user avatars look roughly how they were before the original filter, but will also reverse the filter for screenshots of the site, which can make posts containing screenshots have large areas of white. If you prefer to keep screenshots in dark mode and only reverse the filter for user avatars, you can use this variation:

.user-card--avatar {
    filter: invert(1) hue-rotate(0.5turn) contrast(125%);
    background-color: black;
}

Decreasing the contrast in the original filter, and then bringing it back up in the reverse filter, leaves the image corrupted but still recognisable. If you instead choose to apply no contrast change in either filter (just the invert and hue-rotate) then the original filter followed by reverse filter will be lossless and restore the exact original images.

History
Why does this post require moderator attention?
You might want to add some details to your flag.

2 comment threads

Inverts images too (2 comments)
Aside from making things easier for people who are set up for / comfortable with overriding CSS, this... (5 comments)

Sign up to answer this question »