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

Questions about Thunkable
1

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:

Lines of text needed for Stylebot

  1. x.thunkable.com/projects/*

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

6 Likes
2

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

4 Likes
3

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… :slight_smile:

3 Likes
4

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! :sweat_smile: )

5

Just a quick update;

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

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 :slight_smile:

2 Likes
6

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!

thunkable-think-dark-theme-update
thunkable-think-dark-theme-update1120×823 32.7 KB

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

2 Likes