Page MenuHomePhabricator

E/EFL Flat Theme
Open, TODOPublic


E/EFL Flat Theme

A sample screenshot of the flat theme

What is this?

There has been work going on for a while on this in some spare time here and there. Above is a screenshot sample of what it looks like. It's called a "Flat" theme because it is mostly flat made out of rectangles. Some elements get shadows still. Windows, menus, The edges of a scroller region to indicate there is a boundary there to scroll past, and frames. Not everything has been done yet. Just many "very visible" elements.

Why do some things still have shadows in what is meant to be a "flat" theme? Because it just doesn't visually work well without them. They help indicate a boundary where otherwise no boundary at all would make things hard to distinguish. The idea is to not use shadows too much. Only where visually needed.

Not everything is final either. Like any artwork, you have to put it together and adjust as you go to make things "visually work together", but consider what is there as a design direction and overall look and feel. For example the buttons in the above are probably not final, but are awaiting the rest of the theme to come together.

Why do this?

This would make EFL look more "modern" and yet still have a unique look and feel of its own. While documents like the material design one are not bad for inspiration, it would probably be bad to lose uniqueness and just blindly follow it. But at the same time making EFL more "flat" would be a good thing and make a lot of people very happy. It also come with the bonus of making the theme far easier to "re-color". In addition it's more "programmer-friendly" for design.

Help needed

Flat is in git master efl now so building efl builds it. It is the default theme.

What needs doing?

