protesilaos / modus-themes

Highly accessible themes for GNU Emacs, conforming with the highest standard for colour contrast between background and foreground values (WCAG AAA).
https://protesilaos.com/emacs/modus-themes
GNU General Public License v3.0
526 stars 29 forks source link

whitespace-mode #80

Closed oliverepper closed 1 year ago

oliverepper commented 1 year ago

Hi @protesilaos,

I'd love to use the whitespace-mode in Emacs but the whitespaces don't have the right background color in the modus-themes. Ist there an easy way that I can fix this for myself?

If I set it like this:

(custom-set-faces
 `(whitespace-space
   ((t(:background ,(face-attribute 'default :background))))))

it doesn't update when I toggle/cycle through the themes.

DivineDominion commented 1 year ago

@oliverepper All the overrides need to be re-evaluated when you toggle themes.

Here's an example from my config:

(defun ct/modus-themes-customize-mode-line ()
  "Apply padding to mode-line via box that has the background color"
  (modus-themes-with-colors
    (custom-set-faces
     `(mode-line ((,c :box (:line-width 10 :color ,bg-mode-line-active))))
     `(mode-line-inactive ((,c :box (:line-width 10 :color ,bg-mode-line-inactive)))))))
(add-hook 'modus-themes-after-load-theme-hook #'ct/modus-themes-customize-mode-line)

The modus-themes-with-colors macro helps resolve the symbols correctly in the current context after the theme change.

After Sacha Chua blogged about this where I chimed in with the same advice of the v4.0 state-of-the-art macro usage, there's now a getter as well: modus-themes-get-color-value https://github.com/protesilaos/modus-themes/commit/0ca79257ef941ff5f9ec34f5d76eed2ff35d7752

protesilaos commented 1 year ago

Hello folks! @oliverepper beside what @DivineDominion wrote, I am curious about this:

I'd love to use the whitespace-mode in Emacs but the whitespaces don't have the right background color in the modus-themes.

Do you have any ideas on how to improve those styles? This is a tricky case because the characters need to be subtle, but not too subtle. Perhaps we could add semantic colour mappings to each theme's palette and then allow users to use the exact shade of grey (or whatever) they prefer.

oliverepper commented 1 year ago

I love to see modus-themes support whitespace-mode!

At first I thought it would be easy, but at second glance I discovered features of the whitespace mode that require more thought. I'll attach a screenshot. What you can see in the screenshot is that the background is the most distracting. This should be an easy fix at least for the leading spaces and tabs. There is a subtlety with the long lines (marked in yellow), though. See the first line below ** Packages. This is indented by org-indent-mode so there is just one space before the word "missing". If you want that kind of information to be still "visible" it becomes more involved. (the point being that there is a difference if the user entered the leading spaces (for now they appear with background) or the indent-mode added them (no background))

I might give it a shot to integrate the semantic color mappings in modus, but when it comes to the actual colors & aesthetics I consider myself as in need of help.

Bildschirmfoto 2023-05-12 um 09 11 52

Additional information about the whitespace-mode: https://github.com/VernonGrant/discovering-emacs/blob/main/show-notes/4-using-whitespace-mode.md

DivineDominion commented 1 year ago

I'd remove background everywhere, to be honest, and use a faint gray foreground (with light theme):

2023-05-12 11-58-43 Emacs-mac -  protesilaosmodus-themes  wh… - GNU Emacs at mbp21max@2x

Setting whitespace-space to

 (:foreground "#d0d0d0" :background "nil")
oliverepper commented 1 year ago

@DivineDominion Sure. That would do it for me, too. But it would be nice to be able to support all of what whitespace-mode can do out-of-the box with modus-themes. If not for Python or Makefiles the spaces vs tabs thing is not that relevant, right? But I remember haunting ghost-bugs with unprintable (invisible) UTF-8 chars in the past, though. And I was intrigued by the long-lines feature. Much nicer than a vertical bar somewhere on the screen.

protesilaos commented 1 year ago

I'd remove background everywhere, to be honest, and use a faint gray foreground (with light theme):

This also works for me. Though I am concerned it may be too subtle. I have no better alternative to propose though. Adding the semantic colour mappings means that uses can make those as intense as they see fit.

protesilaos commented 1 year ago

And I was intrigued by the long-lines feature.

This is more tricky. To me it seems like this should be a subtle warning (perhaps colourise text in yellow?) but not like it is now.

I simply adapted the default faces, but was never happy with this. My problem is that I am not using any programming language that is space-sensitive. My usage of the whitespace-mode is limited to the occasional check for invisible characters.

protesilaos commented 1 year ago

Any thoughts on this diff?

 modus-operandi-deuteranopia-theme.el |  5 +++++
 modus-operandi-theme.el              |  5 +++++
 modus-operandi-tinted-theme.el       |  5 +++++
 modus-themes.el                      | 12 ++++++------
 modus-vivendi-deuteranopia-theme.el  |  5 +++++
 modus-vivendi-theme.el               |  5 +++++
 modus-vivendi-tinted-theme.el        |  5 +++++
 7 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/modus-operandi-deuteranopia-theme.el b/modus-operandi-deuteranopia-theme.el
index 98bcfd3..3cd0fb0 100644
--- a/modus-operandi-deuteranopia-theme.el
+++ b/modus-operandi-deuteranopia-theme.el
@@ -345,6 +345,11 @@ ;;;; Rainbow mappings
       (rainbow-7 yellow-faint)
       (rainbow-8 cyan)

+;;;; Space mappings
+
+      (bg-space unspecified)
+      (fg-space border)
+
 ;;;; Heading mappings

       (fg-heading-0 cyan-cooler)
diff --git a/modus-operandi-theme.el b/modus-operandi-theme.el
index 09723cd..4b27163 100644
--- a/modus-operandi-theme.el
+++ b/modus-operandi-theme.el
@@ -343,6 +343,11 @@ ;;;; Rainbow mappings
       (rainbow-7 blue-warmer)
       (rainbow-8 magenta-warmer)

+;;;; Space mappings
+
+      (bg-space unspecified)
+      (fg-space border)
+
 ;;;; Heading mappings

       (fg-heading-0 cyan-cooler)
diff --git a/modus-operandi-tinted-theme.el b/modus-operandi-tinted-theme.el
index e3f6927..f03ac39 100644
--- a/modus-operandi-tinted-theme.el
+++ b/modus-operandi-tinted-theme.el
@@ -342,6 +342,11 @@ ;;;; Rainbow mappings
       (rainbow-7 blue-warmer)
       (rainbow-8 magenta-warmer)

+;;;; Space mappings
+
+      (bg-space unspecified)
+      (fg-space border)
+
 ;;;; Heading mappings

       (fg-heading-0 cyan-cooler)
diff --git a/modus-themes.el b/modus-themes.el
index 272fcc9..f40d27d 100644
--- a/modus-themes.el
+++ b/modus-themes.el
@@ -3931,14 +3931,14 @@ ;;;;; which-key
 ;;;;; whitespace-mode
     `(whitespace-big-indent ((,c :inherit modus-themes-subtle-red)))
     `(whitespace-empty ((,c :inherit modus-themes-intense-magenta)))
-    `(whitespace-hspace ((,c :background ,bg-dim :foreground ,fg-dim)))
-    `(whitespace-indentation ((,c :background ,bg-dim :foreground ,fg-dim)))
-    `(whitespace-line ((,c :inherit modus-themes-subtle-yellow)))
-    `(whitespace-newline ((,c :background ,bg-dim :foreground ,fg-dim)))
-    `(whitespace-space ((,c :background ,bg-dim :foreground ,fg-dim)))
+    `(whitespace-hspace ((,c :background ,bg-space :foreground ,fg-space)))
+    `(whitespace-indentation ((,c :background ,bg-space :foreground ,fg-space)))
+    `(whitespace-line ((,c :background ,bg-space :foreground ,warning)))
+    `(whitespace-newline ((,c :background ,bg-space :foreground ,fg-space)))
+    `(whitespace-space ((,c :background ,bg-space :foreground ,fg-space)))
     `(whitespace-space-after-tab ((,c :inherit modus-themes-subtle-magenta)))
     `(whitespace-space-before-tab ((,c :inherit modus-themes-subtle-cyan)))
-    `(whitespace-tab ((,c :background ,bg-dim :foreground ,fg-dim)))
+    `(whitespace-tab ((,c :background ,bg-space :foreground ,fg-space)))
     `(whitespace-trailing ((,c :inherit modus-themes-intense-red)))
 ;;;;; window-divider-mode
     `(window-divider ((,c :foreground ,border)))
diff --git a/modus-vivendi-deuteranopia-theme.el b/modus-vivendi-deuteranopia-theme.el
index 6432120..9310948 100644
--- a/modus-vivendi-deuteranopia-theme.el
+++ b/modus-vivendi-deuteranopia-theme.el
@@ -344,6 +344,11 @@ ;;;; Rainbow mappings
       (rainbow-7 blue-faint)
       (rainbow-8 magenta-faint)

+;;;; Space mappings
+
+      (bg-space unspecified)
+      (fg-space border)
+
 ;;;; Heading mappings

       (fg-heading-0 cyan-cooler)
diff --git a/modus-vivendi-theme.el b/modus-vivendi-theme.el
index b18cb69..655f267 100644
--- a/modus-vivendi-theme.el
+++ b/modus-vivendi-theme.el
@@ -342,6 +342,11 @@ ;;;; Rainbow mappings
       (rainbow-7 blue-warmer)
       (rainbow-8 magenta-warmer)

+;;;; Space mappings
+
+      (bg-space unspecified)
+      (fg-space border)
+
 ;;;; Heading mappings

       (fg-heading-0 cyan-cooler)
diff --git a/modus-vivendi-tinted-theme.el b/modus-vivendi-tinted-theme.el
index a44c140..1f8a276 100644
--- a/modus-vivendi-tinted-theme.el
+++ b/modus-vivendi-tinted-theme.el
@@ -342,6 +342,11 @@ ;;;; Rainbow mappings
       (rainbow-7 blue-warmer)
       (rainbow-8 magenta-warmer)

+;;;; Space mappings
+
+      (bg-space unspecified)
+      (fg-space border)
+
 ;;;; Heading mappings

       (fg-heading-0 cyan-cooler)
DivineDominion commented 1 year ago

Looks good to me (way better than the default!) though I'll personally maybe override the foreground with an even lighter gray in the future. Will see after test-driving this.

I'm not sure if using the name "border" will work well forever: usually, you want borders to stick out as separators, while at least for whitespace, I want something subtle. I could see the border color to become darker in the future for this reason, while the whitespaces likely shouldn't get darker.

protesilaos commented 1 year ago

From: Christian Tietze @.***> Date: Mon, 15 May 2023 22:06:12 -0700

Looks good to me (way better than the default!) though I'll personally maybe override the foreground with an even lighter gray in the future. Will see after test-driving this.

Very well! What do you think about the long lines which turn into yellow? I think this may be confusing, especially in a buffer where a linter is also running and highlighting lines.

-- Protesilaos Stavrou https://protesilaos.com

DivineDominion commented 1 year ago

I noticed that, but I don't have any particular opinion on that. When you are typing and the line changes to yellow, I guess the feedback will be more clear.

protesilaos commented 1 year ago

You are right: it is clear in that scenario. It may be confusing for existing lines. For example, you open a file and have flymake-mode and whitespace-mode run via a hook.

I think the problem is with it being a warning. But I do not have a better idea, as every other colour would still be problematic in some way.

I am pushing the changes now and we can review them further, if needed.

Thank you!

DivineDominion commented 1 year ago

For what it's worth, I'd prefer if the mode highlighted excess characters, not the whole line. But that's not modus's concern :)

oliverepper commented 1 year ago

Thanks very much for this! It's really quite useable, now. I guess the long-lines thing is not that important, anyways.

protesilaos commented 1 year ago

Thanks very much for this!

You are welcome! We can safely close this now.

I guess the long-lines thing is not that important, anyways.

Sure! I have no better style for them, anyway.