Perspective - Diagnosing an issue with CSS themes

I did was just renaming my CSS themes and now it looks like all themes can’t be found… Even if I change the theme back to light in the Designer, it’s still showing as if it can’t find the theme (font is back to times new roman).
This is my themes folder, with my theme folders being custom*:
image

I tried creating a super simple HTML file which used the custom-dark.css style and it all seemed to work ok, font was back to noto and page background turned dark-grey. So the CSS files seem to be intact and working, just Ignition is having a hissy fit :confused:

At a similar time, I was also bulk-find-replacing Perspective Styles used in Views in my project as well as I did some reshuffling. I can’t say which killed the styles…

In any case, how would I even begin to diagnose the issue? Where would I see CSS load errors? I’ve checked the dev tools and I only get this warning:

DevTools failed to load source map: Could not load content for http://192.168.8.2:8088/res/perspective/js/mobx-react.umd.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

I’m stuck with this now, where the only things that work are coming from Perspective Styles or the style property:
image

This is what it’s supposed to look like:
image

I fixed it… not entirely sure how. I copied the entire themes folder back in from prior to the theme changes, and then it worked… it died again after I renamed the themes though. After an hour of trying different things but not really anything, it then started working again… very confused

When you create a custom theme, are you extending from the light theme? Even the dark theme that is included with Perspective extends from the light theme - this includes almost everything except colors and a few other things. For instance, default button padding and margin will be the same in the dark and light themes.

Other points:

  • If you make changes to light.css or dark.css, those changes will be overwritten. If you make changes to the light or dark directory, those will not be overwritten (as long as those directories exist). I mixed this up. Any changes to the light.css or dark.css files will not be overwritten on startup (unless those files don’t exist), while any changes to /light or /dark will be overwritten.
  • It is much easier to extend the default theme (light or dark) than to create a new theme entirely, as you’ll need to define all styling yourself. This is especially true if you want to keep most of the styling, but change some colors or font families, for example.
  • It would scare me to do a bulk find-replace operation in the stylesheets. You are a brave man :wink:. I think the better way to do it would be to use selectors (especially since you’re modifying the CSS anyway). Use a more specific selector on the element or property you’re trying to style. This will take longer, but it will make your CSS much more robust and easier to troubleshoot (and you won’t need to use !important rules anywhere).

Here is an example of using a more specific selector:

If you look in light/common/button.css, you’ll see this style on beginning on line 18:

/* Primary button */

.ia_button--primary {
    background-color: var(--callToAction);
    border: var(--containerBorder);
    color: var(--neutral-10);
}

If you wanted to style the primary buttons in a specific context differently, you would use a more specific selector. The selector here is .ia_button--primary, which is a class selector (we know that because of the .). The specificity calculation for this selector would be (0, 1, 0). If someone isn’t familiar with CSS specificity, here is a short breakdown:

(# of ID selectors, # of class / pseudo-class selectors, # of element / pseudo-element selectors)

So for the CSS code above, we have no ID selectors and no element selectors (that are in this code snippet, they exist in common.css), so the specificity is (0, 1, 0). So, if you want to style a primary button with a different color, you would use a more specific selector, which can be done in many different ways. For instance, if you want to style primary buttons inside of popup windows, you can use this CSS:

.ia_popup .ia_button--primary {
    background-color: olivedrab;
}

In this case, the specificity would be (0, 2, 0), because there are two class selectors, so this style would be used over the one that has just one class selector. This only applies to styles in conflict! If a CSS property is set only once per project, you don’t need to deal with specificity. Also, if you use inline styles, they will always be more specific than any number of ID, class or element selectors!

Hopefully that will be helpful to somebody.

3 Likes

When I said this, I meant that I renamed the stylesheet filename itself. I also restructured some of the Perspective Styles (renamed folders etc.), and after each one I used the find/replace tool. It's only a home Maker project, so not a big deal if I stuff it up haha.

I'm certainly not making changes to the standard Ignition theme files as these will be overwritten on any Ignition upgrade, but am, as you say, extending / importing the light or dark theme.

Interesting regarding specificity - I knew the more specific a selector was, the more precedence it has, but I never spent the time to actually understand it properly, so thanks!

I'm still not entirely sure what I broke originally, but it's all working again now :+1:

That is good to hear! I also use Maker to test stuff at home,I’ve never taken our production system down with a stupid mistake.

Also, I edited my post yesterday night regarding which files were overwritten on Gateway restart (?), I don’t want to confuse anyone. I switched the two - the light.css and dark.css files are not overwritten unless they don’t exist, while /light and /dark are overwritten. I added some custom CSS into /light/index.css and was wondering why it disappeared when I restarted the gateway. I reread the Readme.md in the themes directory and found out I switched the two.