https://github.com/preethi-dev/dark_mode

Theme preference by OS without toggle
https://github.com/preethi-dev/dark_mode

dark-mode dark-theme

Last synced: 3 months ago
JSON representation

Theme preference by OS without toggle

• Host: GitHub
• URL: https://github.com/preethi-dev/dark_mode
• Owner: Preethi-Dev
• Created: 2021-12-31T12:02:24.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2022-01-04T14:58:47.000Z (over 3 years ago)
• Last Synced: 2025-01-08T22:54:32.040Z (4 months ago)
• Topics: dark-mode, dark-theme
• Language: CSS
• Homepage: https://preethi-dev.github.io/dark_mode/
• Size: 14.6 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# Dark_mode✨

Hey There, Most of the users(specially developers) are the huge fan of dark mode and try to use it on all apps and software.

They will definitely expect enabling dark mode on web content also. So, we can get their theme preference by their OS(In this blog, technically call as "UA" means User Agent) without need to toggle😲😲.

![dark/light mode image](/asset/light_dark_mode.png)

>***We can achieve these without asking help to JavaScript🎉 which really sounds good (Disclaimer: I'm not mean JS is complicated, But we enable these feature as simple as possible).***

## A magical media query🪄

Using 

### @media (prefers-color-scheme: dark) media query,

We can detect if the user has requested a light or dark color theme by User Agent(based on OS settings).

```

@media (prefers-color-scheme: dark) {

  :root {

    --main-bg-color: #040404;

    --card-bg-color: #3a3a38;

    --icon-bg-color: #f7d1a2;

    --main-light-onColor: #aeb4bd;

    --main-dark-onColor: #777676;

  }

}

/* we can also style for light mode*/

@media (prefers-color-scheme: dark) {

}

```

### You can experiment with [Live Demo](https://preethi-dev.github.io/dark_mode/).