Basic Installation:​

  1. Download your style here (you may need to activate your license first)
  2. Go to your control panel, Appearance -> Styles -> Import, import the style zip you just downloaded
  3. Now click the + Add style button and fill in as follows:
    1. Title: Name Your Style
    2. Description: Give a brief description of the style (optional)
    3. Important! Parent style: Set the style you imported in step 3 as the parent style
    4. You can set the style to the default forum style by choosing the radio button (highlighted in red below)
      install-screen.png

Dark Mode​

With most of our styles, we include a dark variation built right in. Thanks to XenForo 2.3's variation system, dark mode no longer requires a separate child style.

Once you've completed the installation steps above, your members should see a variation chooser in the footer allowing them to switch between light and dark. If you don't see the variation chooser, navigate to Appearance → Styles, edit your style, and ensure Enable variations is checked.
1773338358746.png


For an even better experience, we include a style variation dropdown right in the header. To enable it, go to Style properties → Header and navigation → Style variation dropdown in header.


When customizing, place your edits directly in the style as you normally would. Color-specific adjustments for dark mode can be made through the variation's style properties.

Setting the Default Light/Dark display

By default, XenForo sets the variation choice to "System" for all users and guests. This means visitors will see whichever color scheme their device prefers. For example, if a user is on their computer with light mode enabled, they'll see light mode. If they switch to their phone and it has dark mode enabled, they'll see dark mode on that device. Logged in users can override this by choosing System, Light, or Dark in their preferences to lock in a specific mode across all devices.

If you want to force a specific default for guests (for example, always showing dark mode), you'll need an add-on. We recommend the free Style Variation Default add-on, which allows admins to define the default as Light, Dark, or System, and can also update the preference for existing users.

Using child styles

For many of our styles, we offer optional "child styles" which are included for free in your purchase. You can find those child styles in your download area. To use a child style, simply skip step 3 above and import the child style under your parent style. For example, our Nova style comes with a child style called "Gamer Time". The setup would look like this after a successful installation:
V58oHjw.png

You can edit the "Gamer Time" child style directly with all of your edits.


Few key points:​

  • Do not make edits inside the main parent style (the one that says (Parent DO NOT EDIT)
  • Any edits you want to make should go inside your child style, in the above example "My Style"
  • You will lose all customizations on upgrade if you customize the style that says (Parent DO NOT EDIT)
Back