Looking for a dark theme? Here's how you can get one working using a browser extension (unofficial!)

alnis

My friend pointed out a dark theme extension for Chrome, Firefox, and Safari (webpage: https://darkreader.org/). It's good at converting light theme websites to dark theme ones. Surprisingly, it even works with Onshape! I added this to the config (under Dark Reader extension button > Dev tools) to make the icons more readable and dark theme-y:

================================

cad.onshape.com

INVERT
.os-svg-icon
.os-form-field-container

CSS
.os-svg-icon {
    filter: brightness(0.6) contrast(5) saturate(2) grayscale(.2) !important;
}

================================

It works very well with the documents page, part studios, feature studios, assemblies, etc. The only place where it really fails is in drawings (the drawing stays light and the icons are hard to see), but you can quickly toggle it on and off with Alt + Shift + D.

Here are some screenshots with it active:


Of course, I'm not a developer or in any way affiliated with Onshape or Dark Reader, so use at your own risk!

john_mcclary

Do you have the issue with dark reader turning the background white when editing certain features? 

john_mcclary

Thanks for showing how to fix the icons too 👍

alnis

I just noticed the background turning white. I somehow had managed to not test editing anything other than a sketch before posting . Hopefully I'll figure out a workaround. In the mean time, I will unfortunately probably have to stick with the filter and filter+ options which cause the model's shading to be inverted (however, it does preserve the correct hues then). At least the dynamic dark theme option is good for viewing and presenting.

bradley_sauln

I've been using HackerVision on Chrome and am really enjoying it. Worth the $2.99/yr to continue using it after the free trial IMO

PrimoDev

Hello, I've been looking for a free alternative and available on Firefox as HackerVision do not seems to be in the add-on list.

Found a little workaround and here it is :

First, you have to install the add-on called "Darker Background Brighter Font', go in your onshape document and in the extensions tweaks (in upper right corner of your window) put "Change Image Brightness" to 0.3, this is what will decrease the brightness when you're editing extrude parameters for example, here how the white background has been darkened with a 0.5 value :

Pretty convenient right ? The last tweak is a bit more complex. As this add-on make the background all black, measurements in sketches are invisible -> black on black. To work it out you have to :

- press F12 when in a part studio (any will do)

- click that little button upper left corner of that little tab that opened

- click on the "design section" of the webpage

- in the CSS section (see pic below) scroll down to #canvas

-in #canvas change the background rgb value which should be 0, 0, 0.

You can click the circle to change the color by mouse-drag. Put it around 100, 100, 100.

You should now have a grey background and when editing extrude parameters your screen will stay grey !

As long as you don't refresh the website, your CSS will stay grey and you can navigate everywhere in onshape (has to be verified).

Cheers

MichaelPascoe

@alnis_smidchens This is legit! Thanks.

Here are the settings I'm using in your modified code:
brightness(.7) contrast(5) saturate(.5) grayscale(.2)

Joe_Sparto

I've been using the Dark Reader add on for Onshape since my employer switched from Solidworks to Onshape in July '20. I did discover a work around for drawings. First you will need to go to settings and turn on color filters. I have mine set to inverted. When I open or create a new drawing, I disable Dar Reader, and click windows key + Ctrl + C. I do find it rather ridiculous that I even need to do this. Onshape should have a color feature option for your account so that it would automatically stay dark when your working instead of having users push extra shortcuts so that they won't get headaches.

matthew_satterlee

My eyes thank you so much for this alnis!

The newer versions of dark reader have per-site settings built into the the extension popup, so no need to edit the config. https://darkreader.org/help/en/#custom-site-settings

haurjie_liang

I will just add to this thread and say yes please do implement native dark mode into Onshape! Eyes really hurt lol. But I do love using Onshape

GoldenSpamfish

Something I did to improve this a little is to fix the appearance palette colors. My css for this:

<div>================================<br><br>cad.onshape.com/documents<br><br>INVERT<br>.os-svg-icon<br>.os-form-field-container<br><br>IGNORE INLINE STYLE<br>.swatch-display<br><br>IGNORE IMAGE ANALYSIS<br>.swatch-display<br><br>================================<br></div>

The relevant part is just the IGNORE stuff.

marcin_dziony

Hii, been using dark reader for it for some time and it worked the same as for u
But now it looks like, well, crap
No idae what could have caused it
Could anyone help with fixing it?
(at the beggining it worked the same as for the OP but now everything it like, well, like in my screenshot and can barely see anything :c )

Majoof

Reviving this thread, I picked up Dark Reader the other day and with default settings it does a really good job, however I have noticed one thing that has stopped me from using it full time. Editing sketches.

Buttons, icons, most text, parts and assemblies look fantastic:


Sketches in a part studio look great:

Editing a sketch though, it keeps the OG colouring set by Onshape, making dimensions really hard to see. I'm sure it could be edited by some code similar to that of @alnis above, but I've had no luck. Anyone know what I'd need to add to change the style of dimensions?

Also @marcin_dziony, I think you need to change Dark Reader from Filter, Filter+ or Static to Dynamic for it to look like mine or Alnis' screenshots.