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.
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 ¯\_(ツ)_/¯
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 ( *{ } )
@@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
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
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.
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.
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.
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) );
🎯 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
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?"
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.
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);}"
Not all héros wear cape, you're saving lives 😌😌😌
and eyes!
And lines! (of code)
@bufferhead_ source code please
héros en anglais, c'est "heroes" sans accent
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.
Ever get a recommendation about something you have only ever THOUGHT about and just be like: 😦
Broo this is awesomee.. its legit only a single line of code 🤣🤣.. big thanks, great job
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 ¯\_(ツ)_/¯
Quickly tried it and it seems to work great !
Please, make a browser extension for this! amazing work!
dark reader
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
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
You are a super mega hero! Thankssssssss
Thank you, works very well ⭐👏
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.
tryna gimme the code to copy and paste???
Great job as always
Thank you so much I appreciate it 🥰
Wikipedia's images are slightly desaturated in Dark Mode.
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.
How about creating a browser extension similar to Dark Reader?
You need to make it work with svg...
I just use dark reader addon and call it a day
After adding this, my fixed navbar doesn't scroll with the page, what could the script interfere
Keep up the good work.
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.
Great Work!
Thank you!
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)
);
good video, thank you
is this a google chrome browser extension?
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)
🎯 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
could you please tell me the font used for "Dark mode is amazing" text?
Baloo :)
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
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.
does this work on Shopify?
if shopify has a css editor than yes
hmmmm, very interesting
On LCD panels, black actually uses more power, as it consumes electricity to block out the backlight
You're 100% german or switer or austria.
I am from Austria yes 🙈
@@bufferhead_ Grüße aus Berlin 😂
you're Magnifique
👍🏻
please call it libary thx
very epiuc
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
Yes
No
just do like...
@media (preferes-dark-mode: dark) {
:root {
color-scheme: dark;
}
}
@media (preferes-dark-mode: light) {
:root {
color-scheme: light;
}
}