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 . 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.