Re: [csswg-drafts] [css-color] [css-ui-4] Authors should have access to accent-color value to use in their code (#5900)

> Are there any use cases where authors need to access the OS default accent color _even_ if there is an `accent-color` set? I don't see any, but I could well be missing them. But if there aren't, I don't understand the rationale for this — it complicates the language and the number of keywords authors need to learn with no discernible benefit. Remember theoretical purity is at the bottom of the PoC.

Personally, `accent-color` is useless for me. I have no interest in using system controls. I want to use custom elements and styled to match the system's accent's hue. That includes default, hover, active states. 

----

[Material Design](https://m3.material.io/styles/color/system/overview) has color schemes completely designed around one user accent color in RGB. From there you extrapolate the rest of the colors.  That's the default on Android, and if I want my Web Applications to look native, it starts there.

A live example of what the Web Components look like can be seen here: https://clshortfuse.github.io/materialdesignweb/components/buttons.html with the default based around a single color: #6750A4; the alt is based around #9a4522:

![image](https://github.com/user-attachments/assets/465f24db-c4c4-4bc9-a875-feea40f06026)
![image](https://github.com/user-attachments/assets/1e43f201-b9e7-4b58-b789-9e8ea3578e35)

---

For Windows 11 accents on the native controls also use the system color scheme:
![image](https://github.com/user-attachments/assets/ad122a7d-39c6-4780-b142-506f2b6e57fb)
![image](https://github.com/user-attachments/assets/35b122a7-4fe7-4be6-9ea3-b706081be0c1)
![image](https://github.com/user-attachments/assets/50ff9eff-e9ad-4f97-b5f6-733c19796ced)

If somebody where to want to build an Electron app that looks like native Windows then that color would be important.

----

iOS, iPadOS, Mac OS, tvOS all use variations of the system [accent color](https://developer.apple.com/documentation/swiftui/color/accentcolor) for controls. 

![image](https://github.com/user-attachments/assets/66e12ef1-586d-45a9-9f4a-0e82f4501340)
![image](https://github.com/user-attachments/assets/bb571580-7f8d-4351-9120-40fcbe6484b2)

---

Since we are talking Web Components, then you'd have to recreate the native looking controls as Web Components. Personally, I don't want to make one application in JS for Web, one in Kotlin for Android, one in Swift for iOS, and one in .NET for Windows. I use PWAs, which I feel is one of great strengths of Web. I've done the work for Android and ChromeOS (Material Design), and others like ([Ionic](https://ionicframework.com/docs/api/toggle)) have done the legwork for iOS. There are even frameworks like React Native that are built to extend that native feeling all the way to being actually native code on host OS's.



-- 
GitHub Notification of comment by clshortfuse
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5900#issuecomment-2306022170 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 23 August 2024 01:45:26 UTC