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.

Since the page scrolling doesn't work form me, I cannot see this topic.

Ok, there is a css for dark mode. But how is browser sopose to switch original css and use dark css instead. Where is a script for that? And if create a button, will it stay in dark mode after refresh?

And if browser is using dark mode isnt codoforum going to be dark as well?

What If I just want to use my forum in dark mode and not every website.

This thing is deffinately need its own button like in here https://dark-mode-baseline.glitch.me/ top right corner little button. But it needs to be in user profile so we don't have to switch it every time we clear cache.

Since the page scrolling doesn't work form me, I cannot see this topic. Ok, there is a css for dark mode. But how is browser sopose to switch original css and use dark css instead. Where is a script for that? And if create a button, will it stay in dark mode after refresh? And if browser is using dark mode isnt codoforum going to be dark as well? What If I just want to use my forum in dark mode and not every website. This thing is deffinately need its own button like in here https://dark-mode-baseline.glitch.me/ top right corner little button. But it needs to be in user profile so we don't have to switch it every time we clear cache.

My page http://russianmichigan.ml/MadRomas

@pupsik

As mentioned: My CSS 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. So there is no need for a extra button because it depends on your browsers day/night mode setting. If you use a dark/night mode within your browser then Codoforum will also use dark/night mode by default.

But that was only a fix and fast idea and I also think it would be nicer to have a button to choose a day/night mode or even other Codoforum themes. So something like a integrated style chooser script at the top of the navigation.

I`ll think about a good solution.

Kind regards, Andy smile

@pupsik As mentioned: My CSS 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. So there is no need for a extra button because it depends on your browsers day/night mode setting. If you use a dark/night mode within your browser then Codoforum will also use dark/night mode by default. But that was only a fix and fast idea and I also think it would be nicer to have a button to choose a day/night mode or even other Codoforum themes. So something like a integrated style chooser script at the top of the navigation. I`ll think about a good solution. Kind regards, Andy :)

🚽 planing my next project 🪔

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

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

Thats the issue. Lets say i dont want to use dark mode on browser, just on codoforum.

That button on profile wlil be a issue, to use as profile settings. If they can impliment it, hell, that would be awesome , but way more work tho.

Thats the issue. Lets say i dont want to use dark mode on browser, just on codoforum. That button on profile wlil be a issue, to use as profile settings. If they can impliment it, hell, that would be awesome , but way more work tho.

My page http://russianmichigan.ml/MadRomas

102
4
3
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