Giter Club home page Giter Club logo

Comments (4)

miketheman avatar miketheman commented on June 15, 2024

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:

&.syntax--inserted {
color: @syntax-color-added;
}

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.

ybart avatar ybart commented on June 15, 2024

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.

miketheman avatar miketheman commented on June 15, 2024

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.

ybart avatar ybart commented on June 15, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.