You should find out pretty quickly. If you run enlightenment and elementary_test or any efl apps. You will see elements that are still "the old default" theme. They will stand out like a sore thumb. Just browse through the widgets in elementary_test and see. Go through enlightenment and it's menus, dialogs, file manager and gadgets. It's not at the stage where "things to do" are hidden or hard to find. A short list of things needing doing:

  • Elementary
    • Buttons
    • Check
    • Radio
    • Separator
    • Bubble
    • Scroller
    • Entry
    • List
    • Hoversel
    • Label
    • Bg
    • Inwin
    • Spinner
    • Panes
    • Progress (look at Ibar busy animation for busy inspiration)
    • Slider
    • Mouse cursors beyond default and some resize cursors
    • Genlist (look at simple list for inspiration)
    • Win (CSD for Wayland)
    • Icons (really need a full FDO Icon theme - some are done and look good, some not - have a look at Flat Remix:
    • Gengrid
    • Menus
    • Focus display box
    • Map
    • Photo
    • Video
    • Entry Emoji items
    • Naviframe
    • Toolbar
    • Calendar
    • Ctxpopup
    • Segmentcontrol
    • Popup
    • Index
    • Combobox
    • Tooltips
    • Entry magnifier
    • Actionslider
    • Day Selector
    • Disk Selector
    • Flip Selector
    • Clock
    • Panel
    • Multibutton Entry
    • Slideshow
    • Thumb
    • Code (probably just needs to be color synced)
    • Notify
    • Color Selector
    • Phototcam
  • Efl Widgets
    • Bg
    • Button
    • Calendar
    • Check
    • Collection
    • Cursor
    • Datepicker
    • Focus
    • Frame
    • Grid
    • Group_Item
    • Image_Zoomable
    • List
    • Macros
    • Navigation
    • Navigation_Layout
    • Panel
    • Panes
    • Pointer
    • Popup
    • Progress
    • Radio
    • Scroller
    • Slider
    • Spin
    • Spin_Button
    • Spotlight
    • Tab_Bar
    • Tab_Page
    • Tab_Pager
    • Tags
    • Text
    • Textpath
    • Timepicker
    • Tooltip
    • Uiclock
    • Video
    • Win
  • E legacy widgets (a wide range)
    • Check
    • Radio
    • Toolbar
    • Scrollframe
    • Dialog base
    • Button (legacy not done)
    • Preview/Livethumb
    • Ilist
    • Color
    • Colorslider
    • Colorwell
    • Spectrum
    • Fontpreview
    • Frame
    • Slider
    • Entry
    • Edge Bindings
    • Deskpreview
    • Deskmirror
    • Label
    • Randr (old dialog)
    • Textblock
  • E old gadgets like Music Controller for example (partly done)
    • Gadman move/resize controls
    • Appmenu
    • Pager
    • Start
    • Ibox
    • Battery
    • Ibar
    • Xkb
    • Connman
    • Bluez5
    • Bluez4
    • Systray
    • Tasks
    • Cpufreq
    • Clock
    • Packagekit
    • Temprature
    • Backlight
    • Settings
    • Everything Launcher
    • Tiling
    • Syscon
    • Music Control
    • Mixer
    • Pager Plain/Pager16
  • E General
    • Bryce/Gadgetbar
    • New gadgets
    • Icons/efm (efm, settings, menus etc.)
    • Everything popup/dialog
    • Winlist (alt+tab popup)
    • Wizard
    • Wallpaper (wallpaper2?)
    • Remove old Illume as it has been dropped from E many years ago
  • Other things
    • Color classes (need to actually come up with a proper naming scheme with a hierarchy)
    • Text classes (same naming scheme as color classes needed)
    • Size classes (same naming scheme as color and text classes)
    • Cleaning/refactoring of edc files to be simple and re-use
    • Documentation on swallows, signals, messages etc. needed for elements
    • Ensure theme scales well (test it on range of scale values from maybe 0.8 or so up to 8.0)

Complete: 148 / 155

This is not a final list, but just a starting point of what is left to be done.

To test scaling, either change thee scale factor in enlightenment's Settings -> Look -> Scaling settings and/or run apps like elementary_test like:

ELM_SCALE=2.0  elementary_test

Note that the most common scale factors will be from about 1.0 up to about 2.0 or maybe even 3.0.

To test enlightenment, simple modify the theme, compile and install like above, then restart enlightenment with ctrl+alt+end and see the changes you made. To test elementary, use elementary_test and just run it again after making changes and test the changes you made with the appropriate tests and widgets. Remember you can shortcut to a specific test with elementary_test -to "main menu" for example, or whatever the name of the test is on its normal launch button. It probably is also wise to test existing EFL applications you can find in git too.

I don't like the colors

Whatever arguments for or against the color scheme, this is the scheme used, so please be consistent with it. The point ultimately is to have all colors defined in color classes (shadows might be the exception except for defining alpha so depth of shadow, as a shadow by definition is not a COLOR but an absence of colors thus pushing something to be closer to black than it would be without a shadow). the idea is that eventually we can have multiple color class schemes that can be configured by end users and just selected from a list, then applied (or also custom created or modified). This would work in theory for any theme that is properly designed to re-color via color classes. The default theme should be a prime example of how to do this. So stick to the color scheme that's there, and at a later stage custom variants can be made to be light, beige, pink, purple, green or fully rainbow madness if people like. This should apply to everything, so icons that are "monochrome shapes" should be drawn white then use colors to define the real color in the UI that multiplies the original white color.

A color scheme editor, chooser and applier have yet to be written, so it is a piece of work that needs to be done at some point before all of this settles. Then EFL can ship with a set of color schemes for users to choose from by default. The same way arguing over "it's too small" or "too big" gets solved by just setting a scale value that works well for you, and font preferences can be set with text classes, as well as sizing/padding preferences can be set by size classes. One idea is to also have a color scheme generator that can create a color class set from some existing image/photo. Scan the image pixels and look for "contrasting colors with a reasonable population of pixels" to choose a few base colors then create variations of them for background and foreground elements to ensure they are visible, and perhaps choose lighter or darker colors for specific use cases based on user input etc.

The reason color classes have not been done yet is that it is easier to mess with the colors of an element while designing and putting everything together when the color of that element doesn't affect other elements too. Also the color classes need to be cleanly chosen with a proper hierarchy. For example "ui/background/window/default" so we can in future define "ui/background" and everything under "ui/background/*" will use this color UNLESS it overrides it like "ui/background/window/default" would override "ui/background/window" which overrides "ui/background" which overrides "ui". But this is not perfect because we might also want to define "ui/*/default" as a fallback for anything that matches that glob. This is an undefined and unexplored color scheme naming setup, but it needs to be done, because once we make color classes (and size and text classes) a formally supported "API" in themes, we can't break it. To date this hasn't been formally supported yet. Due to not knowing just how to make this all work, holding off on throwing classes at everything is probably a good idea until patterns become clear across all of the theme.

Might need new edje features

I already added the offscale tag to Edje to enable the relative offsets to be multiplied by scale factors. This seriously simplified making elements scaleable. We may need more features like for the color classes above, as well as maybe a tag and flags to multiply or SET offsets to the value stored in a size class (size classes define a single value for a named class, with the idea that elements can be set to the size or affected by the size stored in a size class, allowing a user for example to adjust the spacing/padding between elements). Most of these features are small and simple, but do not hesitate to notice a feature is probably needed to make things work or be "saner to do", and then add it, or discuss adding it.


Keep in mind a theme is a piece of art work that lives. Decisions are not always made because of some statistic or number, but because "it feels nice" or "looks good". That makes it subjective by nature. A theme works if it is consistent within itself, so everyone throwing in their preferences wherever they like will ultimately lead to something even worse. Consistency is good. If there is to be a change to some design direction it needs to change globally, so keep that in min d when wanting to change something in a way that doesn't "fit". Changes could be far wider reaching that you may think if they are to be done properly.

Also pay attention to details. Zoom in. Use tools like xmag or Eruler: and zoom in to make sure you got things right. Look for off-by-ones and proper centering. Measure pixels to be sure. Quality is an important thing and these little details make a big difference to apparent quality at the end of the day.

Team Work

If this can be done by more than 1 person over a period of time, then we stand a chance of getting this theme into a new release of EFL fairly soon. If not, then it'll move along very slowly. So just devoting a little bit of time here and there is useful if a group of people do it regularly. Sharing your ideas with screenshots would be good. Mess with an idea and pop up a screenshot here on this ticket with "does it look good?". This would be good to get some feedback before you are sure about something.

If you draw something, please keep the original xcf layer files from gimp or svg files from inkscape. There is a data/elementary/themes/orig directory to place original images into. It is important to keep and publish originals in their expanded form as much as source code is important for binaries. It is what allows people to work on top.

If you have commit access, then just doing git commit/push like any source code should do. If you don't using arcanist to raise patches like any source code will also work. This may be an arty project, but it can be done like any normal source code. Make sure you remember to git add dependencies (new edc files, added image files etc.).

There are a very large number of changes, so older changes are hidden. Show Older Changes
This comment was removed by raster.
This comment was removed by raster.
This comment was removed by raster.
This comment was removed by raster.
This comment was removed by raster.
This comment was removed by raster.
This comment was removed by raster.
This comment was removed by raster.
This comment was removed by raster.
This comment was removed by raster.
This comment was removed by raster.
This comment was removed by raster.
This comment was removed by raster.
This comment was removed by raster.
This comment was removed by raster.
This comment was removed by raster.
raster updated the task description. (Show Details)Nov 8 2019, 1:43 AM
raster updated the task description. (Show Details)Nov 8 2019, 9:05 AM
raster updated the task description. (Show Details)Nov 8 2019, 11:21 AM
raster updated the task description. (Show Details)Nov 9 2019, 1:44 PM
raster updated the task description. (Show Details)Dec 1 2019, 2:11 PM
raster updated the task description. (Show Details)Dec 10 2019, 2:55 PM
raster updated the task description. (Show Details)Dec 10 2019, 3:02 PM
raster updated the task description. (Show Details)Dec 10 2019, 3:09 PM
raster updated the task description. (Show Details)
raster updated the task description. (Show Details)Dec 10 2019, 3:14 PM
raster updated the task description. (Show Details)Jan 6 2020, 6:55 AM
raster updated the task description. (Show Details)Jan 6 2020, 9:02 AM
raster updated the task description. (Show Details)Jan 6 2020, 9:46 AM
raster updated the task description. (Show Details)Jan 6 2020, 11:40 AM
raster updated the task description. (Show Details)Feb 8 2020, 2:47 PM
raster updated the task description. (Show Details)Feb 8 2020, 3:17 PM
raster updated the task description. (Show Details)Apr 11 2020, 8:29 AM
raster updated the task description. (Show Details)Apr 22 2020, 3:52 AM

When using flat in efm it cuts filenames too early. With (current) default theme it makes longer filenames 2-liners, and then cuts them. This'd be much more preferable at least to me.

To specify:

  • flat only displays 25 characters in a filename, then cuts it. It only uses 1 line below icon.
  • current default cuts it after 45 characters. It uses 2 lines of text below icon.

Some older themes display the whole filename which is not preferable either to me.

I know you there is "Icons/efm (efm, settings, menus etc.)" to be checked, but does this include filename-wrapping?

This is obviously my preference, just making a comment here to see if this is how you intended it to be. In that case, is there an easy way to make it cut after 2 lines instead?

I don't know what you're on about:



raster updated the task description. (Show Details)Apr 25 2020, 5:25 AM
raster updated the task description. (Show Details)
raster updated the task description. (Show Details)Apr 25 2020, 5:39 AM

Here's how it looks in my use.

it would seem your font is a bit bigger by default and so doesn't fit into the space given to allow for 2 lines.

raster updated the task description. (Show Details)Apr 26 2020, 5:22 AM

Indeed, if I select a font manually and put it as "small" it makes it a 2-liner. But the font becomes unreadably small then. Any idea/reason the "normal" works differently between themes?

Also if I use an older theme, like blingbling from extra, it shows the full filename in a single line (which becomes impossible to use)

try now... i made some more space...

Yes, works for me now. Thank you!

raster updated the task description. (Show Details)Jun 19 2020, 5:31 AM
raster updated the task description. (Show Details)Jun 21 2020, 1:03 PM
raster updated the task description. (Show Details)Jul 9 2020, 5:08 AM
raster updated the task description. (Show Details)Sep 10 2020, 4:18 AM
raster updated the task description. (Show Details)
raster updated the task description. (Show Details)Sep 10 2020, 9:02 AM
gekka added a subscriber: gekka.EditedOct 25 2020, 10:02 AM

Hi, when the new theme will be ready the old default theme will be still provided in the new Enlightenment versions?

no. this will replace the old default. i don't have time to maintain multiple themes in parallel. flat is easier to maintain ads its simpler as well.

ok thanks for the reply. By the way i will try to maintain the current theme at because i like it more.

raster updated the task description. (Show Details)Jan 18 2021, 1:06 PM
raster updated the task description. (Show Details)Jan 21 2021, 12:45 AM
raster updated the task description. (Show Details)Jan 21 2021, 1:09 AM
raster updated the task description. (Show Details)Jan 21 2021, 1:13 AM
raster updated the task description. (Show Details)Jan 21 2021, 1:18 AM
raster updated the task description. (Show Details)Jan 21 2021, 1:13 PM
raster updated the task description. (Show Details)Feb 1 2021, 5:32 PM
raster updated the task description. (Show Details)Feb 3 2021, 11:39 AM
raster updated the task description. (Show Details)
raster updated the task description. (Show Details)Feb 21 2021, 5:32 AM
raster updated the task description. (Show Details)Feb 21 2021, 6:45 AM
raster updated the task description. (Show Details)
raster updated the task description. (Show Details)Feb 23 2021, 3:37 AM
raster updated the task description. (Show Details)Feb 23 2021, 6:29 AM
raster updated the task description. (Show Details)Feb 23 2021, 8:42 AM
raster updated the task description. (Show Details)Feb 28 2021, 3:33 PM
raster updated the task description. (Show Details)Mar 2 2021, 1:19 PM
raster updated the task description. (Show Details)Mar 5 2021, 1:54 PM
raster updated the task description. (Show Details)Mar 5 2021, 1:58 PM
raster updated the task description. (Show Details)Mar 9 2021, 4:30 PM
Unknown Object (User) added a subscriber: Unknown Object (User).Mar 9 2021, 10:48 PM
raster updated the task description. (Show Details)Mar 15 2021, 10:31 AM
raster updated the task description. (Show Details)Mar 17 2021, 5:41 AM
raster updated the task description. (Show Details)Mar 17 2021, 7:52 AM
raster updated the task description. (Show Details)Mar 17 2021, 9:48 AM
raster updated the task description. (Show Details)Mar 19 2021, 10:20 AM
raster updated the task description. (Show Details)Mar 20 2021, 6:42 PM
raster updated the task description. (Show Details)Mar 22 2021, 3:18 AM
raster updated the task description. (Show Details)Mar 22 2021, 6:12 AM
raster updated the task description. (Show Details)Mar 23 2021, 2:11 PM
raster updated the task description. (Show Details)Mar 25 2021, 4:29 AM
raster updated the task description. (Show Details)Mar 27 2021, 4:55 AM

This has now made it to git master... but the work goes on

raster updated the task description. (Show Details)Mar 29 2021, 3:44 AM
Unknown Object (User) removed a subscriber: Unknown Object (User).Jun 4 2021, 1:17 AM
TwoD added a subscriber: TwoD.Jul 14 2021, 2:26 AM

I just updated EFL and Enlightenment for the first time in a long time and I'm sorry but this change hit me in the face like a sledgehammer. It's a manifestation of everything wrong with modern design and this flat trend.

I have good eyesight but the contrast ratios are awful. Thin light grey text on slightly darker backgrounds makes it very difficult to read, especially on high DPI screens. The stark contrast of the highlighted buttons without any shading at all makes it stick out like a flare in a pitch black room, trying to draw attention to several unrelated things at once without any discernable priority or significance.
The massive dead space margins on everything makes it look just that, dead. It worked when there was a texture or shading and some nice rounded corners to lift the off the "surface", now it's a desolate wasteland.
Buttons/links without always visible clearly defined clickable areas make for annoying guesswork every time I try to navigate menus or dialogs. Since I'm used to the old theme I know I don't have to perfectly hit a character in a button label for it to register a click where I intend it to, but this look makes me nervous and hesitant before clicking anything because I don't want to be a pixel off and hit the wrong thing.

Enlightenment's default theme was the most modern and best looking design of all the desktop environments around and what made me love the clear user experience it brought. All the visual cues on what is interactable are gone. What is a button vs just a label? It's all unappealing rectangles without any personality, and some of the rectangles blend together with nearby ones to form a uniform surface without any identifiable features at a glance.
I now have to put effort in trying to understand what I see, even though I've used it for a decade.

How do I get the old default theme back?

I don't know what you are talking about... buttons have a shadow and a different color. they press in... when you press the button the shadow contracts and is less blurry so it looks like it presses in. i don't get the "buttons look just like labels" bit... as they don't. see below:

it's clear buttons are a lighter grey to the surrounding background. you can see a subtle shadowing around them too. given the color-class work this shadowing is even configurable (you can make it darker). you can also change the colors of text, background etc. to change the contrast. The colors are indeed muted. It could be that your Sans font is blurry and bad - and thus it looks worse, but here at least it renders pixel-perfect with clear contrast. perhaps your environment is a very dim screen with bad backlighting and bad contrast on the screen itself with perhaps very bright ambient light. then it'd be hard to read - thus... the colors can be changed. enlightenment now ships with a tool to modify these colors (palette editor).

as for dead space - that is "modern design". every "modern website" or app has lots of spacing because that is what people demand. you are in a minority who don't want that. the flat theme is an answer to massive demand for e to "look modern". that is why themes exist... you can pick another one, but the default one is now trying to make the majority happy. it's an accepted trade-off of going that way. in fact i have regularly had people complain its NOT spaced out enough and has too little padding and needs more. so keep in mind that your opinion is YOURS. others will disagree. by what i see, most people would disagree with you on there being too much dead space. again - that's why themes exist... you can customize all the way as much as you want.

as for getting the old theme back - dig through git history before the flat theme landed and go back to that checking and extract the old theme from there. :)

