Welcome to the Onshape forum! Ask questions and join in the discussions about everything Onshape.

First time visiting? Here are some places to start:
  1. Looking for a certain topic? Check out the categories filter or use Search (upper right).
  2. Need support? Ask a question to our Community Support category.
  3. Please submit support tickets for bugs but you can request improvements in the Product Feedback category.
  4. Be respectful, on topic and if you see a problem, Flag it.

If you would like to contact our Community Manager personally, feel free to send a private message or an email.

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

alnisalnis Member, Developers Posts: 447 EDU
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!
Student at University of Washington | Get in touch: contact@alnis.dev | My personal site: https://alnis.dev | Currently an Onshape intern: asmidchens@onshape.com
Tagged:

Comments

  • john_mcclaryjohn_mcclary Member, Developers Posts: 3,890 PRO
    Do you have the issue with dark reader turning the background white when editing certain features? 
  • john_mcclaryjohn_mcclary Member, Developers Posts: 3,890 PRO
    Thanks for showing how to fix the icons too 👍
  • alnisalnis Member, Developers Posts: 447 EDU
    I just noticed the background turning white. I somehow had managed to not test editing anything other than a sketch before posting :s. 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.
    Student at University of Washington | Get in touch: contact@alnis.dev | My personal site: https://alnis.dev | Currently an Onshape intern: asmidchens@onshape.com
  • bradley_saulnbradley_sauln Moderator, Onshape Employees, Developers Posts: 373
    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
    Engineer | Adventurer | Tinkerer
    Twitter: @bradleysauln


  • PrimoDevPrimoDev Member Posts: 4 EDU
    edited March 2021
    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

  • MichaelPascoeMichaelPascoe Member Posts: 1,694 PRO
    @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)



    Learn more about the Gospel of Christ  ( Here )

    CADSharp  -  We make custom features and integrated Onshape apps!   cadsharp.com/featurescripts 💎
  • matthew_satterleematthew_satterlee Member Posts: 2
    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_lianghaurjie_liang Member Posts: 5
    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 :)
  • GoldenSpamfishGoldenSpamfish Member Posts: 4 EDU
    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_dzionymarcin_dziony Member Posts: 4
    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 )
  • HellesseyHellessey Member Posts: 2
    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.

Sign In or Register to comment.