Easy way to make Emacs look more "modern"

Easy way to make Emacs look more "modern"

[Daniele Nicolodi]

Hello,

congratulations on the recent major release!

I know that the matter is very subjective (and maybe a similar 
suggestion has been discussed already, although I don't remember seeing 
anything like this) but I would like to suggest what I think is an easy 
way to refresh the look of Emacs and adapt it to the 2020ies taste :-)

I think the Emacs default theme is extremely well curated. However, the 
mode-line has an outdated feel to me. I recently reconfigured it just 
slightly and I thing the look of Emacs improves significantly.

The base of the modification is this:

(let ((bg (face-attribute 'mode-line :background)))
   (set-face-attribute 'mode-line nil
                       :box (list :line-width 4 :color bg :style nil)))

Namely I remove the 1990ies pseudo 3D box and I replace with a slightly 
wider flat box. The total extend of my customization is actually:

(set-face-attribute 'mode-line nil
                     :height 110
                     :background "grey88"
                     :box '(:line-width 4 :color "grey88" :style nil))
(set-face-attribute 'mode-line-inactive nil
                     :height 110
                     :background "grey95"
                     :box '(:line-width 4 :color "grey95" :style nil))

Where I also reduce the font size slightly compared to my main font 
sizer and I use lighter gray tones that better match the rest of my 
desktop, but I realize these are probably even more subjective preferences.

Maybe something to consider for the next major release.

I would also like to give some more air (padding) to the minibuffer, but 
I haven't found a way to do that in the 10 minutes that I looked at it.

Cheers,
Dan

Re: Easy way to make Emacs look more "modern"

[Dmitry Gutov]

Hi!

On 10.04.2022 00:13, Daniele Nicolodi wrote:
> (set-face-attribute 'mode-line nil
>                      :height 110
>                      :background "grey88"
>                      :box '(:line-width 4 :color "grey88" :style nil))
> (set-face-attribute 'mode-line-inactive nil
>                      :height 110
>                      :background "grey95"
>                      :box '(:line-width 4 :color "grey95" :style nil))

That actually does look better. Or more "modern", at least.

Another thing I would suggest -- is use lighter background for the 
currently selected window (compared to the unselected). That is, I'd 
swap the faces in the two statements above.

Emacs currently defaults to the light-background theme and uses a darker 
background in the mode-line of the current window. That makes is lower 
contrast than the non-selected ones. It feels counter-productive and 
seems to go against the contemporary practice in this area.

Re: Easy way to make Emacs look more "modern"

[Daniele Nicolodi]

On 09/04/2022 23:25, Dmitry Gutov wrote:
> Hi!
> 
> On 10.04.2022 00:13, Daniele Nicolodi wrote:
>> (set-face-attribute 'mode-line nil
>>                       :height 110
>>                       :background "grey88"
>>                       :box '(:line-width 4 :color "grey88" :style nil))
>> (set-face-attribute 'mode-line-inactive nil
>>                       :height 110
>>                       :background "grey95"
>>                       :box '(:line-width 4 :color "grey95" :style nil))
> 
> That actually does look better. Or more "modern", at least.
> 
> Another thing I would suggest -- is use lighter background for the
> currently selected window (compared to the unselected). That is, I'd
> swap the faces in the two statements above.
> 
> Emacs currently defaults to the light-background theme and uses a darker
> background in the mode-line of the current window. That makes is lower
> contrast than the non-selected ones. It feels counter-productive and
> seems to go against the contemporary practice in this area.

I actually like the way it looks by default. This is why I classified 
the change of color as a very subjective preference.

Note that the inactive windows get a lower contrast modeline via a 
thinner font (if you use a font that support thin weights, many do not) 
and a lighter foreground.

Changing the box style minimally invasive but IMHO improves the look 
significantly. Of course others may disagree and this is why Emacs is 
maximally customizable :-)

Cheers,
Dan

RE: [External] : Easy way to make Emacs look more "modern"

[Drew Adams]

That's a pretty minor change in appearance.

It's fine with me either way.  (I don't see
a real need to adopt it as the default.)

There's less contrast in the backgrounds of
active and inactive than what we've had -
so it's harder to see which is active.  And
you lose ~1 line of real estate for content.
Those are drawbacks, I think, however minor.

But it's OK by me.
___

However, if there's one thing that really
comes across as old-fashioned, IMO, it's
talking about something being "modern" or
more "modern".

That's been the watchword of has-been
advertising since the middle of the 19th
century (if not soon after Gutenberg).

There's _nothing_ new about declaring
something "modern".  Old as the hills.
So it means nothing.  Nothing more than
suggesting that someone wants to sell it
to folks inclined to jump on the latest
passing band wagon.  Smells of snake oil.

Just speak to _what_ the differences are,
objectively.  And tout the advantages of
those differences.  Never mind trying to
convince folks it's an advancement because
it's sold as a "modern" remedy.
___

[IMO, more important than changing the
"prettiness" of the mode-line is giving
it content that's more useful.  But I see
themes and custom mode-lines that get
adopted only for their "looks", so my
opinion is likely a minority one.]

Re: [External] : Easy way to make Emacs look more "modern"

[Daniele Nicolodi]

On 09/04/2022 23:43, Drew Adams wrote:

> However, if there's one thing that really
> comes across as old-fashioned, IMO, it's
> talking about something being "modern" or
> more "modern".

Sorry, I used "modern" as a shorthand for "better fitting with the 
design of other applications in a recent desktop environment and likely 
more palatable to the users whose taste has been shaped by the use of 
applications styled accordingly to recent graphical design trends".

I just thought that "modern" was shorter and that everyone would have 
understood what I mean. I was wrong, my bad.

Cheers,
Dan

Re: Easy way to make Emacs look more "modern"

[Dmitry Gutov]

On 10.04.2022 00:34, Daniele Nicolodi wrote:
> Note that the inactive windows get a lower contrast modeline via a 
> thinner font (if you use a font that support thin weights, many do not) 
> and a lighter foreground.

Have you tried the suggestion?

When the foreground is dark, lighter foreground creates higher contrast, 
not lower.

Thinner weight does create a lower contrast.

I guess the two tools are working against each other, but the color 
seems to have a stronger effect over here. And not the good one.

Re: [External] : Easy way to make Emacs look more "modern"

[Daniele Nicolodi]

On 09/04/2022 23:43, Drew Adams wrote:
> That's a pretty minor change in appearance.
> 
> It's fine with me either way.  (I don't see
> a real need to adopt it as the default.)
> 
> There's less contrast in the backgrounds of
> active and inactive than what we've had - > so it's harder to see which is active.

How do you define contrast? I am proposing to change only the box color: 
the active box color to a lighter shade and the inactive one to a 
lighter shade. I think the contrast overall is unchanged. But I admit 
that I haven't mathematically computer it.

Cheers,
Dan

Re: [External] : Easy way to make Emacs look more "modern"

[Dmitry Gutov]

On 10.04.2022 00:54, Daniele Nicolodi wrote:
> How do you define contrast?

Roughly speaking, it's the "distance" between the foreground and the 
background colors.

> I am proposing to change only the box color: 
> the active box color to a lighter shade and the inactive one to a 
> lighter shade. I think the contrast overall is unchanged. But I admit 
> that I haven't mathematically computer it.

Of course, your suggestion is fairly orthogonal and can (and should) be 
reviewed on its own.

I just chimed with an additional suggestion in because it reminded be of 
an old peeve of mine.

Re: Easy way to make Emacs look more "modern"

[Philip Kaludercic]

Daniele Nicolodi <daniele@grinta.net> writes:

> Namely I remove the 1990ies pseudo 3D box and I replace with a
> slightly wider flat box. The total extend of my customization is
> actually:

Do you think that the padding is necessary, or would just removing the
3D box suffice?

-- 
	Philip Kaludercic

Re: Easy way to make Emacs look more "modern"

[Po Lu]

Daniele Nicolodi <daniele@grinta.net> writes:

> I know that the matter is very subjective (and maybe a similar
> suggestion has been discussed already, although I don't remember
> seeing anything like this) but I would like to suggest what I think is
> an easy way to refresh the look of Emacs and adapt it to the 2020ies
> taste :-)
>
> I think the Emacs default theme is extremely well curated. However,
> the mode-line has an outdated feel to me. I recently reconfigured it
> just slightly and I thing the look of Emacs improves significantly.

I tried the modifications you attached here, and it doesn't really
appeal to me as particularly modern.  It's not bad either, though.

What would actually be an improvement would be to make NS and W32 draw
boxes with a relief in the "pretty" way that X, PGTK and Haiku do.  Does
anyone want to work on this?  The relevant canonical code is in
`x_draw_relief_rect', but if you're porting it to another platform I
think `haiku_draw_relief_rect' would be easier to understand.

> I would also like to give some more air (padding) to the minibuffer,
> but I haven't found a way to do that in the 10 minutes that I looked
> at it.

That would waste precious screen space, wouldn't it?

Thanks.

Re: Easy way to make Emacs look more "modern"

[Po Lu]

Philip Kaludercic <philipk@posteo.net> writes:

> Do you think that the padding is necessary, or would just removing the
> 3D box suffice?

FWIW, we have themes like modus-vivendi built in for people who want
flat mode lines, I don't see why the default has to change.  I agree
with Drew on this one.

RE: [External] : Easy way to make Emacs look more "modern"

[Drew Adams]

> > There's less contrast in the backgrounds of
> > active and inactive than what we've had - > so it's harder to see
> which is active.
> 
> How do you define contrast? I am proposing to change only the box
> color:
> the active box color to a lighter shade and the inactive one to a
> lighter shade. I think the contrast overall is unchanged. But I admit
> that I haven't mathematically computer it.

I just pulled up Emacs 27.2 twice (`emacs -Q')
and applied your code in one of those instances.

Opened two buffers in two frames, in each instance,
to compare.

It's easier without your changes to tell which
window is selected (active mode-line).  Nothing
mathematical.  Try it, and I think you'll see what
I mean.

Not very important (to me, anyway - maybe wait to
see if someone chimes in about accessibility).

Re: [External] : Easy way to make Emacs look more "modern"

[Visuwesh]

[ஞாயிறு ஏப்ரல் 10, 2022] Drew Adams wrote:

>> > There's less contrast in the backgrounds of
>> > active and inactive than what we've had - > so it's harder to see
>> which is active.
>> 
>> How do you define contrast? I am proposing to change only the box
>> color:
>> the active box color to a lighter shade and the inactive one to a
>> lighter shade. I think the contrast overall is unchanged. But I admit
>> that I haven't mathematically computer it.
>
> I just pulled up Emacs 27.2 twice (`emacs -Q')
> and applied your code in one of those instances.
>
> Opened two buffers in two frames, in each instance,
> to compare.
>
> It's easier without your changes to tell which
> window is selected (active mode-line).  Nothing
> mathematical.  Try it, and I think you'll see what
> I mean.
>

+1.  The contrast is really poor.  This is why I like the Emacs default:
the difference in the background colour combined with the different box
style makes it easy to find the active window.  Moreover, the padding
around the mode-line is excessive and with the scroll-bar turned on, it
looks funny.

> Not very important (to me, anyway - maybe wait to
> see if someone chimes in about accessibility).

I'd say it is very important.  At least for those who use the default
theme primarily.

[ Unfortunately, most "modern" styles tend to sacrifice accessibility
  for eye-candy.  ]

Re: [External] : Easy way to make Emacs look more "modern"

[tomas]

[-- Attachment #1: Type: text/plain, Size: 583 bytes --]

On Sat, Apr 09, 2022 at 09:43:19PM +0000, Drew Adams wrote:

[...]

> However, if there's one thing that really
> comes across as old-fashioned, IMO, it's
> talking about something being "modern" or
> more "modern".
> 
> That's been the watchword of has-been
> advertising since the middle of the 19th
> century (if not soon after Gutenberg).

:-)

I think the last thing entitled to that attribute
should be Computer Modern, and that is from the
eighties. And only because it's Donald Knuth. And
then, it was a pun on Times Modern from... 1931.

Cheers
-- 
t

[-- Attachment #2: signature.asc --]
[-- Type: application/pgp-signature, Size: 195 bytes --]

Re: [External] : Easy way to make Emacs look more "modern"

[Daniele Nicolodi]

On 10/04/2022 04:41, Visuwesh wrote:
> [ஞாயிறு ஏப்ரல் 10, 2022] Drew Adams wrote:
> 
>>>> There's less contrast in the backgrounds of
>>>> active and inactive than what we've had - > so it's harder to see
>>> which is active.
>>>
>>> How do you define contrast? I am proposing to change only the box
>>> color:
>>> the active box color to a lighter shade and the inactive one to a
>>> lighter shade. I think the contrast overall is unchanged. But I admit
>>> that I haven't mathematically computer it.
>>
>> I just pulled up Emacs 27.2 twice (`emacs -Q')
>> and applied your code in one of those instances.
>>
>> Opened two buffers in two frames, in each instance,
>> to compare.
>>
>> It's easier without your changes to tell which
>> window is selected (active mode-line).  Nothing
>> mathematical.  Try it, and I think you'll see what
>> I mean.
>>
> 
> +1.  The contrast is really poor.  This is why I like the Emacs default:
> the difference in the background colour combined with the different box
> style makes it easy to find the active window.  Moreover, the padding
> around the mode-line is excessive and with the scroll-bar turned on, it
> looks funny.

Thank you for giving it a spin. I appreciate the comments. Is this with 
the minimal change I propose, or with the extended one that also changes 
the background colors?

I should also add that I have different preferred color themes and 
tweaks for different monitors and different work environments. I used 
for a while the flattened mode-line only in one combination of these. It 
seems fine here, but I may come to your same conclusion in other setups.

I think restoring the contrast is very easy tweaking the distance 
between the background colors. Maybe the merit of removing the 3D box 
and increasing the padding (box line width technically) should be 
evaluated separately from the exact choice of colors.

Cheers,
Dan

Re: Easy way to make Emacs look more "modern"

[Daniele Nicolodi]

On 10/04/2022 03:10, Po Lu wrote:
> What would actually be an improvement would be to make NS and W32 draw
> boxes with a relief in the "pretty" way that X, PGTK and Haiku do.

Interesting. The platforms where I spend most on my time these days are 
macOS and Windows. This may be one of the reasons why I don't like the 
default mode-line that much.

>> I would also like to give some more air (padding) to the minibuffer,
>> but I haven't found a way to do that in the 10 minutes that I looked
>> at it.
> 
> That would waste precious screen space, wouldn't it?

On the screens I use wasting 6 to 10 pixels for the padding would not 
make a significant difference. However, the smallest screes I use are 
13" high DPI screens.

Does anyone know how to add some padding to the minibuffer?

Cheers,
Dan

Re: [External] : Easy way to make Emacs look more "modern"

[Po Lu]

Daniele Nicolodi <daniele@grinta.net> writes:

> I think restoring the contrast is very easy tweaking the distance
> between the background colors. Maybe the merit of removing the 3D box
> and increasing the padding (box line width technically) should be
> evaluated separately from the exact choice of colors.

I don't have a specific opinion either way, but in my opinion the 3D box
is currently what makes the mode line stand out from buffer text.
Remove it (or even replace it with a flat box), and that contrast is
immediately lost.

N.B. that we already have themes which people who want a mode line
without a raised box can use, such as the several modus themes that come
with Emacs.

Re: Easy way to make Emacs look more "modern"

[Po Lu]

Daniele Nicolodi <daniele@grinta.net> writes:

> On the screens I use wasting 6 to 10 pixels for the padding would not
> make a significant difference. However, the smallest screes I use are
> 13" high DPI screens.

I think the plan is to make device scaling work correctly in Emacs, so
those "6 to 10 pixels" will eventually become device independent and
turn into 12 to 20 pixels (or more) on a high resolution screen.  This
is already what happens on NS (macOS) and PGTK.

XEmacs lets you drag the modeline above the minibuffer to resize it.
Maybe we should have that as an option as well?

Re: Easy way to make Emacs look more "modern"

[Daniele Nicolodi]

On 10/04/2022 08:50, Po Lu wrote:
> Daniele Nicolodi <daniele@grinta.net> writes:
> 
>> On the screens I use wasting 6 to 10 pixels for the padding would not
>> make a significant difference. However, the smallest screes I use are
>> 13" high DPI screens.
> 
> I think the plan is to make device scaling work correctly in Emacs, so
> those "6 to 10 pixels" will eventually become device independent and
> turn into 12 to 20 pixels (or more) on a high resolution screen.  This
> is already what happens on NS (macOS) and PGTK.

Yup. I meant 6 to 8 pixels (but maybe I would like 4 better) in device 
scaled units.  Despite whether it is a good idea or not, how do I add 
the padding to my configuration?

Thank you.

Cheers,
Dan

Re: [External] : Easy way to make Emacs look more "modern"

[Visuwesh]

[ஞாயிறு ஏப்ரல் 10, 2022] Daniele Nicolodi wrote:

> On 10/04/2022 04:41, Visuwesh wrote:
>> [ஞாயிறு ஏப்ரல் 10, 2022] Drew Adams wrote:
>> 
>>> [...]
>>> I just pulled up Emacs 27.2 twice (`emacs -Q')
>>> and applied your code in one of those instances.
>>>
>>> Opened two buffers in two frames, in each instance,
>>> to compare.
>>>
>>> It's easier without your changes to tell which
>>> window is selected (active mode-line).  Nothing
>>> mathematical.  Try it, and I think you'll see what
>>> I mean.
>>>
>> +1.  The contrast is really poor.  This is why I like the Emacs
>> default:
>> the difference in the background colour combined with the different box
>> style makes it easy to find the active window.  Moreover, the padding
>> around the mode-line is excessive and with the scroll-bar turned on, it
>> looks funny.
>
> Thank you for giving it a spin. I appreciate the comments. Is this
> with the minimal change I propose, or with the extended one that also
> changes the background colors?
>

Latter.

> I should also add that I have different preferred color themes and
> tweaks for different monitors and different work environments. I used
> for a while the flattened mode-line only in one combination of
> these. It seems fine here, but I may come to your same conclusion in
> other setups.
>
>
> I think restoring the contrast is very easy tweaking the distance
> between the background colors. Maybe the merit of removing the 3D box
> and increasing the padding (box line width technically) should be
> evaluated separately from the exact choice of colors.
>

I would personally add no padding.  The mode-line already takes enough
space, adding padding to it only worsens the problem (and as I said, the
scroll-bar looks odd with a large mode-line); I personally set the font
height to be a bit smaller than the default face's.

I also believe that 3d box adds to the accessibility part but if the
maintainers decide to remove it, I will add it back to my theme.

> Cheers,
> Dan

Re: Easy way to make Emacs look more "modern"

[Lars Ingebrigtsen]

Daniele Nicolodi <daniele@grinta.net> writes:

> The base of the modification is this:
>
> (let ((bg (face-attribute 'mode-line :background)))
>   (set-face-attribute 'mode-line nil
>                       :box (list :line-width 4 :color bg :style nil)))
>
> Namely I remove the 1990ies pseudo 3D box and I replace with a
> slightly wider flat box.

Yes, looks much better.  Even just doing :style nil without making it
wider is also an improvement.

-- 
(domestic pets only, the antidote for overdose, milk.)
   bloggy blog: http://lars.ingebrigtsen.no

Re: Easy way to make Emacs look more "modern"

[Po Lu]

Lars Ingebrigtsen <larsi@gnus.org> writes:

> Yes, looks much better.  Even just doing :style nil without making it
> wider is also an improvement.

It's much harder to tell the mode line from the surroundings with that
setting applied.

That's not an important issue, so I don't have a strong opinion either
way, but I note that we already have many themes for people who want a
modeline without a raised box, such as modus-vivendi and modus-operandi.

Re: Easy way to make Emacs look more "modern"

[Philip Kaludercic]

Po Lu <luangruo@yahoo.com> writes:

> Philip Kaludercic <philipk@posteo.net> writes:
>
>> Do you think that the padding is necessary, or would just removing the
>> 3D box suffice?
>
> FWIW, we have themes like modus-vivendi built in for people who want
> flat mode lines, I don't see why the default has to change.  I agree
> with Drew on this one.

Right, if anything considering to enable modus-vivendi or adapt the
customizable approach that the modus themes provide would be more
productive.

-- 
	Philip Kaludercic

Re: Easy way to make Emacs look more "modern"

[Pedro Andres Aranda Gutierrez]

[-- Attachment #1: Type: text/plain, Size: 784 bytes --]

Daniele> (set-face-attribute 'mode-line nil
Daniele>                     :height 110
Daniele>                     :background "grey88"
Daniele>                     :box '(:line-width 4 :color "grey88" :style
nil))

I'm using
    (custom-set-faces
     '(mode-line           ((t (:inherit mode-line          :box
(:line-width 8 :style flat-button)))) t)
     '(mode-line-inactive  ((t (:inherit mode-line-inactive :box
(:line-width 8 :style flat-button)))) t))

To get a broader mode-line. flat-button is part of Emacs28

Best, /PA


-- 
Fragen sind nicht da um beantwortet zu werden,
Fragen sind da um gestellt zu werden
Georg Kreisler

Headaches with a Juju log:
unit-basic-16: 09:17:36 WARNING juju.worker.uniter.operation we should run
a leader-deposed hook here, but we can't yet

[-- Attachment #2: Type: text/html, Size: 1364 bytes --]

Re: Easy way to make Emacs look more "modern"

[Daniele Nicolodi]

On 11/04/2022 10:49, Pedro Andres Aranda Gutierrez wrote:
> Daniele> (set-face-attribute 'mode-line nil
> Daniele>                     :height 110
> Daniele>                     :background "grey88"
> Daniele>                     :box '(:line-width 4 :color "grey88" :style 
> nil))
> 
> I'm using
>      (custom-set-faces
>       '(mode-line           ((t (:inherit mode-line          :box 
> (:line-width 8 :style flat-button)))) t)
>       '(mode-line-inactive  ((t (:inherit mode-line-inactive :box 
> (:line-width 8 :style flat-button)))) t))
> 
> To get a broader mode-line. flat-button is part of Emacs28

According to the manual nil or flat-button mean the same thing.

Cheers,
Dan