Dark theme for widgets

Dark theme for widgets

In the past weeks, we have worked on a new design, support for a dark page theme and custom theme colors. Today we continue our journey and add another customization option: dark widgets themes. This new feature, that allows you to create widgets with a dark background and white text, was a little more complicated for us to get right. That’s why it took a little longer. Today’s release is to be considered a beta release, so there might still be some glitches.

Enabling the dark widget theme

Quite possibly you jumped right into the start.me app after reading the first paragraph, returning here with one burning question: “How do I enable the dark widget theme?” If you were looking for a button or a toggle, rest assured: you didn’t miss it. The dark widget theme is activated automatically. Whenever you select a dark background color for a widget, the widget will automatically switch to the dark theme.

Dark widget theme
The dark widget theme will activate automatically when you select a dark widget color

But there is some more intelligence here. The dark theme activate too, when you select the dark theme for your entire page. By default, all widgets will then get a dark background. If you still prefer white widgets, you can simply change their color.

The most difficult thing for us to figure out was how to handle transparent widgets. When a widget’s background is made (partially) transparent, it is harder to determine whether a dark or a light theme would be most appropriate. We solved this by checking the page’s theme color when a widget is transparent. Depending on the amount of transparency for the widget and the theme color, an assessment is made. This works fine most of the time.

Suggested reading:  Faster pages, HTTP/2 and some more

When you use a background image for your page, things may get too complicated if you picked a theme color that is very different from your image. In that case, you may have to make some adjustments yourself. For instance: you could reduce the widget transparency. Or you may pick another widget background color.

Still in beta, so feedback is most welcome

As we wanted to push out this great new feature as quickly as possible, there may still be some glitches. We consider the dark themes for widgets a beta feature. It should generally work fine, but some widgets may not look 100% ok. Whenever you encounter glitches, please let us know and we will fix the issue as soon as possible.

We hope you like the new possibilities. With the dark page theme, the custom theme colors and the automatic light/dark widget theme, a lot of new page designs are possible. Please share your creations and your honest opinion!

    

Michiel de Wit

Michiel de Wit

Michiel is CGO and co-founder of start.me. He is a software professional with a lot of experience in developing enterprise grade web applications. He is a certified Scrum Master and a great proponent of modern software development practices.


(It's free and will only take a minute)

19 Replies to “Dark theme for widgets”

  1. Instead of the free icon next to the users profile picture turning to a Pro icon could we please just not have an icon next to the users image on the Pro package?

      1. An option would be nice, I totally understand that the free version icon should be non removable but personally I think the Pro icon is a tad tacky.

  2. Hello – I use transparency – either full or partial – for all 43 of the widgets used throughout my 7 pages. All of my backgrounds were selected based on the ability to read the (previously grey) text used in the RSS widgets. And in most cases, the header color contrasts with the page color. I am now struggling to find a way to make both the RSS headline text readable and still be able to read the text in the header.

    Based on the sentence above “Or you may pick another widget background color” – I would have thought the text color would somehow be determined by the widget background color – and not the page theme. For example, if you have a white widget background, the text is black regardless of the level of transparency. But it doesn’t seem to be working that way. It seems the text within the widget is now either black or white, depending whether the header text is black or white – is that correct?

  3. I really like the new customization options, but it would be nice if we could choose a color for all widgets on a page, or change the default color, so we would not have to manually change it for every widget manually. For instance, I use the dark theme, so all widgets are now dark. But I think black is too dark, so I want them to be lighter, and it’s a lot of work to change every widget. If this could be made easier it would help a lot.

    Thanks for your continued work and listening to your users!

    1. Yes – I agree. I think it would have been easier to have a default theme for page and one for widgets. I had the dark theme on because I wanted the header to be dark but I want the widgets to be white. Instead of changing them all manually I just went back to the light page theme.

  4. All of my widget back grounds were transparent before I guess and now they are all black. I don’t care for either of these changes. I prefered the old header and the old style of the widgets.

    1. I just had to adjust all of my themes to light instead of dark. So – I guess it’s not as bad as I suspected. I just miss the way the header was before. But, I go with change. I know your plan is a bigger picture than I can see. 🙂

      1. Change the theme back to dark to get the header back to how you like it, then edit each widget background to whichever colour or transpainty your like. It’s a ball-ache but it give you the best of both options.

  5. Also – if it’s not a lot of work could we have a “beta” feature so we can enable the beta feature or decide not to be part of the beta if we don’t want too. Just a thought. 🙂

  6. We deployed a minor update that makes it easier to work with fully transparent widgets over a background photo. By selecting a widget color close to the color of your background photo, the correct widget theme will be selected. As the widget is fully transparent, the color you choose will not actually be shown. It just helps our algorithm.

Leave a Reply

Subscribe to our blog via email

If you want to stay up-to-date, enter your email address below. You will receive notifications of new posts by email.

Subscribe to our blog ➔