[unofficial] DARK THEME for Thunkable - with video! - [Updated for new Drag & Drop designer]

[appspark.uk]

Welcome to ThinkDark, a dark theme for Thunkable!

Hi all, I have a previous 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 everyone 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 not one that does what we want yet

So the Chrome Extension I am using for this is called Stylebot.
It’s also open-source like the ThinkDark Theme.

It’s a great Extension and allows us to style a page, without affecting functionality. It doesn’t insert code or do anything harmful. It doesn’t track you either. All it does is changes colours and some of the design.

*The developer has just released Version 3 and the full code is online for anyone interested.

---

Let’s get to it!

First we need to install the Chrome Extension. Click here to go to the Chrome Web Store

Side note: I’ve been using it for ages, it doesn’t slow anything down and only works on the pages YOU choose.

Here’s a video for the rest of this process:

- YouTube

Lines of text needed for Stylebot

1. x.thunkable.com/projects/*

2. @import url("https://raw.githubusercontent.com/easaw/ThinkDark/master/ThinkDark.css");

[domhnallohanlon]

Thanks for sharing and documenting this @appspark.uk

cc’ing Thunkers from your previous post about the development of this just to keep them in the loop.

@sirfrancisdrake @darren @eoinparkinson @saramdl.gaunde021 @actech @ggtrackerappdevelopm @ringraith2 @Vaiper_watafai @Michael_Rogulla

[darren]

@appspark.uk

@import url(“https://raw.githubusercontent.com/easaw/ThinkDark/master/ThinkDark.css”);

Thanks @appspark.uk and @domhnallohanlon!

I’ve got it set up! I actually tried making my own Thunkable Dark Theme chrome extension awhile back, but I guess I got distracted…

[appspark.uk]

Heya,

I think this Forum has automatically reformatted the quotation marks (a.k.a. inverted commas) from the link in my original post, to the curved style, which doesn’t work, so the

“ ”

around the URL, should be

" "

By that I mean it needs to be parallel quotation marks, like this:
"https://raw.githubusercontent.com/easaw/ThinkDark/master/ThinkDark.css"

Hope that helps anyone, as it can be a problem when copying links like this from the web.

(oh, and I meant to say, I know it’s not your fault Darren! )

[appspark.uk]

Just a quick update;

I’ve added some new styles to work with the new Blocks and Design features as listed here:

Try out the new blocks editor 2020-11-10

Simplifying Design: Moving Invisible Components to Blocks Today we’re inviting you to try out our new slimmed down Design Tab and the enhanced Blocks Editor that goes along with it! At Thunkable our mission is to make cross platform app development as simple and as accessible as possible. We’ve come a long way and we have no plans on stopping any time soon. This is the first in a series of exciting updates planned for the platform which we hope you’ll love just as much as we do. Please leave…

As always, please reply with any feedback or your screenshots (don’t forget to block out any sensitive data), or if you see any problems within the design, please open an issue on GitHub.

Cheers

[appspark.uk]

Styles added for new Drag & Drop Designer!

As you can see in the screenshot below, I’ve re-done the buttons, which glow when hovered over as shown on the first button, as well as styled the new Screen layout with a darker edge and nice glow. Any inactive screens have a dark overlay instead of white and they will return to normal when hovered over.

Scroll up to watch a video on how to setup and use ThinkDark for Thunkable!

P.S. Thanks to Thunkable for making this new layout, looks like it is going to be very useful!