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.

Post History

81%

+7 −0

Q&A UX changes: dark theme, distinct borders and shortcuts

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

posted 9mo ago by trichoplax‭ · edited 8mo ago by Karl Knechtel‭

Answer

#6: Post edited by

Karl Knechtel‭ · 2023-08-22T00:57:53Z (8 months ago)
hide large images in details tags for easier scanning; improve formatting of warning

Copy Link

Raw

Markdown

## 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](https://meta.codidact.com/uploads/8jpnj3q0daxrfwk4hruwcc8cb39o)
### 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):
```css
body {
filter: invert(1);
}
```
![Codidact Meta home page in inverted colours with white background showing through in places](https://meta.codidact.com/uploads/6gz1g70orgkr4qg2izyz0nj4eppc)
### Background colour set to black
The parts of the page where the background colour shows through can be overridden in CSS:
```css
body {
filter: invert(1);
background-color: black;
}
```
![Codidact Meta home page in inverted colours with black background](https://meta.codidact.com/uploads/hpjg8g49gawbpes2lro1a19dfmd5)
### 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:
```css
body {
filter: invert(1) hue-rotate(0.5turn);
background-color: black;
}
```
![Codidact Meta home page in standard colours but dark and light swapped](https://meta.codidact.com/uploads/elrskr2k5gyorc95esl1pxrmsntz)
### 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:
```css
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%](https://meta.codidact.com/uploads/r8mc8l83yv0gl1r87cvjbz3xdhni)
### 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:
```css
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%](https://meta.codidact.com/uploads/cfka4uxleorrk98l0v2gxoh428y4)
### Dark mode only when signed in
~~---~~
~~***Warning: 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):
```css
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](https://meta.codidact.com/comments/thread/8273#comment-21473), 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:
```css
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:
```css
.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.

## 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:
<details>
<summary>Codidact Meta home page in standard colours</summary>
![Codidact Meta home page in standard colours](https://meta.codidact.com/uploads/8jpnj3q0daxrfwk4hruwcc8cb39o)
</details>
### 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):
```css
body {
filter: invert(1);
}
```
<details>
<summary>Codidact Meta home page in inverted colours with white background showing through in places</summary>
![Codidact Meta home page in inverted colours with white background showing through in places](https://meta.codidact.com/uploads/6gz1g70orgkr4qg2izyz0nj4eppc)
</details>
### Background colour set to black
The parts of the page where the background colour shows through can be overridden in CSS:
```css
body {
filter: invert(1);
background-color: black;
}
```
<details>
<summary>Codidact Meta home page in inverted colours with black background</summary>
![Codidact Meta home page in inverted colours with black background](https://meta.codidact.com/uploads/hpjg8g49gawbpes2lro1a19dfmd5)
</details>
### 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:
```css
body {
filter: invert(1) hue-rotate(0.5turn);
background-color: black;
}
```
<details>
<summary>Codidact Meta home page in standard colours but dark and light swapped</summary>
![Codidact Meta home page in standard colours but dark and light swapped](https://meta.codidact.com/uploads/elrskr2k5gyorc95esl1pxrmsntz)
</details>
### 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:
```css
body {
filter: invert(1) hue-rotate(0.5turn) contrast(50%);
background-color: black;
}
```
<details>
<summary>Codidact Meta home page in standard colours but dark and light swapped and contrast at 50%</summary>
![Codidact Meta home page in standard colours but dark and light swapped and contrast at 50%](https://meta.codidact.com/uploads/r8mc8l83yv0gl1r87cvjbz3xdhni)
</details>
### 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:
```css
body {
filter: invert(1) hue-rotate(0.5turn) contrast(300%);
background-color: black;
}
```
<details>
<summary>Codidact Meta home page in standard colours but dark and light swapped and contrast at 300%</summary>
![Codidact Meta home page in standard colours but dark and light swapped and contrast at 300%](https://meta.codidact.com/uploads/cfka4uxleorrk98l0v2gxoh428y4)
</details>
### Dark mode only when signed in
<section class="notice is-warning">
***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.***
</section>
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):
```css
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](https://meta.codidact.com/comments/thread/8273#comment-21473), 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:
```css
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:
```css
.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.

#5: Post edited by

trichoplax‭ · 2023-08-19T11:07:13Z (8 months ago)
How to make exceptions for images

Copy Link

Raw

Markdown

## 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](https://meta.codidact.com/uploads/8jpnj3q0daxrfwk4hruwcc8cb39o)
### 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):
```css
body {
filter: invert(1);
}
```
![Codidact Meta home page in inverted colours with white background showing through in places](https://meta.codidact.com/uploads/6gz1g70orgkr4qg2izyz0nj4eppc)
### Background colour set to black
The parts of the page where the background colour shows through can be overridden in CSS:
```css
body {
filter: invert(1);
background-color: black;
}
```
![Codidact Meta home page in inverted colours with black background](https://meta.codidact.com/uploads/hpjg8g49gawbpes2lro1a19dfmd5)
### 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:
```css
body {
filter: invert(1) hue-rotate(0.5turn);
background-color: black;
}
```
![Codidact Meta home page in standard colours but dark and light swapped](https://meta.codidact.com/uploads/elrskr2k5gyorc95esl1pxrmsntz)
### 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:
```css
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%](https://meta.codidact.com/uploads/r8mc8l83yv0gl1r87cvjbz3xdhni)
### 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:
```css
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%](https://meta.codidact.com/uploads/cfka4uxleorrk98l0v2gxoh428y4)
### Dark mode only when signed in
---
***Warning: 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):
```css
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.~~

## 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](https://meta.codidact.com/uploads/8jpnj3q0daxrfwk4hruwcc8cb39o)
### 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):
```css
body {
filter: invert(1);
}
```
![Codidact Meta home page in inverted colours with white background showing through in places](https://meta.codidact.com/uploads/6gz1g70orgkr4qg2izyz0nj4eppc)
### Background colour set to black
The parts of the page where the background colour shows through can be overridden in CSS:
```css
body {
filter: invert(1);
background-color: black;
}
```
![Codidact Meta home page in inverted colours with black background](https://meta.codidact.com/uploads/hpjg8g49gawbpes2lro1a19dfmd5)
### 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:
```css
body {
filter: invert(1) hue-rotate(0.5turn);
background-color: black;
}
```
![Codidact Meta home page in standard colours but dark and light swapped](https://meta.codidact.com/uploads/elrskr2k5gyorc95esl1pxrmsntz)
### 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:
```css
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%](https://meta.codidact.com/uploads/r8mc8l83yv0gl1r87cvjbz3xdhni)
### 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:
```css
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%](https://meta.codidact.com/uploads/cfka4uxleorrk98l0v2gxoh428y4)
### Dark mode only when signed in
---
***Warning: 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):
```css
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](https://meta.codidact.com/comments/thread/8273#comment-21473), 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:
```css
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:
```css
.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.

#4: Post edited by

trichoplax‭ · 2023-08-08T23:34:06Z (9 months ago)
Add warning that user id based approach will occasionally switch to light mode

Copy Link

Raw

Markdown

## 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](https://meta.codidact.com/uploads/8jpnj3q0daxrfwk4hruwcc8cb39o)
### 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):
```css
body {
filter: invert(1);
}
```
![Codidact Meta home page in inverted colours with white background showing through in places](https://meta.codidact.com/uploads/6gz1g70orgkr4qg2izyz0nj4eppc)
### Background colour set to black
The parts of the page where the background colour shows through can be overridden in CSS:
```css
body {
filter: invert(1);
background-color: black;
}
```
![Codidact Meta home page in inverted colours with black background](https://meta.codidact.com/uploads/hpjg8g49gawbpes2lro1a19dfmd5)
### 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:
```css
body {
filter: invert(1) hue-rotate(0.5turn);
background-color: black;
}
```
![Codidact Meta home page in standard colours but dark and light swapped](https://meta.codidact.com/uploads/elrskr2k5gyorc95esl1pxrmsntz)
### 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:
```css
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%](https://meta.codidact.com/uploads/r8mc8l83yv0gl1r87cvjbz3xdhni)
### 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:
```css
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%](https://meta.codidact.com/uploads/cfka4uxleorrk98l0v2gxoh428y4)
### Dark mode only when signed in
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):
```css
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.

## 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](https://meta.codidact.com/uploads/8jpnj3q0daxrfwk4hruwcc8cb39o)
### 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):
```css
body {
filter: invert(1);
}
```
![Codidact Meta home page in inverted colours with white background showing through in places](https://meta.codidact.com/uploads/6gz1g70orgkr4qg2izyz0nj4eppc)
### Background colour set to black
The parts of the page where the background colour shows through can be overridden in CSS:
```css
body {
filter: invert(1);
background-color: black;
}
```
![Codidact Meta home page in inverted colours with black background](https://meta.codidact.com/uploads/hpjg8g49gawbpes2lro1a19dfmd5)
### 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:
```css
body {
filter: invert(1) hue-rotate(0.5turn);
background-color: black;
}
```
![Codidact Meta home page in standard colours but dark and light swapped](https://meta.codidact.com/uploads/elrskr2k5gyorc95esl1pxrmsntz)
### 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:
```css
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%](https://meta.codidact.com/uploads/r8mc8l83yv0gl1r87cvjbz3xdhni)
### 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:
```css
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%](https://meta.codidact.com/uploads/cfka4uxleorrk98l0v2gxoh428y4)
### Dark mode only when signed in
---
***Warning: 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):
```css
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.

#3: Post edited by

trichoplax‭ · 2023-08-02T16:34:35Z (9 months ago)
Mention unticking the CSS on the body to take light mode screenshots

Copy Link

Raw

Markdown

## 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](https://meta.codidact.com/uploads/8jpnj3q0daxrfwk4hruwcc8cb39o)
### 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):
```css
body {
filter: invert(1);
}
```
![Codidact Meta home page in inverted colours with white background showing through in places](https://meta.codidact.com/uploads/6gz1g70orgkr4qg2izyz0nj4eppc)
### Background colour set to black
The parts of the page where the background colour shows through can be overridden in CSS:
```css
body {
filter: invert(1);
background-color: black;
}
```
![Codidact Meta home page in inverted colours with black background](https://meta.codidact.com/uploads/hpjg8g49gawbpes2lro1a19dfmd5)
### 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:
```css
body {
filter: invert(1) hue-rotate(0.5turn);
background-color: black;
}
```
![Codidact Meta home page in standard colours but dark and light swapped](https://meta.codidact.com/uploads/elrskr2k5gyorc95esl1pxrmsntz)
### 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:
```css
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%](https://meta.codidact.com/uploads/r8mc8l83yv0gl1r87cvjbz3xdhni)
### 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:
```css
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%](https://meta.codidact.com/uploads/cfka4uxleorrk98l0v2gxoh428y4)
### Dark mode only when signed in
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):
```css
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.~~

## 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](https://meta.codidact.com/uploads/8jpnj3q0daxrfwk4hruwcc8cb39o)
### 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):
```css
body {
filter: invert(1);
}
```
![Codidact Meta home page in inverted colours with white background showing through in places](https://meta.codidact.com/uploads/6gz1g70orgkr4qg2izyz0nj4eppc)
### Background colour set to black
The parts of the page where the background colour shows through can be overridden in CSS:
```css
body {
filter: invert(1);
background-color: black;
}
```
![Codidact Meta home page in inverted colours with black background](https://meta.codidact.com/uploads/hpjg8g49gawbpes2lro1a19dfmd5)
### 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:
```css
body {
filter: invert(1) hue-rotate(0.5turn);
background-color: black;
}
```
![Codidact Meta home page in standard colours but dark and light swapped](https://meta.codidact.com/uploads/elrskr2k5gyorc95esl1pxrmsntz)
### 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:
```css
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%](https://meta.codidact.com/uploads/r8mc8l83yv0gl1r87cvjbz3xdhni)
### 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:
```css
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%](https://meta.codidact.com/uploads/cfka4uxleorrk98l0v2gxoh428y4)
### Dark mode only when signed in
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):
```css
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.

#2: Post edited by

trichoplax‭ · 2023-08-02T16:31:43Z (9 months ago)
Mention signed in only version

Copy Link

Raw

Markdown

## 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 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](https://meta.codidact.com/uploads/8jpnj3q0daxrfwk4hruwcc8cb39o)
### 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):
```css
body {
filter: invert(1);
}
```
![Codidact Meta home page in inverted colours with white background showing through in places](https://meta.codidact.com/uploads/6gz1g70orgkr4qg2izyz0nj4eppc)
### Background colour set to black
The parts of the page where the background colour shows through can be overridden in CSS:
```css
body {
filter: invert(1);
background-color: black;
}
```
![Codidact Meta home page in inverted colours with black background](https://meta.codidact.com/uploads/hpjg8g49gawbpes2lro1a19dfmd5)
### 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:
```css
body {
filter: invert(1) hue-rotate(0.5turn);
background-color: black;
}
```
![Codidact Meta home page in standard colours but dark and light swapped](https://meta.codidact.com/uploads/elrskr2k5gyorc95esl1pxrmsntz)
### 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:
```css
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%](https://meta.codidact.com/uploads/r8mc8l83yv0gl1r87cvjbz3xdhni)
### 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:
```css
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%](https://meta.codidact.com/uploads/cfka4uxleorrk98l0v2gxoh428y4)~~

## 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](https://meta.codidact.com/uploads/8jpnj3q0daxrfwk4hruwcc8cb39o)
### 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):
```css
body {
filter: invert(1);
}
```
![Codidact Meta home page in inverted colours with white background showing through in places](https://meta.codidact.com/uploads/6gz1g70orgkr4qg2izyz0nj4eppc)
### Background colour set to black
The parts of the page where the background colour shows through can be overridden in CSS:
```css
body {
filter: invert(1);
background-color: black;
}
```
![Codidact Meta home page in inverted colours with black background](https://meta.codidact.com/uploads/hpjg8g49gawbpes2lro1a19dfmd5)
### 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:
```css
body {
filter: invert(1) hue-rotate(0.5turn);
background-color: black;
}
```
![Codidact Meta home page in standard colours but dark and light swapped](https://meta.codidact.com/uploads/elrskr2k5gyorc95esl1pxrmsntz)
### 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:
```css
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%](https://meta.codidact.com/uploads/r8mc8l83yv0gl1r87cvjbz3xdhni)
### 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:
```css
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%](https://meta.codidact.com/uploads/cfka4uxleorrk98l0v2gxoh428y4)
### Dark mode only when signed in
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):
```css
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.

#1: Initial revision by

trichoplax‭ · 2023-08-01T01:02:11Z (9 months ago)

Copy Link

Raw

Markdown

## 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 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](https://meta.codidact.com/uploads/8jpnj3q0daxrfwk4hruwcc8cb39o)

### 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):

```css
body {
    filter: invert(1);
}
```

![Codidact Meta home page in inverted colours with white background showing through in places](https://meta.codidact.com/uploads/6gz1g70orgkr4qg2izyz0nj4eppc)

### Background colour set to black

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

```css
body {
    filter: invert(1);
    background-color: black;
}
```

![Codidact Meta home page in inverted colours with black background](https://meta.codidact.com/uploads/hpjg8g49gawbpes2lro1a19dfmd5)

### 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:

```css
body {
    filter: invert(1) hue-rotate(0.5turn);
    background-color: black;
}
```

![Codidact Meta home page in standard colours but dark and light swapped](https://meta.codidact.com/uploads/elrskr2k5gyorc95esl1pxrmsntz)

### 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:

```css
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%](https://meta.codidact.com/uploads/r8mc8l83yv0gl1r87cvjbz3xdhni)

### 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:

```css
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%](https://meta.codidact.com/uploads/cfka4uxleorrk98l0v2gxoh428y4)

Communities

Post History