TwoD added a comment.Jul 14 2021, 6:09 AM

Maybe it'll grow on me, and some of my gripes are probably just bugs or unfinished parts that haven't been worked out yet. Still feels a bit alienating though.

I'm specifically calling out the defaults as it's what people see first and are most likely to use. Good to know there should be settings to tweak it for better readability, gives me some hope, but it's not going to help the defaults.

Found the Palette editor. It's not in the settings panel but now that I knew it's name Everything helped. I'm sure it'll be greate once finished but now it's terrifying to use.
The sliders either don't move, change color, or jump to a random position not matching where I clicked. I had no idea what the +/- buttons do, only noticed they removed the selected bar above when clicked. Luckily I remembered what was there as there's no way to restore it. I'm guessing "/fg" is foreground and "/bg" is background. Not helpful when I don't know how to target just buttons or window titles, if at all possible.
Can this change shadows too?
Apparently I can have multiple palettes, which is kinda cool, but needs documentation. (As does every other feature in E - but there's never been any easily user accessible docs for anything so that's not new ;P.)

Clicking the sliders do change some colors, in some places, but sometimes only within the dialog. When I did manage to make it change colors on things outside it the random behavior of the sliders just made me want stop while I could still see what I was doing.
The closest method of resetting everything to defaults once I screwed up was to delete both "/fg" and "/bg". What other strings can I use?
Clicking the widgets for the individual color values makes the value disappear and behave funky until I can get something back into the box. Defocusing them does not work until you click something else, and then accidentally making that value disappear. Props for making it possible to type in them, and having multiple ways to enter the color values, always annying when that's not possible.
Clicking Close crashes the Palette editor.

