Dank Settings Expressive Redesign Mockup

[georgestafilidis]

signal-2026-08-26-03-15-31-747.mp4

signal-2026-08-26-02-34-15-137.mp4

[georgestafilidis]

Any ideas are welcome I am propably gonna work on this more tommorow. I can also share the source code if anyone wants to help. I am propably gonna use an AI tool to write some comments and sort the code out if it helps.

[georgestafilidis]

@purian23 The header bar is a bit difficult to tell where it ends, and it also feels pretty close to the content below it. You can check the cursor position for a better idea of where the header actually ends. (i recorded myself trying to find the end/edge of the header bar)

2026-08-26_14-35-49.mp4

For the second design, the header bar’s end is clearly visible, and it doesn’t feel close from the content below.

---

2026-08-26_14-25-23.mp4

• Added Schedule time options with a clock-based modal for selecting the desired time. The HTML implementation is still a little buggy, but the overall functionality and design direction are there.
• Added the ability to change the Greeter (lock screen) wallpaper directly from the same settings area.
• Changed the Search Settings animation to a breathing-like animation.

2026-08-26_14-38-35.mp4

I’m not planning to design every single page, since there are too many options and variations. However, if there’s a specific option or widget you’d like to see as a design, I can work on it and make it more expressive and polished.

[apollo79]

What is currently missing is expressive switches, but that is only a minor thing.
Overall I think this would be an awesome direction as I really like M3E and since DMS is based around material design, I think it would be great to see it moving towards the latest design iteration.
This would then probably also be part of a bigger redesign? With new designs for the quick controls, system monitor etc.?

[georgestafilidis]

Will do! Will propably make a one html file with all the components and some info about them.

[georgestafilidis]

@apollo79

The icon inside the switches is optional btw

[apollo79]

Oh, yes they are optional but already used in DMS and for every setting in android settings so I thought this was standard. It's actually a bit weird because a switch is always on-off, so it being optional makes the spec kinda inconsistent imo. When would you use it without an icon?

[georgestafilidis]

I actually think this is more of an accessibility improvement. You can already tell whether a button is toggled on or off, and PlayStation already has something similar thats under accesibI actually think this is more of an accessibility improvement. You can already tell whether a button is toggled on or off, and PlayStation already has something similar under its accessibility settings.

That said, it’s also pretty difficult to implement with just HTML and CSS, at least in my experience, since you have to experiment a lot with things like icon sizing and spacing to get it looking right.
ility idk its also really hard to do on html and css at least for me cause you have to expriment with icon sizing etc

[apollo79]

Yeah for sure, with only HTML and CSS this is of course hard to implement and also probably not necessary since it's a detail that will be added by the devs anyway and they will have an easier time with it.

Did you continue working on your mockups? I really enjoy seeing the progress!

[georgestafilidis]

2026-08-27.17-22-44.mp4

index.html

I am also dropping the HTML file here if you want to preview it yourself. I told DeepSeek to merge all the code into one file and add some comments here and there.

I made some changes based on Google Pixel screenshots and images that I found through Google (sadly, I don’t have a Pixel phone lol).

Changes
The Search box now has a 1-second animation that plays out, which I found here. I think its a nice visual cue for the user to start searching for what he or she wants to find.

The breathing animation was nice, but it didn’t work too well with the mouse-inactivity behavior.

I also removed the light/dark mode preview. As cool as it was, it was a pain because you either have to create an image and display it or recreate it with CSS and HTML (which is what I did), and it didn’t look as good as I imagined it would.

Now, you just enable the dark theme, and you can also schedule it by clicking on the left side of the item, similar to how it works on Google Pixel phones. There’s also an option to keep the toolbar dark.

The other stuff is pretty much untouched. I removed the items from the Notifications category and made some changes to all the categories in the left sidebar. Google phones categorize their settings in a similar way and also use keywords to describe what each category contains. In our case, there are a lot of settings, so adding all those keywords make the sidebar look bloated.

Here is an image of what I mean:

What I think DMS suffers from is that all the settings are displayed in one very long, top-to-bottom list. On Google Pixel phones, if you want to customize something further, you click on it and go down another page. That’s the approach I used for the Dark Theme option as well.

[georgestafilidis]

I also think there is too much empty space here

[apollo79]

Keep in mind that most apps you launch on Niri will, by default, open in a column that takes up at least 50% of the screen width. GNOME already has a similar philosophy, much like Android, where the "sidebar" takes up the whole screen and clicking on a category shows you the content for that category.

I only have one screen (my laptop), so having something like this, where I can open an app at 50% width or less, is actually really useful. This design could also be adaptive for smaller and larger screens, dual monitors, or whatever else. As you can see on the demo it fits the desktop too imo when maximized.

Give it a try and come back and tell me what you think. Also, if you could share a video recording showing various settings, like what happens when you tap them and how different things work, that would be really useful.

And yeah, the animation was kind of random. I was trying to make a bullet-like snake animation that would shine once as it went around, but I just couldn't get it to look good.

I like your thinking with the different resolutions and accessibility. As the devs already said, they are trying to make DMS more mobile-friendly, so this is probably good to keep in mind. If I had to argue for the accordions, it would still make it easier to orient oneself, since going to a different page and back you have to re-orient where you are on the page and it also costs less time to go to the page and back. But it might be that a sub-page is the better solution here and it's definitely very nicely implemented.

[apollo79]

I could make a Discord if you wanna test things out with me, but I hate what the app has become and the news I’ve been hearing about it lately.

Sure, or we can make a thread in the DMS server.

[apollo79]

Do you have any specific settings you'd like to see? Cause there are so many

[georgestafilidis]

no idea i dont know what settings there are on a google pixel