Comments (5)
In my opinion each theme should define its own set of configurable color variables with names and default values that follow corresponding HIG (like "primary", "secondary" and "accent" in Material Design).
Then Electron users could override those variables with values retrieved from the system using systemPreferences.getColor(color) and systemPreferences.getAccentColor() APIs:
document.body.style.setProperty("--accent-color", systemPreferences.getAccentColor());
Currently those APIs work only on Windows, but I don't see any reason why they couldn't be extended to macOS and Linux in future.
from xel.
According to the CSS Color Module Level 4 spec the system color keywords should have hard-coded values which does not make them that useful. Are you able to distinguish between the Blue and Graphite macOS appearances using them?
The macOS theme is already using BlinkMacSystemFont keyword to apply the system font.
from xel.
I think Chrome indeed already uses hardcoded values (firefox follows my system colors) so it might be less useful in that regard. But: worst case is you have a nice abstraction on which to base your color names, and the defaults will be colors that work well together (undefined environments/styles would get that, and if you specifically go for "the macOS" style, you could overlay the current macOS styling)
They have been deprecated in CSS module 4, but the CSS3 replacement "Appearance", whilst not fully supported, could also help for example to style buttons on macOS.
from xel.
I get wanting to follow the HIGs in naming, and using the Electron apis like that sounds like a good idea as well! :)
from xel.
Done in Xel 0.9.
from xel.
Related Issues (20)
- <x-menu> The status will be deselected
- please fix relative import paths HOT 1
- package.js doesn't process theme files / iconsets on Windows.
- Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'styleMap') at #k (xel.js:1:51212) HOT 3
- Typescript support? HOT 1
- x-tagsinput leaves a trailing comma. HOT 1
- Deprecate global "size" setting HOT 1
- Popover API migration
- CSS Anchor Positioning API migration
- <x-input> Width HOT 1
- Can animation be disabled on elements? HOT 4
- No support for scrolling? HOT 5
- Popovers in <x-buttons> don't close HOT 2
- <x-tab> disabled prop does not work HOT 1
- <x-tooltip> does not work with <x-menuitem> HOT 4
- Some <x-colorselect> events don't work HOT 2
- <x-colorselect> returns selected value in rgb(...) format in some cases HOT 1
- <x-radios> don't have a change event HOT 3
- Support for <x-tooltip> in <x-select>
- "decrement-arrow" has wrong rotation HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from xel.