At most any regular user changes the background image anyway so can't recommend this to anyone else. There are no other dark themes that come even close to the good looks of the old default one so switching it out entirely is not an option. How do I know if it's compatible with the release I'm running if I did want to try one? They all say E19 (isn't that dead since long ago?), my About dialog just says 0.24.99..... so I'm assuming they'd not be compatible.

I did change the background because there I wanted something more generally muted compared to the theme's default busy pattern, it made the contrast issues a lot worse in the taskbar as it now blends together with it, especially the virtual desktop previews because there are no borders or spacing between them.
Didn't change the lockscreen background because it was good, but the password input field is completely invisible, all you have is a thin vertical bar to tell you that maybe it's there at all.

Tried changing the font. Not sure which one is the default, every time I open the font dialog it resets to a seemingly random font without any size selected so I never knew what the default was. Ubuntu set to Very Large gives some thickness and better contrast to the characters on my 4k work screen, except for all dialog buttons which are still tiny. Disabled buttons are almost unreadable (see your screenshot), those have the same color as the background and the shadows are near invisibled.
Several places didn't adapt to the new font size, Everything now lookes very cramped. The "unknown/missing" icons have the same color as the highlight for the currently selected "tile" (though they don't feel like tiles since there's no visible grid) so they become just a light blue rectangle
Settled on a Large font size for now but given it's only applied in some places it's not ideal. Thought maybe it needed a restart so tried that, but it crashed back to CLI and no difference afterwards. Chrome freaked out and applies mixed large/normal fonts too now.
Found the Font" tab in Elmeentary Config, tried changing button text style there, it only applied to the config dialog itself, but not the buttons in it.

