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

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 [[]]

  1. Click Theme in the navigation bar of the Skuid UI.
  2. Click the Themes tab.
  3. Locate the theme you would like to move and click Export Theme fa-file-excel-o in the column beside the theme’s name.
  4. 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 [[]]

  1. Click Theme in the navigation bar of the Skuid UI.
  2. Click the Themes tab.
  3. Click fa-caret-down the down arrow beside fa-picture-o Create New Theme to open its sub-menu.
  4. Click fa-sign-in Import Theme to open the Upload a Theme popup.
  5. Click fa-cloud-upload Upload (Skuid NLX) or fa-cloud-upload Theme File (Skuid SFX) and then navigate to the appropriate theme file—look for the .zip or .sktheme extension.
  6. 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:

    1. Open the theme in the Theme Composer by clicking fa-wrench Open Theme Composer.
    2. Click Clone.
    3. Fill out the metadata for the new theme, including Name, Resource Name, and its Active status.
    4. Click fa-check Save.

    After cloning the theme, click fa-pencil-square-o 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:

  1. Click the checkbox beside the theme on the theme list.
  2. Click fa-times-circle Flag Selected Rows for Deletion.
  3. Click fa-check 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 fa-plus-circle Add New Preferences. Select whether the override applies to a Salesforce profile or a specific end user, and then select the corresponding profile/user.

  • fa-pencil Edit Row: Used to edit an existing theme assignment override.
    • fa-picture-o Click to change Theme: Opens the theme picker
  • fa-times-circle Flag for Deletion: Flags a theme assignment override for deletion. An override is not deleted until it is saved by clicking fa-check Save.

Hierarchy of theme assignments [[]]

Theme assignments follow an established hierarchy, listed below by order of importance:

  1. Page-level: Set on the Skuid page’s properties in the Composer.
  2. User-level: Set under Theme > Theme Assignments > Profile/User overrides.
  3. Profile-level: Set under Theme > Theme Assignments > Profile/User overrides.
  4. 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.

  1. Navigate to Theme > Themes.
  2. Click fa-refresh Update out of Date Themes.
  3. Click fa-bullseye 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

  1. In the Skuid navigation bar, click Design Systems.

  2. Click the dots-vertical more options menu next to Create.

  3. 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.
  4. 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:

  • Run the Update out of Date Themes process.

  • If one particular theme is still having issues:

    1. Navigate to Themes.

    2. Click fa-wrench Open Theme Composer beside the problematic theme.

    3. Change a property in the Theme Composer to a different value.

      Note

      The property/value being changed does not matter.

    4. Undo that change, reverting the property back to its original value.

    5. 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” fa-exclamation-triangle 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.

  1. Select the action or button that is missing an icon.
  2. Click on the Icon button next to the Action Icon area.
  3. Choose an icon from the Standard icon set.
  4. 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.