search

beekman / magical-selection

This plugin for Atom Text Editor makes the background of selected text cycle in a magical rainbow gradient. Concatenate text selection like a sourceror! Other Atom text selection plugins don't feature both animation and gradients. Other plugins also don't call on arcane powers beyond the mortal plane.
Apache License 2.0
5 stars 0 forks source link

Selected text in light themes is nearly unreadable #8

Closed beekman closed 8 years ago

beekman commented 8 years ago

We've discussed a few different solutions to get this effect to look good in light themes.

One possibility: we change the default "plain text" color to something lighter when it's selected, maybe white or similar.

beekman commented 8 years ago

Just did a quick inspect in dev mode, it looks like all we need to do is override this selector for selected text as follows:

atom-text-editor, :host {
        color: white;
}

basically, this is what a light theme's relevant css would be similar to:

atom-text-editor,
:host {
  background-color: #ffffff;
  color: #1d1f21;
beekman commented 8 years ago

Addressed in a quick and dirty fashion by 67eef39 As a quick patch, I've added this style: :host { &::shadow { .selection .region { color:white; } }

beekman commented 8 years ago

Tested, and the above doesn't actually work. Discussed with mhulse, and we decided to make alternate palette options for light and dark themes.

beekman commented 8 years ago

With regards to changing the body class: This won't work, because the body tag is overridden by the UI theme (for interface outside of editor) and Syntax theme (for UI inside the editor). The path, just FYI, is /html/body/atom-workspace/atom-workspace-axis/atom-workspace-axis/atom-pane-container/atom-pane/div/atom-text-editor-- body is WAY outside the atom-text-editor tree that we use to style! Instead of body, could we target atom-text-editor (which is a tag, not a class)? Or maybe

atom-text-editor,
:host

Here's an interesting discussion on the topic with relevant info.

beekman commented 8 years ago

I'm working on a test that involves the use of :host-context(.magical-selection-light) and :host-context(.magical-selection-dark).

Some info on theming elements in the shadow DOM:

The :host-context(<selector>) pseudo class matches the host element
 if it or any of its ancestors matches <selector>.

A common use of :host-context() is for theming an element based on its surrounds.

For example, many people do theming by applying a class to <html> or <body>:
<body class="different">
  <x-foo></x-foo>
</body>
You can :host-context(.different) to style <x-foo> when it's a descendant of 
an element with the class .different:
:host-context(.different) {
  color: red;
}

This gives you the ability encapsulate style rules in an element's Shadow DOM that uniquely style it, based on its context.

beekman commented 8 years ago

70d7427 resolves this issue by adding unique @keyframes for light and dark options, and adding a "Go Dark" option to the plugin settings to choose between the two.