Tried changing the scaling to compensate. Nothing but DPI scaling is usable with mutliple screens of different configurations or everything becomes huge on all screens.

I do know my font kerning is probably way off but nothing I've attempted over the years made any difference there yet, and it was the same as in the old theme so it doesn't bother me. I usually don't give a second thought to font choices - can't tell most apart and if I can parse it as readable I move on, but here I had to halt and look again on most menu items.

This is from before I messed with font settings in Enlightenment, fairly close to what you have I think.

At a glance I'm not even sure the dialog is a separate window or part of the settings panel...

Yes, it's my opionion but I can't say I've ever heard anyone else explicitly say they want more spacing, only people complaining about bad use of screenspace.
Yes, I know it's a trend online too. I'm a web developer and have to implement designs like this and it it almost hurts to see them be used more and more.
If you know a UX study where most people actually liked it, I'll not contest it, just acknowledge most people have bad taste.

On buttons vs labels, maybe I should have said "titlebars" if that makes more sense, not sure what you actually call them. In HTML I would have said they're legends for fieldsets. The label/title/header on those are a more white text on light grey background and they have a decent outline, but they pop much more than any clickable button/tab/square/rectangle that isn't already bright blue.
There is no hover effect at all on buttons, they only react when I'm already pressing them, makes me feel like the UI is unresponsive until I force myself onto it.

Tabbed UIs have a very odd black highlighting with a blue striped across the bottom, and no outline around the inactive tabs. If there are more tabs than fit in the dialog the scroll indicators overlap the tabs, and if that tab happens to be active, the indicators almost disappear. Much prefer to have the indicators outside the scrolling area, same with all scrollbars in general, no risk of bad contrast with the content itself.
With the increase in font size the tab labels now also overlap each other. Maybe that problem was present with the old theme as well, didn't need to adjust the font size so wouldn't have known, and I can't easily go back without resetting my profile and don't have time for that now.

If I did go through and dig out the old theme (sounds tempting), what guarantees do I have that it won't break in two weeks? I suspect none, as it's no longer maintained? I have no idea how themeing this works, wouldn't mind learning tho. The apparent flexibility of the themes was actually one of things that made me try Enlightenment in the first place. Started looking into it but found no good tutorials. Then I quickly realized the defaults already fit my expectations of a clean. minimal, yet stylish and usable desktop very well so I just stuck with it.

some parts are unfinished. but yes - its very different. it's flat. as i explained - it's what most people demand to be "modern" so having to do it.

given your screenshot - you see what i do font-wise. i have absolutely no issues reading the text in lists, labels, etc. etc. ... so i am going to guess it's either your environment or the quality of your screen. i have seen some truly bad screens out there that for example cut off black at 16 not 0 and white at 239 not 255. these are brand name screens but just at the cheap end. as i said - the idea of color classes is to allow selecting of a color scheme separately to the theme and to make it easy to recolor. right now i am busy building all the colorclass tree to make it much more organised and easier to maintain. i'm about 45% of the way through declaring all the colors in the theme with color classes. the rest are still fixed values in the edc files.

as for palette editor - the sliders slide perfectly for me. if i click on the color gradient the slider jumps there. if i click and hold and release it follows the mouse until i release. the color circles above change color and the box on the check background changes to show the selected color. i can type in a hex code (either in full with alpha i.e. 8 digits, 6 digits ignoring alpha (and it will fill in the ff alpha for me when i hit enter), 4 digits in lower rest 12bit rgb with alpha) or 3 digits for 12 bit rgb without (and it fills in alpha for me). i can click and drag on the red green blue sliders below that are 0-100% and 0-255 too and type in there too. i can click and drag left/right or click+release and type in a value... all of it works perfectly here. i am unsure what you are talking about that not working.

the + and - buttons on the right next to that entry ADD or remove the selected palette entry. right now the only example palette has just 2 entries (/fg and /bg). you just hit - to delete the entry, and + to add an entry you typed on the left. i would not expect most users to add or remove entries. just select one of the colors and modify it. as the palette only has 2 entries (will have many more when i'm done - a current color class set has 292 palette entries (that's what colorclassses.edc has in it in the theme for the new naming scheme). it will be more by the end. i have yet to finalize this naming scheme or decide how to standardize the list and expose it. it's still too complicated and has to drop down to like 20- or 30 colors. i suspect i will need to add another indirection where these colors can NAME a simpler color so i can share - like $VARIABLES. but will get to that after this step of having full names for every element so all elements can be overridden if you want to. i will have to have some data list that full set so the + button can later LIST available known colorclasses to add to your palette. the palette editor does not know what this set is yet as i don't even have it defined fully yet. you can look at all the /fg/normal/ ... etc. color classes in colorclasses.edc in the theme.

