Comments (4)
Hi @ybart ! This is a nice idea.
I've been using the built-in mechanisms for selecting colors for the diff text, based on variables that theme designers can then override. Example:
language-diff/styles/diff.less
Lines 4 to 6 in ae62323
I'm not certain that choosing definitive values is the right way to go here - are you aware of any specific theme color variables that are used across all Atom themes to highlight/invert?
from language-diff.
I'm not aware of such variables names. However, ˋsyntax-backgoround-color-addedˋ might be a good fit.
We might also need to lighten and desature foreground colors as well to achieve a clean result.
Maybe we could also derivate these from syntax-background-color?
from language-diff.
Hi @ybart -
I spent a few hours trying to figure out the right way to do this.
An inherent problem is that I haven't figured out a way to "detect" if the user's theme is a dark or light one, and then shade/tint the colors accordingly. This may exist in LESS or Atom, I haven't found it yet.
The danger of using absolute values is that the behavior changes based on the user's theme, and I want to provide the best possible solution that doesn't look "bad" on a user's screen.
I had tried using contrast
to change the background/foreground colors based on the syntax's background, but haven't been able to find the right mix of statements and logic.
I'll leave this issue open for now, but anyone looking to help out with this is welcome to.
from language-diff.
Thanks you very much for your investigation. Unfortunately I don't have much time to investigate now. However I found this stack question interesting. However it will require some time to adjust and test with most common themes.
https://stackoverflow.com/questions/21600825/conditional-css-based-on-background-color-variable
A faster option would be to propose 2 or 3 variants and let the user choose in settings.
from language-diff.
Related Issues (9)
- Cannot see diff lines HOT 2
- Deprecated selector in `language-diff\styles\diff.less`
- Changes required due to TextBuffer.save becoming async in Atom 1.19
- Support for word diffs HOT 1
- Side-by-side view HOT 2
- Doesn't higlight '@@' markers HOT 4
- Feature Request: Better support for recursive diffs HOT 5
- Deprecated selector in `language-diff/styles/diff.less` HOT 6
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 language-diff.