Dark Mode for the Creator Page / Turn off the lights!

Hey! I don’t know if this has been suggested already, but I tend to create rather dark-colored watch faces given I own a Samsung Active 2, and anything else just clashes with the pitch black bezel. Problem is, creating a dark watch face on the bright background of the creator is not only a huge strain on the eyes, but also makes it difficult to distinguish detail.

To be clear/TL;DR: There’s a button to turn the background color dark when you “preview”/test a watch face from the creator. It’d be nice if the creator page itself had this button :v:

… and while we’re at it, a dark theme for the forums wouldn’t hurt :P! But that’s me being greedy :sweat_smile:

Thanks a lot in advance!

There are browser add-ons that allow css to be edited locally. I tried “Stylus” for Opera. There is also Stylus for Chrome. Then just use the following code to adjust the appearance of the editor:

.editor-insights .editor-insights-master {
    -webkit-flex: 0 0 350px;
    -moz-flex: 0 0 350px;
    -ms-flex: 0 0 350px;
    flex: 0 0 350px;
}

.facer-editor .watch-canvas-wrapper .watch-canvas-outer-container {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAACgAgMAAADm7QMnAAAAA3NCSVQICAjb4U/gAAAADFBMVEViYmJDQ0M9PT04ODjvNVPoAAAACXBIWXMAAAsSAAALEgHS3X78AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M1cbXjNgAAAEdJREFUSIljYA3FAA4M//e///0PlfhDtOBf7IKrMMFKErSPWjRq0ahFoxaNWjRMLMJRoYzWR6MWjVo0atGoRaMW0dUi7BUKAIuz5t8xDHTcAAAAAElFTkSuQmCC');
}

.facer-editor .palette-left.open {
    width: 350px;
}

.facer-editor .palette-left > div {
    width: 350px;
}

.facer-editor .palette-wrapper .header-tabs {
    padding-right: 15px;
}

.facer-editor #newLayer #newLayerToggle {
    margin-right: 10px;
}

I still made the left menu a little wider. I have a really wide monitor.

Any comments welcome and I will be happy to add them to the code. So far, this is only a hint of possible adjustments.

2 Likes

Oh wow. I’ll give that a try and let you know. I happen to use Opera as well, I’m surprised you do xD not a lot of people seem to.

Whether this works or not, thanks a ton for just the time and effort. I’ll let you know though!

Hmm @petr.patocka – The code doesn’t seem to be working or doing anything, sadly :frowning: I just downloaded Stylus for my Opera browser, added a new style for the creator website and pasted your code. Are there any special steps or options or anything else I should tweak or… something?

Edit: Actually, the width of the elements list on the left side is bigger, so the code is being read just fine (and the width part of the code seems to work fine as well), just not the part where it’s supposed to make the background darker :frowning:

Edit 2: Okay so in your snippet you’re missing a dot, and that was causing the problem xD
.facer-editor .watch-canvas-wrapper .watch-canvas-outer-container
^ the period at the very beginning!

There’s still the issue of that white “square” around the watch face I’m making that’s still very bright though:

Any ways to change that one?

Error formatting. Fixed. I am sorry. I don’t know how to change the color of this element yet.

No worries, again, thanks a ton for this, this is already a huge improvement :stuck_out_tongue: But if you do stumble upon the answer for the other element, please do let me/us know :v:

Thanks again brother!

Sad, it seems to be an image:

Not sure if that can be changed via CSS

Just in case you find a way to change it, I darkened the mask picture, 2 variations; dark and darker you can use:

@petr.patocka – Woo, I think I’ve done it!

It’s not perfect, but heck, it’s enough to keep my vision xD
I’ll leave the new snippet for you to add/tweak below if you wish, along with my thanks again for pointing me to this!

.facer-editor .watch-canvas-wrapper .has-previews .watch-canvas {
    background-image: url(https://i.imgur.com/DFJ7H3C.png);
    background-size: 79%;
    background-position-x: center;
    background-position-y: center;
}
1 Like

Great.

I converted that image to base64 and here’s the style file.

1 Like

Why convert it to base64?

Also I managed to get rid of that outer white border from the picture above. Now there’s only a white border around the actual “mask” around the watch face to deal with xD

.facer-editor .watch-canvas-wrapper .has-previews .watch-canvas {
    background-image: url(https://i.imgur.com/DFJ7H3C.png);
    background-size: 79%;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid #00000000;
}

Note: the color of the border has 8 zeros instead of the typical 6 digits in hex values because the last 2 deal with opacity. To anyone who may not know :v: – Leaving the border transparent gets rid of the previous white border, however if you up the opacity on your new border, then there will be a border with whatever color you chose (in this case black).

I’m gonna keep messing around with it see if I can get rid of that final border around the mask… but I think it’s gonna come down to maybe modifying the base mask/image itself, we’ll see xD

@petr.patocka – New image seems to fit a lot better, and I promise I’m stopping here :stuck_out_tongue: I increased the “outer” size of the image/mask, but left the circle cut-out the same size as before.

.facer-editor .watch-canvas-wrapper .has-previews .watch-canvas {
    background-image: url(https://i.imgur.com/prisIZU.png);
    background-size: 79%;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid #00000000;
}

Anyway! Thanks again :v:

Full code for anyone to copy paste into Stylus:

.editor-insights .editor-insights-master {
    -webkit-flex: 0 0 350px;
    -moz-flex: 0 0 350px;
    -ms-flex: 0 0 350px;
    flex: 0 0 350px;
}

.facer-editor .watch-canvas-wrapper .watch-canvas-outer-container {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAACgAgMAAADm7QMnAAAAA3NCSVQICAjb4U/gAAAADFBMVEViYmJDQ0M9PT04ODjvNVPoAAAACXBIWXMAAAsSAAALEgHS3X78AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M1cbXjNgAAAEdJREFUSIljYA3FAA4M//e///0PlfhDtOBf7IKrMMFKErSPWjRq0ahFoxaNWjRMLMJRoYzWR6MWjVo0atGoRaMW0dUi7BUKAIuz5t8xDHTcAAAAAElFTkSuQmCC');
}

.facer-editor .watch-canvas-wrapper .has-previews .watch-canvas {
    background-image: url(https://i.imgur.com/prisIZU.png);
    background-size: 79%;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid #00000000;
}

.facer-editor .palette-left.open {
    width: 350px;
}

.facer-editor .palette-left > div {
    width: 350px;
}

.facer-editor .palette-wrapper .header-tabs {
    padding-right: 15px;
}

.facer-editor #newLayer #newLayerToggle {
    margin-right: 10px;
}

Thanks to the conversion to Base64, it will still work. Regardless of the availability of the image.

1 Like

Just for clarification. The background image is hardcoded there. Switching between round and square appearance does not work.

Yeah I was just gonna add a note for that :stuck_out_tongue:

To anyone who may want the squared version, you can just grab the image below, tone down the brightness and replace it from the code above ^ – It won’t switch automatically but, if you happen to develop more for squared faces than round, or just want to switch manually… you still can xD

1 Like