and yes - it can change shadows. by default right now shadows are 0 0 0 128 - ie half "darkness". they can be made much darker by changing /shadow/ , /shadow/selected, /shadow/pressed and /shadow/disabled entries to something you prefer (you have to add them as they are not already added in the default palette - theme is using the built-in colorclasses in the edj file right now that come from colorclasses.edc). titlebars would be /bg/normal/titlebar and /bg/selected/titlebar (selected for selected/focused windows). again - the issue here is that this list is currently incomplete and being defined right now *(45% done) so i need to finish this, stand back and look at it to see if i can then simplify. once i know this then i will have to figure out how to store the full detailed list to present to users. i haven't figured that out yet.

and yes - you can have multiple palettes. the idea is that we will ship with maybe 5 or 10 palettes users can choose from. a dark grey one like you see, maybe something light colored for those who want more light themes, something with high contrast, maybe some other colorful ones (pink, green, blue tints etc.) etc.

so some colors in some places will change - but probably because you only changes /fg and /bg so you are changing only colors that FALL BACK to /fg. the naming scheme is like: /bg/normal/button. first it looks for /bg/normal/button. if that exists - that is used. if not it looks at /bg/normal. if that does not exist it looks at /bg ... thus there is an override mechanism to make fine grained color changes to specific kinds of elements if you want (and this is actually done as /bg/pressed/button and /bg/disabled/button are different colors for buttons for different states and normal button backgrounds are a bit lighter than the default /bg you will see in a window and large areas of the ui).

closing the palette editor should not crash. it certainly does not for me.

this is the DETAILED palette editor. i actually expect users mostly to just choose between a bunch of pre-made palettes. this is the editor to edit those palettes. so i wouldn't worry too much. this is already getting more advanced. as i said - i still need to cut down the NUMBER of entries to like 20 or less as i have already almost 300 odd and it'll grow. as above - probably have to add another layer of indirection to simplify this but then still allows overriding in special cases.

as for themes - i can't go maintain every theme that ever was made. if i did i'd have to now maintain about 5 of them all at once. every new feature i have to mirror in every theme tree. i barely have time ot even do one theme, so ... you can complain all you like, but the way to improve things is to get involved and not demand that i do more and more and more and more work. i am *THE ONLY* one doing anything to the efl and e theme. i also work on e's code and efl. in fact i'm the only one doing anything right now really to efl or e... so asking anything of me that means more work will get a very quick "go away" from me. E has a big TODO file (see the git tree - read the TODO file). i have been working on items in that todo as well. this color stuff is on e of those items. if you want to take the old dark default theme and maintain it - as i said - go back in git history in efl to the commit right before i pushed the new flat theme, then "fork that". look at every commit i did after that to the theme tree and then where appropriate apply those same changes to support that new feature. the old dark theme was far works in many ways too - scaling was much worse. it would be super hard to allow re-coloring without major work on the graphics to divide into layers of gradients (white + alpha) so they can be recolors. this will happen to also drop quality too as rounding with colors will lead to gradients being less smooth.

themes that say "e19" are basically because no one updated them since then. probably partly due to moksha forking e and thus forking community with bodhi. also themes didn't update from e17 to e18 as we moved compositing into the core because some theme elements had to change to handle compositing. they were designed without compositing in mind in the core and relied on compositing being done outside by the composite module rather than inside the canvas where all the objects where. this have settled and nothing has actually BROKEN for a long time in themes, BUT themes have grown and added more elements. this means that an older theme may be missing elements and when those appear on screen you may get the default theme providing those things, not the theme you selected. this is much the same as css themes for some site. imagine the site produces a new div class for a new feature. so these can be styled differently they may use different names. an old css theme will fail to style these. this means if you have eg 2 css files. the "default.css" and "mytheme.css" ... the browser will fall back to default.css like the default theme in efl - this always provides everything - guaranteed. so if you want a theme to look nice and stay up to date - it has to keep adding things to it over time. the alternative is we have less things a theme can do as the theme cannot override/change/customize that element and we re-use the same standard button or whatever item look.

yes - the pager desktops will display right to the edge of the shelf. it's a design choice. it looked worse if they are indented by a few pixels. it looks far cleaner to extend flush like they do. i've tried indented... but for most people this will be fine as it will be a picture per desktop and the blue bar shows the selected one so it's not hard to see what it is.

as for password field - there is no need to SEE the field as it cannot be clicked on. you can just type and you will see ***'s appear. you cant click and move the cursor or select text. just type. so as such it needs no separate color of background at all. it's simpler and cleaner without.

as for fonts - these need to be fixed up like color classes. they also need to mirror the color class tree and fallback scheme. i have not gotten to this yet. they still have some old copy & paste from the previous default theme. changing font does work though. just use the basic e font settings. i hope you are not changing font size to try change ui scaling for hidpi... that's what the scale settings are for. it works fine for me and selects the font i selected when i open the dialog (it doesn't scroll to the right spot) and i can select another font and a size too and hit apply and it works. so perhaps use the scale settings ... not font size as scale scales all the ui up (that is tagged to scale) and does what you actually probably want. in future i will remove the size selecting and make it a simple "just a single font selector" there ... because scale settings does that job and far too many people mess with font sizes here then complain it doesn't quite do what they want. they are too used to other DE's and os's where there isn't a nice scale setting that works well and are working around it. i may keep an advanced way to select font size and specific fonts for specific uses (like palette editor) but the settings dialogs in e have needed a re-do for many years... it's on the TODO. :) so.. don't go messing with elm's font or even e's font sizes - just select a FONT in e's dialog and it'll apply to some elements but not all - again - like color classes.. this needs cleaning up. don't use elementary_config's font settings as its also too complicated and a bit of a mess. if you just want sizing to change ... scale settings is what you want.

