SF icons hard to read using DarkReader

Technical Problems SketchUp for Web
,
1

SF icons hard to read using DarkReader.

This is because of the gray you guys insist on using, which there have been MANY complaints about over the years. (You keep responding that this gray is part of your “branding”. We keep replying we don’t care about your “branding” it is HARD to read!)

Anyhow, since gray is in the “middle” of the lightness (midway between white and black,) it does not invert well under extensions that use inversion for dark scheming.

Here is what SketchUp Free looks like after loading with Dark Reader ON:

image
image759×708 50.1 KB

The extension uses a JSON settings file, that we may be able to add a site specific entry to.

EDIT: Using the built-in “Developer Tools” (link at the bottom of the DarkReader menu,) … I added a section for "app.sketchup.com" (to the "sites" list,) and the icons got immediately BETTER after applying the changes (which was only to not invert img elements.)

        {
            "url": "app.sketchup.com",
            "invert": [],
            "noinvert": [
                "img"
            ]
        },

NOTE: Dark Reader extension reloads the config file from GitHub every 15 minutes, so if your testing local changes using DR’s developer tools, and you suddenly don’t see things as you expect, press the “Apply” button again at the bottom of DR’s developer tool page to reapply your local changes.

The author of DarkReader will take submissions for site “tweaks” to add to the defaults (as delivered.)

Anyone have any other tweak ideas ?

NOTE: I’ve fixed most things that should not be inverted. See next post.

REF:

NOTICE:

DARK READER CHANGES FOR SKETCHUP FREE ABANDONED

I’ve actually withdrawn the requested changes to the Dark Reader extension, as my changes have gotten too complex and working around Dark Reader’s quirks and shortcomings just doubles the complexity.

So I’ve copied half of what I’ve done over to a new standalone Chrome extension, and it should be better than just a set of tweaks to Dark Reader, and more maintainable in the long run. (Ie, he was taking far too long to respond to change requests, and this cannot be so as SketchUp Free sometimes has several build releases a week.)

1 Like
2

I spent the night making css tweaks so SketchUp Free is usable with the Dark Reader Chrome extension.

If you prefer the modeling canvas to be inverted, remove the “invert” selector “canvas#canvas”.
(It makes more sense to me to use a dark style for modeling in a “work” scene, and then switch to another scene with a output style. You’d want to actually see the model in whatever style settings are, instead of having the extension invert colors, etc.)

Read about what these settings do here:
GitHub - darkreader/darkreader: Dark Reader Chrome and Firefox extension

NOTE: Dark Reader extension reloads the config file from GitHub every 15 minutes, so if your testing local changes using DR’s developer tools, and you suddenly don’t see things as you expect, press the “Apply” button again at the bottom of DR’s developer tool page to reapply your local changes.

Here are my tweaks for pasting into the "fix_inversion.json" file. (version 3)

        {
            "url": [ "app.sketchup.com", "edu.sketchup.com" ],
            "invert": [
                "#canvas",
                "#layers-container-overlay .sp-picker-container",
                ".about-tab img",
                ".bottom-bar-brand-logo",
                ".download-card-image",
                ".category-thumbnail > img",
                ".component-thumbnail > img",
                ".dimension-details-section-header",
                ".display-secondary-detail",
                ".entity-info-label",
                ".entity-info-layer-material-icon > img",
                ".files-tab-header img",
                ".layer-thumbnail > img",
                ".login-email",
                ".login-picture",
                ".material-instance > img",
                ".options-label:not(.option-toggle)",
                ".option-toggle-label",
                ".scene-attributes-title",
                ".scene-properties-title",
                ".scene-details .labeled-checkbox > div:first-child",
                ".scene-thumbnail > img",
                ".sp-input-container",
                ".thumbnail img"
            ],
            "noinvert": [
                "#instructorIframe",
                "img",
                ".checkbox-label .checkbox-checkmark",
                ".entity-info-input",
                ".entity-info-back-material-container > .inline-div",
                ".entity-info-layer-material-container > .inline-div",
                ".entity-info-layer-material-icon[style*='background-image: url']",
                ".scene-description"
            ],
            "rules": [
                ".entity-info-label, .options-label, .dimension-details-section-header, .scene-details, .scene-attributes-title, .scene-properties-title, .scene-description { color: #C9C9C9 !important; }"
            ]
        },

…

EDIT: @joy @Steve_Ketchup @Caroline @ericdbohn , sorry …
…, forgot about “SketchUp for Schools” that uses it’s own “edu” subdomain.
Added that to the "url" attribute. (version 3).
Also attempted to update Pull Request on GitHub, but Travis is having a fit about one little change.

3

Hi Dan,

Could you share a screenshot for us who don’t use Chrome or DarkReader?

4

slightly off-topic, but if your injecting css…

css to inject if you want to print an A4 page…

canvas#canvas.printable {
  width:278mm ;
  height:196mm ;
  }

A4 measures 297 x 210, but this produces almost 1:1 print with A4 Borderless printer settings…

for ‘Letter’ you would need to experiment with inch settings…

