Themes¶
Themes can be created and updated by navigating to Design Systems in the navigation bar. You’ll see themes listed alongside design systems, which are the v2 equivalent.
Warning
If using Skuid within a Lightning deployment, such as through the Skuid Page (Aura) Lightning component, make sure all Skuid pages deployed in Lightning use the same theme.
Because Lightning Experience functions as a single page app, additional style resources are not loaded after the initial page load. Thus pages with different themes may not display properly.
When two or more Skuid pages are used within the same page—such as through the Page Include component —the two pages should use the same theme and CSS. If not, the pages may have inconsistent theming and styles.
Similarly, using different themes across pages within the Lightning Experience runtime, even between multiple Lightning pages, is not supported.
Create and edit themes¶
- Global actions
- the declarative Theme Composer.
- Export and Import themes. Import Theme: Import the theme from a compressed file. For more information see
Create New Theme: Create a new theme in
- the declarative Theme Composer.
- Row actions
- Edit Row: Edit the properties for the theme.
- the declarative Theme Composer. Open Theme Composer: Edit the theme in
- Export and Import themes. Export Theme: Export the theme as a compressed file. For more information see
Note
You cannot edit Skuid’s default themes in the Theme Composer.
Theme properties¶
These properties are visible and configurable either upon theme creation or within the themes list.
- Name: The name of the theme as it will appear in the themes list and within the Composer.
- Resource Name: The Skuid file (Skuid NLX) or Salesforce static resource (Skuid SFX) containing the theme.
- Resource Namespace: (Skuid SFX only*) The namespace prefix of the static resource containing the theme file. Typically only appears if themes are part of a managed package, like the default themes available from Skuid.
- Active: Denotes whether a theme is active, and thus assignable from the Composer or the Theme Assignments tab.
- Last Modified By: The name of the Skuid admin that last edited the theme. On Skuid NLX, this will also contain the Last Modified field.
- Last Modified: When the theme was last edited, whether in the Theme Composer or by running the Update out of Date Themes process.
- Created By: The name of the Skuid admin that created the theme.
Warning
While it is possible to deactivate and change the properties of default Skuid themes, it this is not recommended and may cause issues for other users.
Export and Import Themes¶
Skuid makes it easy to share themes between orgs by allowing you to export a compressed theme file (a .zip
or .sktheme
depending on your Skuid version), and then import that file into another org.
Export a theme [[]]¶
- Click Theme in the navigation bar of the Skuid UI.
- Click the Themes tab.
- Locate the theme you would like to move and click Export Theme in the column beside the theme’s name.
- Save the compressed theme file to a location you can find on your computer.
Note
Skuid SFX
If you encounter issues exporting your theme in Salesforce Lightning, try doing so in Salesforce Classic.
Import a theme [[]]¶
- Click Theme in the navigation bar of the Skuid UI.
- Click the Themes tab.
- Click the down arrow beside Create New Theme to open its sub-menu.
- Click Import Theme to open the Upload a Theme popup.
- Click
.zip
or.sktheme
extension.
Upload (Skuid NLX) or Theme File (Skuid SFX) and then navigate to the appropriate theme file—look for the - Confirm your selection.
Note
If you already have a theme of the same name, Skuid will prompt you to either update the name or to cancel the upload.
Note
Skuid SFX
If you encounter issues importing your theme in Salesforce Lightning, try doing so in Salesforce Classic.
Clone Themes¶
To clone any default Skuid theme, select it as the base theme when creating a new theme.
To clone a custom theme:
- Open the theme in the Theme Composer by clicking Open Theme Composer.
- Click Clone.
- Fill out the metadata for the new theme, including Name, Resource Name, and its Active status.
- Click Save.
After cloning the theme, click
Open Theme to begin editing it or Stay Here to continue editing the original theme.Note
It is also possible to clone themes from within the Theme Composer.
Delete a Theme¶
It is best practice to first deactivate themes before deleting them. This allows testing for any issues or conflicts before permanently removing the theme.
If you are certain you wish to delete a theme:
- Click the checkbox beside the theme on the theme list.
- Click Flag Selected Rows for Deletion.
- Click Save.
Note
In Skuid SFX, Skuid does not automatically delete a theme’s associated static resource when it is deleted from the themes list. Because of this, it is possible to restore a deleted theme from Salesforce’s Recycle Bin until its associated static resource is deleted.
To completely delete the theme, delete its associated static resource. Attempting to restore the deleted theme from the Salesforce Recycle Bin after its static resource is deleted results in errors.
Theme Assignments¶
Note
Your options may vary based on whether your are using Skuid NLX or Skuid SFX.
All Skuid pages are initially set to use the Default theme when they’re created. This Default theme is actually a reference to a runtime theme specified within the Theme Assignments tab. Along with this runtime default, several other options are available:
- Default theme: Determines which theme is set as the Default runtime theme for the Theme page property.
- Default composer theme: Determines which theme will be applied to the Composer.
A theme picker will appear when selecting a theme for one of these properties, displaying a preview of each theme beside their names.
Profile / User overrides [[]]¶
Note
Profile / user theme overrides are only available on Skuid SFX.
By default, all profiles and users are assigned the themes set in the Organization Defaults tab. However, this table provides the ability to override those defaults for specific profiles and users. Each row represents an override, with the same fields as those listed in the Organization Defaults tab.
Note
Even if a theme assignment override exists, it can be superseded by page’s theme property. For more information see Hierarchy of theme assignments.
To create a new theme assignment override, click
Add New Preferences. Select whether the override applies to a Salesforce profile or a specific end user, and then select the corresponding profile/user.- Click to change Theme: Opens the theme picker
Edit Row: Used to edit an existing theme assignment override.- Flag for Deletion: Flags a theme assignment override for deletion. An override is not deleted until it is saved by clicking Save.
Hierarchy of theme assignments [[]]¶
Theme assignments follow an established hierarchy, listed below by order of importance:
- Page-level: Set on the Skuid page’s properties in the Composer.
- User-level: Set under Theme > Theme Assignments > Profile/User overrides.
- Profile-level: Set under Theme > Theme Assignments > Profile/User overrides.
- Organization-level: Set under Theme > Theme Assignments > Organization Defaults.
Or, phrased as a sentence, a page’s Theme property supersedes any user-based overrides, which supersede any profile-based overrides, which supersede any organization defaults.
Update Out of Date Themes¶
As Skuid continues to make improvements to its systems and components, sometimes the IDs, CSS classes, and HTML structure of its components may change behind-the-scenes. This means that each Skuid theme must also be updated to reflect those new IDs, classes, and structures. Otherwise, the style rules of a theme will no longer be applied correctly. While new default themes are installed with each Skuid upgrade, custom themes still need to be updated to match. The Update out of Date Themes process does just that, reconciling any updates to default themes with the custom themes based upon them.
Note
- It is best practice to run this process after each Skuid upgrade.
- This process may take several minutes.
- You may export your themes prior to updating them for local backups.
Themes are not updated automatically. Skuid admins must manually update their themes.
- Navigate to Theme > Themes.
- Click Update out of Date Themes.
- Click Update.
Note
The Update out of Date Themes button is not available on Skuid NLX. If you see issues with a particular theme, see the Troubleshooting steps below.
Set Default Themes¶
In the Skuid navigation bar, click Design Systems.
Click the
more options menu next to Create.Click Set Defaults, then customize:
- Default theme: Sets a previously-created theme system as the default for all v1 pages. Select from the dropdown menu.
- Default composer theme: Sets the theme for the Composer, irrespective of API version. Select from the dropdown menu.
Click Save.
Troubleshooting¶
Unexpected theme behavior in Lightning [[]]¶
Are you using the Lightning Design Theme? If you are using a different Skuid theme—or a custom theme cloned from any theme besides the Lightning Design Theme—you may see unexpected behaviors.
Skuid recommends using the Lightning Design Theme (or a custom theme cloned from it). This theme is optimized for Lightning.
My theme does not load. / My theme styles are not applied correctly. [[]]¶
There could be some issues with Skuid themes being cached. To resolve this, try the following solutions:
If one particular theme is still having issues:
Navigate to Themes.
Click
Open Theme Composer beside the problematic theme.Change a property in the Theme Composer to a different value.
Note
The property/value being changed does not matter.
Undo that change, reverting the property back to its original value.
Click Save.
My Theme Composer does not load [[]]¶
- Try disabling Enable clickjack protection for customer Visualforce pages with headers disabled in your Salesforce session settings.
Missing Icons [[]]¶
Not all icons translate from one theme to the next! If you change your theme and find icons missing or replaced by the “caution”
icon, then you can fix the issue in the Composer by selecting an icon that exists within the chosen theme.Warning
The Silk icon set is only available when using the Skuid Classic theme, or when using themes that are based on the Classic theme. Silk icons are not available in the Skuid Lightning Design theme.
- Select the action or button that is missing an icon.
- Click on the Icon button next to the Action Icon area.
- Choose an icon from the Standard icon set.
- Save your page.
Note
All Skuid themes—including customized themes―default to the Standard icon set.
Your icon selections will most likely be compatible with all themes if you choose icons from the Standard set.