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

AllenMiquel · January 1, 2020, 6:37pm

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

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

Thanks a lot in advance!

petr.patocka · January 2, 2020, 8:15am

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.

AllenMiquel · January 2, 2020, 9:58am

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!

AllenMiquel · January 2, 2020, 10:07am

Hmm @petr.patocka – The code doesn’t seem to be working or doing anything, sadly 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

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?

petr.patocka · January 2, 2020, 10:44am

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

AllenMiquel · January 2, 2020, 10:56am

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

Thanks again brother!

AllenMiquel · January 2, 2020, 11:34am

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:

AllenMiquel · January 2, 2020, 12:00pm

@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;
}

petr.patocka · January 2, 2020, 12:34pm

Great.

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

AllenMiquel · January 2, 2020, 1:09pm

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 – 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

AllenMiquel · January 2, 2020, 1:25pm

@petr.patocka – New image seems to fit a lot better, and I promise I’m stopping here 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

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;
}

petr.patocka · January 2, 2020, 1:31pm

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

petr.patocka · January 2, 2020, 1:34pm

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

AllenMiquel · January 2, 2020, 1:36pm

Yeah I was just gonna add a note for that

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

pbervoets · January 17, 2024, 4:51pm

AllenMiquel:

.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;

@russellcresser
Do you know if this code still works on your pc or is there an updated version of it?
I would like the Facer Creator Page to be totally dark and grey the rest. The settings offer only the possibility to turn the center of the screen, dark. I like that to be everywhere on the page.

I got the impression that the url mentioned as background image
https://i.imgur.com/prisIZU.pn
is causing the problem.
My screen turns there white (on the left of the creator page, where you select the elements).
I tried different styles applying on
Facer - Thousands of FREE watch faces for Apple Watch, Samsung Gear S3, Huawei Watch, and more
with no good results.
I added Stylus as an extension on my Edge browser.

Here is the last code from this post i used with not the results i want.

/* ==UserStyle==
@name Facer Creator Dark Mode
@namespace Facer - Thousands of FREE watch faces for Apple Watch, Samsung Gear S3, Huawei Watch, and more
@version 0.1
@description This style changes the background color of the Facer creator page to black.
@author Bing
==/UserStyle== */
.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;
}
.facer-editor .selectedelement {
background-color: transparent !important;
color: black !important;
}

Thanks

russellcresser · January 17, 2024, 7:04pm

Sorry I have never been there . I presume that is an Edit for the Java or HTML . I aprciate you thinking I do but I don’t know that Stuff .

pbervoets · January 17, 2024, 10:34pm

Found a solution, with a little AI help.
Made a few adaptions on the code to add freedom to choose the body background color and color of text by using HEX codes for color. I find it much better than the overall white presentation, hurts my eyes, perhaps others too
See, i must wear sunglasses…

I find it almost perfect for many things.

This is a shot from the Facer Creator page, but everything i open does use this color scheme. But no problem, through the extension icon you can easily restore the white pages.

I love it also how it improves the other Facer pages.

This the code i used

/* ==UserStyle==
@name Facer Creator Dark Mode
@namespace Facer - Thousands of FREE watch faces for Apple Watch, Samsung Gear S3, Huawei Watch, and more
@version 0.1
@description This style changes the background color of the Facer creator page to black.
@author Bing
==/UserStyle== /
/ Change background color to black /
/ Change background color to black /
/ Change background color to raisin black /
body {
background-color: #1F2022 !important; / RGB values for raisin black /
color: #9EA3AD !important;
}
/ Reset background color for added elements */
body * {
background-color: transparent !important;
color: inherit !important;
}

Ciao
Patrick

petruuccios · January 17, 2024, 10:48pm

What browser is it for and where do I have to put that?

russellcresser · January 17, 2024, 10:58pm

Wow . Watch out Guys I see a Giant coming our way . I like Peter have absolutly no Idea where you post that Code . Now you see people think when they make formulas for the Tag Fields they are Writing Code . I know Code when I see Code.
Having said that I am not sure if it is Java , HTML or something else . Despite that I have Bookmarked the Topic so I don’t miss a trick .
You might be the one to ask if we can use the scripting fields that appear in some layers and is it only Unity 3d Shadres that can be animated with the Scripts .

pbervoets · January 18, 2024, 1:29am

Hi Peter

I use Microsoft Edge browser. I believe it works also with Chrome, but didn’t test that.

You need to download Stylus through the chrome web store.

(https://chromewebstore.google.com/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne)

Here are the steps:

Install the Stylus extension for Edge from the Microsoft Store. If the green Icon is not displayed, go to extensions and click the eye to show the extension.
Once installed, click on the Stylus icon in the toolbar and select Manage.
Click on the Write new style button.
In the Name field, enter a name for the style.
In the Code field, select the whole existing code and paste the code from the above post.
Click on the Save button.
Open the Facer Creator page in Edge and click on the Stylus icon in the toolbar.
Select the style you just created from the list of styles.

You can always roll back by
clicking the icon for Stylus
turn all styles off

Remember, all the open pages in the browser will use this code. There is no risk here, as i said you can roll back and turn this style off.

Let me know if you get stuck. It should work.

Ciao
Patrick