Tutorials
Dark Mode (day & night mode) with only CSS for Codoforum

Hallo Community,
Hallo @admin & @adesh

Many Internet users want to use a day and night mode in our time. I thought about this topic and I think our awesome Codologic Team should be able to enable this feature for us in the future with only little effort.

I already wrote the following CSS to help the Codologic Team a little.

This code recognizes whether the user uses the browser integrated day and night mode which is already supported by most modern browsers and has activated the night or day theme.

If a user uses night mode, Codoforum will also be available in dark colors in the future.

Here is the CSS (yes it is very small but completely sufficient):

@media (prefers-color-scheme: dark) {
  img {
    opacity: .75;
    transition: opacity .5s ease-in-out;
  }
  img:hover {
    opacity: 1;
  }

  html {
  --text-color-normal: #0a244d;
  --text-color-light: #8cabd9;
  }

html[data-theme='dark'] {
  --text-color-normal: hsl(210, 10%, 62%);
  --text-color-light: hsl(210, 15%, 35%);
  --text-color-richer: hsl(210, 50%, 72%);
  --text-color-highlight: hsl(25, 70%, 45%);
  }
}

If wanted You can check if the browser supports it using Javascript:

if (window.matchMedia('(prefers-color-scheme)').media === 'not all') {
  console.log('Browser doesn\'t support dark mode');
}

Good luck and thanks for Your interest,
Andy

**Hallo Community,** **Hallo** @admin **&** @adesh Many Internet users want to use a **day and night mode** in our time. I thought about this topic and I think our awesome **Codologic Team** should be able to enable this feature for us in the future with only little effort. I already wrote the following CSS to help the Codologic Team a little. This code recognizes whether the user uses the browser integrated **day and night mode** which is already supported by most modern browsers and has activated the night or day theme. If a user uses night mode, **Codoforum** will also be available in dark colors in the future. **Here is the CSS (yes it is very small but completely sufficient):** ```` @media (prefers-color-scheme: dark) { img { opacity: .75; transition: opacity .5s ease-in-out; } img:hover { opacity: 1; } html { --text-color-normal: #0a244d; --text-color-light: #8cabd9; } html[data-theme='dark'] { --text-color-normal: hsl(210, 10%, 62%); --text-color-light: hsl(210, 15%, 35%); --text-color-richer: hsl(210, 50%, 72%); --text-color-highlight: hsl(25, 70%, 45%); } } ```` **If wanted You can check if the browser supports it using Javascript:** ```` if (window.matchMedia('(prefers-color-scheme)').media === 'not all') { console.log('Browser doesn\'t support dark mode'); } ```` Good luck and thanks for Your interest, Andy

🚽 planing my next project 🪔

Check my GitHub Repos: https://github.com/WebCrew

My CrazyMates Account: https://crazymates.de/Crazymate

Thank You, it is a great idea and I hope it will get implemented into CF.

Thank You, it is a great idea and I hope it will get implemented into CF.
70
1
2
live preview
enter atleast 10 characters
WARNING: You mentioned %MENTIONS%, but they cannot see this message and will not be notified
Saving...
Saved
With selected deselect posts show selected posts
All posts under this topic will be deleted ?
Pending draft ... Click to resume editing
Discard draft