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: 438 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: [email protected] | My personal site: https://alnis.dev
Tagged:

Comments

  • john_mcclaryjohn_mcclary Member, Developers Posts: 3,755 PRO
    Do you have the issue with dark reader turning the background white when editing certain features? 
  • john_mcclaryjohn_mcclary Member, Developers Posts: 3,755 PRO
    Thanks for showing how to fix the icons too 👍
  • alnisalnis Member, Developers Posts: 438 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: [email protected] | My personal site: https://alnis.dev
  • 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,121 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)


  • 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
Sign In or Register to comment.