[unofficial] Dark Theme for Thunkable - OLD, please see new topic

[hdawc]

Hi All,

I know there is a poll here for a dark theme but as I’m making my own solution, I thought the post should be separate from the topic regarding an “official” dark theme.

I’m a web and app designer, and I enjoy using dark themes, and like many designers etc. I work late and Thunkable is more or less one of the only sites that doesn’t have a theme.

Here’s The Screenshots!

Designer Dark Theme:

Blocks Dark Theme:

As you can see I’m going with a hinted glow for some features. Let me know if you want me to continue work on it and release it.

Vote for the theme:

• Yes! Make it so!
• Naah, Give up.

Using a basic Chrome Extension, I’ve written my own CSS. This is a First Draft, and the theme only applies to the X Editor (not the whole Thunkable website).

This is based off what is already there, and some hover features have been added, as well as changing the colour of the disabled blocks as they were see-through. I’ve named it ‘ThinkDark’ to avoid branding conflicts.

Let me know your thoughts, and I’ll release the theme so you can copy and paste the theme code from GitHub, and continue to work on it, so it can be used with the Chrome Extension.

(At some-point I’ll put together a Chrome Extension just for this if lots of people like it)

Cheers,

Eric.

[actech]

Hi,

You are making an interesting decision, but I’m afraid that few people will be interested in it here. I made an improved version of the IDE at the time, but no one was interested and I only use it for myself.

The problem is that users don’t care how convenient the development environment is. This is important for programmers and those who value performance, not just the end result.

[hdawc]

No worries at all!

If people want it then they can use it! It’s easy to setup and it doesn’t affect performance at all as it’s just CSS being added at the end of the page. So far, it’s a huge improvement for me, and I really hope people like it and will want to use it because it definitely makes a difference!

Cheers

[domhnallohanlon]

Thank you for sharing your work with us @hdawc - I’ll let the rest of the Thunkable team know about this mod!

[eoinparkinson]

This looks really cool. My only comment on this is that it’s too dark, that’s just my preference though, I rather a dark grey with light grey & white accents. Maybe in the extension there could be an option to change this? Otherwise this is something I’d love to see.

[hdawc]

@eoinparkinson

This looks really cool. My only comment on this is that it’s too dark, that’s just my preference though, I rather a dark grey with light grey & white accents. Maybe in the extension there could be an option to change this? Otherwise this is something I’d love to see.

I’m currently working on a dark purple theme to offset the light purple that the current theme has.

Here’s an updated screenshot. Please ignore the black top and left nav menus. I haven’t gotten around to them yet.

A few updates, the components menu is now animated, and the scrollbar isn’t visible, but of course you can still scroll…

Lots more updates to come!

Cheers!

[hdawc]

A little update for all those interested in how this is coming along…

With the first big update, comes a new, more realistic look for the mobile phone!
(it doesn’t affect how anything works, it’s purely visual)

Here’s the whole Designer View:

(v0.1.10)

I’ve chosen a slightly different colour palette which colours that are actually different shades of each other and used two very dark shades as shadows. You will see that I’ve used these shadows on the left and right panels are they are now ‘floating panels’, elevated above the main designer canvas, as is the component container at the bottom.

Many more little updates, animations and fixes are added. For example, on the right hand side navigation where you choose “Basic” or “Advanced”, I’ve removed the arrows and fit the buttons into the space, and the arrows on the top bar’s navigation are larger. The component list on the left has an improved layout and each item now has a shadow as well.

Here’s the latest Blocks view with a new block-flyout (overlay) panel:

(v0.1.11)

Any ideas you have about the theme, please let me know

[eoinparkinson]

Loving the purple glow from behind the phone

[Michael_Rogulla]

Hi @hdawc,

could you please give a description how to use the dark mode? Do you have plans to release the CSS data or are you going to sell it?

[hdawc]

Hi,

Sorry meant to get back to you all here.

In reply to Michael, no I’m not going to sell it, I think everyone deserves to have a dark theme! Besides if I did I’m sure someone would just re-post it on pastebin or somewhere on this forum and I can’t prevent that!

I’ve been working with it over the last two weeks (though I’ve had some other stuff on and been looking into AppGyver and other no-code tools as Thunkable has these huge 40Mb APK exports which are unnecessary 75% of the time).

I need to make some adjustments, because some of the boxes and text are both white on the right hand panel among other things.

Then I’ll release it with a video on how to use the CSS

[Michael_Rogulla]

Hi @hdawc (Eric), thank you for the good news!

[hdawc]

This thread is now closed, please follow the new Topic for all information about ThinkDark - including a video on how to use it, here:

Unofficial DARK THEME for Thunkable X - with video!

Hi all, I have a post on this from my original account but I wanted to move it here so I can reply to any questions about the theme, with that said, let’s go! This is intentionally a very simple tutorial, so those who don’t do web styling, can enjoy the ThinkDark theme. Simply put, there is a Chrome Extension that lets you re-style any web page you like. There are a few versions of this, only this extension does what we want.

If you use Firefox

There are a few similar add-ons for Firefox, but …

Thank you.