and yes - disabled buttons have a very very subtle shadow and background is the same as default and the text is very very very dim (still readable but barely). that is the point - they are DISABLED. they are not meant to be clicked, interacted with etc. etc. - they are meant to be just enough to show that there is a possible option there to click if you did something to allow that to happen. it is INTENDED to visually say :"do not click me - i cannot be clicked or interacted with". as you can see the button that is not disabled has a shadow, lighter bg color and lighter text too etc. =i have tried same gray as bg - didn't look right. i have tried darker shadows - too much. iu have tried bright blue buttons too (same as the list selected color) and orange buttons too. in the end this slightly lighter gray worked best.

DPI scaling = e calculates scale size BASED on the average dpi across all monitors. this may be what you want. it may not. you can also select scale 1, 1.5, 2 etc. in the basic scale settings in e and it does what you want. i run one laptop here at scale 2 because it's a 10" 1080p screen and i need something to test that on anyway.

as for kerning - your screenshot... you see what i do and that kerning looks just fine to me. where is it bad?

e.g Windows .. the the text is a perfect 1 pixels apart ... perfect gaps. no blur or some 2 or 3 pixels, some 0, some 1... it's clean, regular, sharp and precise. th D ane e in desktop do have 2 pixels difference, but .. that is what the font says to do for kerning - we follow the kerning amounts the font tells us to via freetype. we do not do sub-pixel positioning or rendering so this has to drop on an exact pixel boundary and that's where it drops it seems.

as for your window not being distinguishable - i do see it there with a shadow. it's not FOCUSED thus not accepting input right now thus no different titlebar, but this is the chosen look. as i said - shadows can be changed via colorclasses, but this is the default. FOCUSED windows have a deeper shadow that's darker and that is why non-focused windows are not as deep - it is meant to use the shadow as another indicator of the window being focused. i may fiddle with this a bit but it's pretty close to where i want it to be. subtle. a TRUE flat person would have no shadow at all. it's an anti-flat design thing to have a shadow, but i have found that the shadows are really nice to have and help the ui as opposed to pure flatness. also titlebars that blend into the content of the window is part of the modern design trend and that is what the theme is doing - just that. i didn't invent the trend, but i'm following it. the fact is has a shadow around it is the implication that it's a window that is to be moved, resized etc. etc. - and for most peolpe when they clikc somewhere on the title they expect it to focus and click+drag to move. example:

where is the titlebar? you don't know. but people love the macos gui it seems. i can point to lots of examples these days where titlebar doesn't look separate from the top content of the window. so yes - it's a trend and it's what p[eolpe demand. if you looked at comments on reddit or phoronix or anywhere e releases were, 80-90% were "fuck this shit is old skeumorphic. kt's not a modern simple gui" comments. many have said it's too crammed. etc. etc. - yes - you have to implement these and may hate it, but its what most people want and unless e goes this way it'll be "that old piece of shit that is ugly" for most people. they dont even install it and try it - they just look at a screenshot and go "nope".

and yes titlebars are at the top of a window. buttons are inside a window - things you press in and don't click to drag a a window around. :) yes - unfocused windows blend titlebar into the content with the same color. as above. so does apple... :) so do many popular "modern flat ui's".

and indeed - no over effects. i have chosen not to implement many at this point. it's yet more work, color-classes etc. and i just have enough to do so keeping things simpler. as such tho - mac doesn't do something on hover. windows doesn't... most guis do not do hover effects...

now what is a "tabbed ui". you mean like the toolbar at the top of settings? yes - that's the selected item. in the theme a blue bar is often used to say something is selected. menus, toolbars use dark gray as the selected item with light text. lists use blue bg and white text for selected. it's the scheme. selected (focused) windows also use dark grey for titlebars like menus and toolbars. yes - the inactive toolbar items are inactive - it's not tabs. there is no tab widget. e uses a toolbar where u select an item then changes the content below - thus they will not look like tabs because they are not. so yes the scroll indicators have a dark semi-trans box but ALSO an arrow inside so you still get that to indicate "content this way". i don't plan on using toolbars in a future redo of the settings though so i'm not concerned. it does show the appropriate content indicators though... :) the same thing happened in the old theme - you got arrows just with no dark background so harder to see they were there at all... so its actually better than before.

as for your font overlap.. i don't see it. scale 1.0:

scale 1.5:

scale 2.0:

again - scaling.. not messing with font sizes.

so anyway - back to digging out the old theme - no guarantees that i don't make changes and add new elements to the default theme. that requires (as i mentioned) keeping up. the old theme is already broken in various ways (scaling is half broken). the change in colorclasses will destroy the ability to change colors in the old theme (wasn't really easy already). but text class changes that mirror the color class ones for consistency will break the ability to change fonts unless you mirror those changes. as i said - new icons in new default theme will be used when the old default doesn't have them so these will look out of place until you add them too and draw icons that match the old dark theme. this applies to new styles of buttons eg overlay ones that entice uses. you will get the default theme ones unless you add them to your fork of the old default theme too. i explained the reason why this is the case above. so - no guarantees. it requires work.

