# \[unofficial\] DARK THEME for Thunkable - with video! - \[Updated for new Drag & Drop designer\]
**URL:** https://community.thunkable.com/t/unofficial-dark-theme-for-thunkable-with-video-updated-for-new-drag-drop-designer/978367
**Category:** Questions about Thunkable X
**Created:** [November 16, 2020, 8:47pm UTC](https://community.thunkable.com/t/unofficial-dark-theme-for-thunkable-with-video-updated-for-new-drag-drop-designer/978367 "2020-11-16T20:47:34Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@appspark.uk](https://community.thunkable.com/u/appspark.uk)
#### Post date: [November 16, 2020, 8:47pm UTC](https://community.thunkable.com/t/unofficial-dark-theme-for-thunkable-with-video-updated-for-new-drag-drop-designer/978367/1 "2020-11-16T20:47:34Z")
# 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](https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha)**.
_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](https://stylebot.dev/) 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](https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha)
_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:**
https://www.youtube.com/embed/M9Ziw2VfeUM?feature=oembed&wmode=opaque
> **Lines of text needed for Stylebot**
>
> 1. `x.thunkable.com/projects/*`
>
> 2. `@import url("https://raw.githubusercontent.com/easaw/ThinkDark/master/ThinkDark.css");`
---
### Author:  [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)
#### Post date: [November 17, 2020, 10:52am UTC](https://community.thunkable.com/t/unofficial-dark-theme-for-thunkable-with-video-updated-for-new-drag-drop-designer/978367/2 "2020-11-17T10:52:27Z")
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
---
### Author:  [@darren](https://community.thunkable.com/u/darren)
#### Post date: [November 17, 2020, 1:38pm UTC](https://community.thunkable.com/t/unofficial-dark-theme-for-thunkable-with-video-updated-for-new-drag-drop-designer/978367/3 "2020-11-17T13:38:41Z")
> [@appspark.uk](#):
>
> @import url(“[https://raw.githubusercontent.com/easaw/ThinkDark/master/ThinkDark.css](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… 🙂
---
### Author:  [@appspark.uk](https://community.thunkable.com/u/appspark.uk)
#### Post date: [November 21, 2020, 9:27am UTC](https://community.thunkable.com/t/unofficial-dark-theme-for-thunkable-with-video-updated-for-new-drag-drop-designer/978367/4 "2020-11-21T09:27:54Z")
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!_ 😅_)_
---
### Author:  [@appspark.uk](https://community.thunkable.com/u/appspark.uk)
#### Post date: [November 21, 2020, 2:20pm UTC](https://community.thunkable.com/t/unofficial-dark-theme-for-thunkable-with-video-updated-for-new-drag-drop-designer/978367/5 "2020-11-21T14:20:49Z")
Just a quick update;
I’ve added some new styles to work with the new Blocks and Design features as listed here:
> [@tada Try out the new blocks editor 2020-11-10](http://community.thunkable.com/t/try-out-the-new-blocks-editor-2020-11-10/977841):
>
> 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](https://x.thunkable.com/account/features) 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 🙂
---
### Author:  [@appspark.uk](https://community.thunkable.com/u/appspark.uk)
#### Post date: [November 27, 2020, 3:29pm UTC](https://community.thunkable.com/t/unofficial-dark-theme-for-thunkable-with-video-updated-for-new-drag-drop-designer/978367/6 "2020-11-27T15:29:58Z")
### 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!_ 👍
---
### Author:  [@ioannis](https://community.thunkable.com/u/ioannis)
#### Post date: [November 8, 2024, 12:21pm UTC](https://community.thunkable.com/t/unofficial-dark-theme-for-thunkable-with-video-updated-for-new-drag-drop-designer/978367/7 "2024-11-08T12:21:24Z")