Pretty cool! SVG is incredibly POWERFUL. We’re only just scratching the surface of its capabilities in modern web design. Dig that you’ve included dark theme. SVG opens so much opportunity for branding & moFX. Color me thrilled for what’s next!
Right? I still can't get over how much you can get out of a few lines of SVG code compared to raster formats. Goes double for animation. It does lack a few things (like the support for conic gradients) and could tone down on the tautologies such as
The svg from inside the page changes based on theme, but the favicon remains the same in Chrome and Safari at the time of this writing. The same happens with your example. As you mentioned, at this time it only works on Firefox and Chromium.
The thing I learned when doing this is that you need to make sure that both light and dark mode versions of the icon need to display well when placed on both light and dark backgrounds. You can't just assume that your light mode icon will be placed on a light background and vice versa.
@@BenjaminAster that doesn't work well for all layouts. Particularly when the background color is integral to the design. Otherwise you need 2 backgrounds. Then you lose valuable real-estate.
Do favicons in the tabs of Chrome update yet when you switch between dark/light themes? Last time I checked you had to refresh the page for it to update.
Awesome work! Definitely inspired me to go try some things. Wonder if mix-blend-modes would work - or at least transparency. Oh, and just a thought: given the size of the viewBox, you could round the coordinates to a single digit after the decimal point. I tried integers, even, and there is no significant difference.
Love it! Will be using this from now on he :) Lately I had to implement a custom context menu for a client, I thought a lot about accessibility and light and dark theme. Would love an episode on this
I've considered a context menu component, but i'm on the fence. not sure how i'd make it accessible to touch and keyboard. the split button GUI Challenge tho has lots of relevant crossover, especially with icons and theming. Thanks for watching!
Wait a minute, is that a specific app you use for previewing it in all browsers in one? Or do you just have 'em all open at once? Thanks for the tutorial nevertheless, def gonna try it out for my next project 👍🏼
@@TheDocPixel polypane is for seeing multiple instances of the page at once, but it's built on top of chromium, so you're not getting cross browser previewing in one app. i have each installed and open at once.
Another interesting video. I wish the punctuation such as double quotes were visible in your slides.
It's an accesibility nightmare that has been pointed out in the last couple of videos. Surprised at the insistence on using this theme
@@taskforce_kerim ...bun
Pretty cool! SVG is incredibly POWERFUL. We’re only just scratching the surface of its capabilities in modern web design. Dig that you’ve included dark theme. SVG opens so much opportunity for branding & moFX. Color me thrilled for what’s next!
Right? I still can't get over how much you can get out of a few lines of SVG code compared to raster formats. Goes double for animation. It does lack a few things (like the support for conic gradients) and could tone down on the tautologies such as
The svg from inside the page changes based on theme, but the favicon remains the same in Chrome and Safari at the time of this writing.
The same happens with your example. As you mentioned, at this time it only works on Firefox and Chromium.
Thank you, Adam.
Really like this vide format :) Keep it up!
The thing I learned when doing this is that you need to make sure that both light and dark mode versions of the icon need to display well when placed on both light and dark backgrounds. You can't just assume that your light mode icon will be placed on a light background and vice versa.
The simple solution here is to use colors as icon backgrounds and not just shades of gray
@@BenjaminAster that doesn't work well for all layouts. Particularly when the background color is integral to the design. Otherwise you need 2 backgrounds. Then you lose valuable real-estate.
Awesome, love every video from Adam! Really inspirational for UX engineers / Full stack designers!!
Google can you please take initiative and define the flexbox system for SVG?
Do favicons in the tabs of Chrome update yet when you switch between dark/light themes? Last time I checked you had to refresh the page for it to update.
you gotta refresh still
Amazing dude, please share your VS code theme, it’s sick!
Kung Fury 🤘💀
github.com/argyleink/Kung-Fury-Theme
thank you so much, that's one thing less now to worry about.
Makasih udah berbagi video yang bagus dan fitur-fitur yang makin canggih
When I add fallback ico file, edge is always picking the ico instead of svg.
What about all those other icon declarations like apple touch icon etc.? This doesn't work for that, does it?
Awesome work! Definitely inspired me to go try some things. Wonder if mix-blend-modes would work - or at least transparency. Oh, and just a thought: given the size of the viewBox, you could round the coordinates to a single digit after the decimal point. I tried integers, even, and there is no significant difference.
Nice!!
why do you use ids in your paths instead of having 2 separate classes?
Love it! Will be using this from now on he :)
Lately I had to implement a custom context menu for a client, I thought a lot about accessibility and light and dark theme. Would love an episode on this
I've considered a context menu component, but i'm on the fence. not sure how i'd make it accessible to touch and keyboard. the split button GUI Challenge tho has lots of relevant crossover, especially with icons and theming. Thanks for watching!
@@AdamArgyleInk Thanks Adam!
Wait a minute, is that a specific app you use for previewing it in all browsers in one? Or do you just have 'em all open at once? Thanks for the tutorial nevertheless, def gonna try it out for my next project 👍🏼
I think its polypane.app ... a paid developer tool/browser
I have them all open at once!
@@TheDocPixel polypane is for seeing multiple instances of the page at once, but it's built on top of chromium, so you're not getting cross browser previewing in one app. i have each installed and open at once.
What font is this being used?
I am now sure that Adam uses Synthwave'84 as his VSCode theme
Hey, awesome vid! I was wondering how do you zoom in like that (2:07)
it's an accessibility feature of MacOS that i've adjusted and memorized the hotkey for!
@@AdamArgyleInk thanks!
I use css variable for changing the colors
But you can't set a variable in someone's bookmark folder, in their tablist or on their homescreen 🤔
4
2 ether for your icon as NFT.
which theme, dark or light? 4 ether since it's adaptive, you get a 2-in-1 lol
@@AdamArgyleInk sorry I was bluffing, how about a sub instead
@@dgcp354 hehe, rad 👍🏻
👍 9312066 👎 241
Those quotation mark are super hard to see. Otherwise, totally cool video, just as always.