Add Dark Mode to YOUR website with a single line of code
Vložit
- čas přidán 30. 11. 2023
- Dark Mode (also known as Night Mode) is one of the most popular webdesign trends of the year. Many websites go dark mode exclusively while other ones like Wikipedia are missing this essential feature. Dark Mode might be better for your eyes, improve battery life and save energy, but the implementation is time consuming. With the javascript and css microframework darkowl i make it is easy to integrate dark mode into your website with a single line of code.
===
If you want to support me, check out solidtime, an open-source time-tracker i'm building: www.solidtime.io/
===
Nightowl Github Repository
github.com/bufferhead-code/ni...
Original article by Aral Balkan:
ar.al/2021/08/24/implementing...
= = = = = =
Darkmode can be implemented in a variety of ways using darkmode features of tailwind CSS or CSS Variables to set colors of text and backgrounds dynamically based on the preferred colors scheme setting of a browser and operating system. But what you end up doing is basically inverting most colors and assigning them again. With darkowl.js this process can be automated to some extend and speed up the implementation of dark mode for simple website a lot. Webdevelopment doesn't have to be difficult.
Music from #Uppbeat (free for Creators!):
uppbeat.io/t/hartzmann/purple...
License code: VWWRDEFWATQMADGZ - Věda a technologie
Not all héros wear cape, you're saving lives 😌😌😌
and eyes!
And lines! (of code)
@bufferhead_ source code please
Looks very good, but the way you invert colors can sometimes cause you to lose on contrast and readability.
Take a look at the Dark Reader extension.
It adds the option to turn *any* website to dark theme, and they results are extremely good - colors look good and accurate, and elements' contrast also remains good.
You might be able to take inspiration from how it calculates inverted colors and implement it.
I don’t really understand why it would lead to contrast issues apart from images/icons which are not inverted. The contrast ratio should stay basically the same.
I had a look at darkreader before starting the project. The problem is that they have ~ a lot ~ of custom rules for all sorts of websites. That’s also why it works well. But it also makes the source code really big. It also didn’t really give me trust in their default system. The darkreader concept is more flexible but it also introduces a lot more edge cases than the approach used by nightowl.
@@bufferhead_ it's all down to how we perceive colors, i'm no scientist myself to explain it but there's definitely more going on than just inverting and maintaining the same ratios to make dark mode actually look good
@@chadyways8750 those are two different things. The comment claimed the method can lead to contrast issues and I wanted to know why he thinks that.
Obviously you can create better dark modes that the one nightowl produces. But that’s not the point of the library. Nightowl is great for adding dark mode to sites where you do not have the time or resources to program a separate dark mode.
Broo this is awesomee.. its legit only a single line of code 🤣🤣.. big thanks, great job
Ever get a recommendation about something you have only ever THOUGHT about and just be like: 😦
Keep up the good work.
You are a super mega hero! Thankssssssss
This looks like a pretty smart way to solve this problem . I really love when engineers really solves these small problems. I would love to contribute to your code if I can help in anyway please let me know.
Quickly tried it and it seems to work great !
Great job as always
Thank you so much I appreciate it 🥰
Wikipedia has dark mode. After logging in, go to preferences, then gadgets and in apperance tab there is a dark mode option. Just a thing to remember, not every language has this addon, some have addon that changes Vector legacy skin to darkmode
Yes, thanks for the addition. Wikipedia is just one of the most prominent sites that do not provide a public dark mode which is the reason I used it as an example. And most people just do not have an Wikipedia account ¯\_(ツ)_/¯
Great Work!
Thank you!
Once you reach a certain point in css knowledge, you don't need tailwind to "add rules to html". you can do anything without touching html.
Another thing, (that also requires css knowledge besides basics) is that you don't need to redeclare the same rules to revert changes made to images... you could simple in the original rule negate images with the use of :not(img)
the argument was that tailwind makes it easier, not that it is not possible to do in CSS. of course everything in tailwind is also possible in CSS, it's CSS in the end.
:not(img) will not work in this case as the filter is applied to the body element, not to every single element ( *{ } )
Thats true
@@bufferhead_what if we apply it to the all except the image *:not(img){}?
@@hafsahussein2016probably garbage too, because it would be applied to body (its okay), then if body contains image, it would not invert it back (so it would be ugly), but then if body also contains a div, it would be applied to it, and this div would have lightmode colors
good video, thank you
Please, make a browser extension for this! amazing work!
dark reader
I would like to customize where to place the button to change from dark to light, due to the responsive it is more comfortable to include it in the navbar of the project
How about creating a browser extension similar to Dark Reader?
One way i added a dark mode is by using the glassmorpgism style on my website and to enable dark mode i simply change background color/picture to dark one.
Damn, I wasted 3 hours or so by manually selecting all HTML elements/CSS classes and changing the background and font color of 3 websites I use very often that have no darkmode…
Thanks for the time saving code snippet. I‘m feeling pretty dumb right now 😅
I tried it for the Wikipedia website and the panel on the left isn’t affected by the code, it‘s still bright. I replaced „body“ with „html“ and now it works, everything is dark 🙌🏼
Edit:
Only two things on Wikipedia now don’t work fine: One is formulas. They use black colored SVGs and so can’t be seen when the background gets black also. And the other is when HTML elements have the CSS attribute „background-image“ and insert an image in that way instead of using the img tag in HTML. That doesn’t work either. I didn’t find a fast solution for that, do you? Maybe you can fix that with JavaScript.
So all in all it’s in most cases a good and of course fast way to generate a dark version of a website.
is this a google chrome browser extension?
could you please tell me the font used for "Dark mode is amazing" text?
Baloo :)
Wikipedia's images are slightly desaturated in Dark Mode.
very epiuc
you're Magnifique
I just use dark reader addon and call it a day
tryna gimme the code to copy and paste???
hmmmm, very interesting
Can you add a bookmarklet feature? It would be great for people on mobile that need this.
javascript:(d=>{var css=`:root{background-color:#f1f1f1;filter:invert(1)%20hue-rotate(180deg)}img:not([src*=%22.svg%22]),picture,video{filter:%20invert(1)%20hue-rotate(180deg)}%60,style,id=%22dark-mode%22,ee=d.getElementById(id);if(null!=ee)ee.parentNode.removeChild(ee);else%20{style%20=%20d.createElement('style');style.type=%22text/css%22;style.id=id;if(style.styleSheet)style.styleSheet.cssText=css;else%20style.appendChild(d.createTextNode(css));(d.head||d.querySelector('head')).appendChild(style)}})(document)
👍🏻
You need to make it work with svg...
does this work on Shopify?
if shopify has a css editor than yes
STEPS TO USE BUFFERHEAD'S CODE AS AN EXTENSION:
1) The CDN for Bufferhead's code in some javascript that injects a style tag into the head tag then creates a toggle. You can edit the css to the following:
2) html {
background-color: #111;
}
html body {
filter: invert(100%) hue-rotate(180deg);
}
html img,
html video,
html {
filter: invert(100%) hue-rotate(180deg);
}
html .icon {
filter: invert(15%) hue-rotate(180deg);
}
html pre {
filter: invert(6%);
}
html li::marker {
color: #666;
}
3) Afterwards use the chrome extension Super Dark Mode and use its Custom CSS option. Use the above CSS. Boom, you have Bufferhead's CSS in a Chrome Extension. I use Arc not Chrome but since it's chromium based it still works.
Notes:
I fucking love you this is the simplest smartest CSS I've ever seen.
The epitome of "why didn't I think of that... why didn't ANYONE think of that?"
0:32 bakground 😂
How can I apply this in a wordpress website?
You can add any css rule
🎯 Key Takeaways for quick navigation:
00:00 🎨 *Adding Dark Mode to Websites: Overview*
- Overview of the importance and appeal of dark mode in web design,
- Challenges of manually implementing dark mode on websites,
- Introduction to the concept of automating dark mode integration with CSS.
01:02 🎨 *Exploring CSS Blend Modes*
- Explanation of CSS blend modes and their unconventional use in web design,
- Discussion on using blend modes to invert colors for dark mode implementation,
- Challenges posed by images and icons when applying blend modes.
02:35 🎨 *Utilizing CSS Filters for Dark Mode*
- Introduction to CSS filters and their role in automating dark mode integration,
- Explanation of using CSS filters like invert and hue rotate for dark mode,
- Addressing challenges with images and icons through CSS filters.
03:34 🎨 *Implementing Dark Mode Functionality*
- Discussion on using Prefers Color Scheme CSS feature to detect dark mode preferences,
- Overview of toggling between light and dark mode using Night Owl framework,
- Considerations and caveats when implementing dark mode, such as fixed positioning and contrast issues.
04:06 🎨 *Integration and Future Improvements*
- Instructions for integrating Night Owl framework into websites,
- Plans for future enhancements including handling contrast issues and box shadows,
- Encouragement for testing and providing feedback on the framework's GitHub repository.
Made with HARPA AI
4 minutes for one line code?
You would be surprised how long it can take to write a single line of code, if it’s just the right one. I’ve made spent hours even days on bugfixes that were just a single line of code.
On LCD panels, black actually uses more power, as it consumes electricity to block out the backlight
i do this and it works perfectly fine:
--primary-lightness-500: 61%;
--primary-color-500: var(--hue-color, 240deg) 69%
max(
var(--primary-lightness-500) - var(--dark-mode, 0%),
var(--dark-mode, 0%) - var(--primary-lightness-500)
);
please call it libary thx
You're 100% german or switer or austria.
I am from Austria yes 🙈
@@bufferhead_ Grüße aus Berlin 😂
It isn't one liner.
Actually, any CSS can be made on one line ... 😇
"html.darkMode{filter: invert(100%) hue-rotate(180deg);} html.darkMode svg, html.darkMode img{filter: invert(100%) hue-rotate(180deg);}"
@@dn2648 It looks as a neat approach, but doesn't work for Firefox for some reason.
light is always better!
No
@@nero5661 Yes!
No.
No
Yes