apple and now gnome have taken the position of "no themes - you get our default and deal with it" gnome - allow themes but they break and you have to keep up. they are right in almost every way. if you DONT break themes like i explained then you are stuck in development. you cannot add new ui things. you are forever limited to what you have now. if you are ok with some elements looking out of place because they come from the default flat theme and not your fork of dark - then you should be fairly ok. if you are ok with colorclasses not working, you should be fine. if you are ok with scaling being a bit broken, you should be ok (it was broken as i mentioned and will stay so unless you fix it). if you are ok with fonts not allowing customization once i switch to the new text class scheme (like color classes) then you will be fine. ... if you want any of these kinds of things to adapt to the gradient/beveled/glow-look of the old default then you have to do the work. i definitely don't have the time. during development of e17 it has gone through 6 themes (early ones you probably never saw). if every person went "i don't like the new look - please put back the old" e would never look like it did for dark. it'd probably be white and gold with shiny glinting titlebars. people would probably hate it even more than the dark one you like. imagine i then went "ok - i'll maintain all themes going back into the past" - i'd have to do 5 or 6 TIMES the work every time i do anything theme and the other fancy themes with fancy texture images would take much more time and work to make them look nice, scale etc. when adding new stuff. expand this over more years and i end up maintaining 10 themes ... so when do i work on code then if that's now 100% of my job? the only way this works is if people take charge of the look THEY like and the work is spread over many people and many users. the more users you have the more likely it is they want many looks, BUT the manpower has expanded too thus it can be sustained. IF users take the view of "i don't want to bother - get raster to do it all" then everything collapses. so i will push back on me maintaining more themes than the default (actually i have plans to revive the old E DR13 themes just to show off - i don't plan to make it do colorclasses or text classes as it's just too hard - even scaling will be very very very hard). i plan to do this as a marketing exercise in showing off what themes in efl can do - how much they can truly change. the intent is to be anti-conservative-flat and show off with as much bling, bells and whistles as i can. people often complain the defaults for e are too blingy and too busy and too much and it needs to be plainer and simpler - if this is what flat is now then i do need that one "show off" theme as well and this is a reason i also wont take on maintaining more themes as on my personal todo is a show-off theme. :)

so if you want to take charge and do the dark theme thing... please do. i encourage that. this is how the system scales. by people taking on some work for the look they like. efl and e are built to be able top theme. it's hard. it's a lot of work. it means having some sense of art and design. but the results are that you get the look YOU want. :) and that's the point of themes... :)

TwoD added a comment.Jul 25 2021, 9:45 AM

Raster, first I'd like to apologize and say I'm sorry as it seems you took at least part of this critique personally. I didn't realize you are practically the only one working on this so I think I incorrectly assumed this thing was a "corporate decision" of sorts and reading back I realize I worded this much more strongly than I should have. Didn't even check who was replying to me or who the OP was... Also realized I'm chasing the master branch so I'm very much getting a snapshot of work in progress, and maybe even one that is bad at representing what it will eventually look/function like. I think trying to get work done in this frigging heat and also having to unexpectedly deal with this on my workstations didn't help. ;)

I have only skimmed through your last post so far, it looks very thorough and I greatly appreciate you taking so much time to go through each of the points I had (be they valid or not). I will make an effort to read it and take it in before deciding if there is something I want to give a more thorough response to. I did already get some more insights into, and understanding of, the underlying reasons for this change.

A few quick replies on things that stood out while skimming through:

DPI - ah, it's the average, probably explains why it gets a bit weird when I have two 2560x1440 27" screens, one of which is vertical, and a much larger curved 3840x2160 screen between them at work. At home my primary setup is three 2560x1440 screens - two 27" and one 32". Then there's the Lenovo X1 Yoga at 2560x1440, temporary external screens, and the good old EEEPC 901 I keep around because.... um... it works? Maybe this is related to the lockups and crashes I've had with the Tiling module earlier. If you want help testing something with a weird screen setup, I may be able to help. X)

Kerning - I wasn't aware it's not doing sub-pixel rendering, should have zoomed in and noticed that. Then yes, there will probably be "rounding errors" or odd spacing. Seems it's happening mostly after some combos of capital and lowercase letters like in "Office" vs "Other".
As long as it's mostly consistent I'm not that bothered by it, just good to know it's not something I've misconfigured. Is that a feature that is on the roadmap (even if it's very far away)? I do realize it's probably crazy hard to get right but maybe there's some "magic" lib somewhere which has it figured out *fingers and toes crossed*. ;)

Shadows - I think I understand/agree with what you're saying and I like that you don't have plans to go "full flat". Thanks for the tip on how to colorize them, will look into that and see if I can make them slightly more pronounced.

The actual bugs I noticed - text overlaps, weird scrollbar behavior, etc - I'll report separately when I get a chance to reproduce them with a video or screenshots if they do not appear to be theme related. (Scaling didn't cause font overlap AFAIK, it was only messing with font sizes which did that, so I'll refrain from doing that, thanks again for the insight.)

Old/other themes - Again, apologies if it sounds like I wanted you to do it. I'm fully aware that if I or anyone else takes on making a theme it's up to that person to keep it up to date, and this is usually to be expected. I should just have worded it to query about whether there is something equivalent to "semantic versioning" or anything else which could let me
know if a theme "still fits". If there isn't that's fine, I can see how even keeping up with something like that could get very complex fast. As I mentioned earlier I have no experiences with modifying any desktop themes (closest I've gotten is implementing Drupal themes).

The technical changes you are making sound very interesting. I'm often in favor of redesigning and refactoring if it makes implementing upcoming changes easier, more logical or more contained. It would be very interesting to learn more about this so I shall at least try reading the code and see how it works, and what it takes to build a theme. (Not saying I will commit to maintaining one, but who knows...)

Thanks again for listening, I'm sure these responses will give me things to think about (and dig into) when I get around to digest it line by line.

raster moved this task from Backlog to In WIP on the enlightenment-git board.Aug 9 2021, 3:46 AM