john

5

I have a few CSS injections in my SketchUp Free Interface thread as well: The SketchUp Free Interface

1 Like
6

Not directly, but the Dark Reader Chrome extension does, but for the purpose of dark scheme visibility.

I do not believe that this extension should do anything outside it’s purview, and I doubt the author would accept such a modification to his extension’s config files. (Ie, he’d reject a pull request that does not fit with the extension’s purpose.)

Now, of course there is room for other Chrome extensions to enhance SketchUp Free in other ways. That deserves discussion in other topic threads.

1 Like
7

Not sure what you want a screen shot of … so …

I edited the 1st post and added a screenshot of what SketchUp Free
looks like with Dark Reader ON, and no tweaks applied.

When you install Dark Reader it adds an icon to the toolbar to access the Dark Reader menu …

image

The menu has two pages (currently but the author is overhauling the interface,) …
The 1st page has 3 tabs: Filter, Font, and Site list (which can be used as either an inclusion or exclusion list.)

This is what the 1st page looks like …

image
image375×619 19.3 KB

The 2nd page is the “developer tools” page, which just displays the Dark Reader extension’s "fix_inversion.json" file, so you can test tweaks “on the fly”. What I do is open Notepad and have the site section in the Notepad editor, and make tweaks there, then copy and paste the whole section to the appropriate (alphabetical) place in the json file, by highlight and paste-replace, displayed on page 2 …

image
image375×611 24 KB

The “Apply” button on this 2nd page makes the local tweaks active.
(But these tweaks can get reset every 15 mins as noted above, requiring this button to be reclicked.)

When the tweaks are finalized a Pull Request is done against Dark Reader’s GitHub master repo, and the author will review make changes if needed and merge the request. (Then users everywhere will get the updated config within 15 minutes. He has already accepted and merged my initial pull request for ruby.sketchup.com and rubydoc.info sites section.)

The “Read about this tool here” link is the one I posted above …

NOW, … I posted a copy of the json (above) section for SketchUp Free in Dark Reader’s GitHub issues to ask for the author’s critique and advice. (… no response yet.)

8

UPDATE: I overhauled the json tweaks in post 2. Started from scratch and got a better result.

Screenshot …

image
image738×705 176 KB

Compare before tweaks …

759×708 50.1 KB

1 Like
9

The images helps describe what you mean.

With your tweaks to DarkReader it looks quite readable. Do you still think the problem persists or does this solve it?

Btw, instead of listing all toolbar icons in the invert list it’s maybe easiest to move img altogether from noinvert to invert, and then add texture previews in noinvert. On a normal website (a document, not an app) it makes sense to not invert images but for SketchUp Free it seems the vast majority of images are toolbar icons.

Sidenote: I’m using Flux myself for a similar purpose as Dark Reader seems to be intended for and am really happy with it. It gradually darkens the screen as its getting dark outside (based on your location) and reduces the blue light from the screen.

10

Solves most issues. There are only a few things, perhaps mouse hover highlight, and the street lines are hard to see on the Add location map.

No, it’s not easier. There are a bunch of button images (tabs for the inspectors, etc.) some using background images that I’d have to add in if I move img to invert. I tried that the first go and the results were not as good (I had to fix MORE images that way.)

The main issue is that gray is in the middle and inverting sometimes makes it a bit darker, but no further than the “middle” (#808080).

11

That makes sense. I thought it was just all images, not backgrounds.

It looks as the problem is unrelated to gray being in the middle, but being about what is listed to be inverted or not. When both the icons and their background are inverted it looks good to me. Perhaps “inverting” also adds some extra contrast; to me the icons look more or less white now.

12

Well this extension works weirdly. Everything gets inverted. To revert something that was inverted incorrectly, you need to puts it’s selector in the “invert” group so that it gets inverted again (from it’s current inversion state.)

The “noinvert” group is for fixing nested descendant elements that get reverted unnecessarily from ancestor selectored elements in the “invert” group (more commonly by the general settings in the extension’s “common” group.)

13

Ok, that’s a bit backwards.

1 Like
14

… and updated to add the subdomain for “SketchUp for Schools” … "edu.sketchup.com".

15

NOTICE:

DARK READER CHANGES FOR SKETCHUP FREE ABANDONED

I’ve actually withdrawn the requested changes to the Dark Reader extension, as my changes have gotten too complex and working around Dark Reader’s quirks and shortcomings just doubles the complexity.

So I’ve copied half of what I’ve done over to a new standalone Chrome extension, and it should be better than just a set of tweaks to Dark Reader, and more maintainable in the long run. (Ie, he was taking far too long to respond to change requests, and this cannot be so as SketchUp Free sometimes has several build releases a week.)

So my own extension is a work in progress, it’ll be a day or two before the alpha version is ready.

3 Likes
16

Are you planning a chrome extension specifically for having a dark theme on SU Free or for all kinds of different style changes?

17

Just Dark Theme for now.

Although I might play at a large toolbar.

1 Like
18

This topic was automatically closed after 91 days. New replies are no longer allowed.