FusionAuth version 1.51.0 shipped in late May, 2024. This version includes our new visual, Simple Theme editor and a couple bug fixes.

Toucans are fun and unique and your themes should be too, so this release shall be the “Theming Toucan”.

FusionAuth 1.51: The Theming Toucan Release

Welcome to the FusionAuth 1.51 “Theming Toucan” release post! In this post, we’ll delve into the details of the newly introduced visual, Simple Theme editor that revolutionizes how you can customize your login forms. We’ll explore how this release simplifies the theming process, compare it to the Advanced way of theming, and provide you with a detailed walk through to help you get the most out of this powerful feature.

TL;DR - Just watch this video, since non-coders don’t really read docs anyways 😉.

Table of Contents

1. Introduction to FusionAuth
2. Overview of the Theming Toucan Release
3. The Advanced Way of Theming
4. The New Visual, No-Code Theme Editor
5. Comparing Advanced and Simple Theming
6. Conclusion

Introduction to FusionAuth

FusionAuth is a robust, developer-focused authentication, authorization, and user management platform designed to be seamlessly integrated into any application. Whether you’re building a new app from scratch or enhancing an existing system, FusionAuth offers a comprehensive suite of features to handle all aspects of user authentication and management.

Key features of FusionAuth include:

• Single Sign-On (SSO)
• Multi-Factor Authentication (MFA)
• User Registration and Login
• Role-Based Access Control (RBAC)
• Passwordless Login
• Social Login Integrations
• Extensive APIs for Custom Integrations

With the release of FusionAuth 1.51, the platform takes a significant leap forward by introducing a visual, Simple Theme editor, making it easier than ever to customize the look and feel of your authentication pages.

Overview of the Theming Toucan Release

The FusionAuth 1.51 release, dubbed the “Theming Toucan” release, marks a pivotal moment in the platform’s evolution. This update introduces a visual, Simple Theme editor designed to simplify the process of customizing your login forms and other authentication-related pages.

Key highlights of the Theming Toucan release include:

• Simple Theme Editor: A user-friendly interface that allows you to customize themes without writing a single line of code.
• Pre-Built Templates: Access to a variety of professionally designed templates to get you started quickly.
• Real-Time Preview: See your changes in real-time as you edit your themes.
• Customizable Styles: Fine-tune colors, fonts, and images to match your brand identity.
• Localization: Ensure your authentication pages are accessible to all users.

This release aims to empower developers and non-developers alike by providing an intuitive way to create beautiful, functional, and branded authentication experiences.

The Advanced Way of Theming using FusionAuth’s Advanced Theme

Before the introduction of the visual, Simple Theme editor, customizing the look and feel of your FusionAuth login forms required a more traditional approach. This involved editing HTML, CSS, and occasionally JavaScript directly. While our advanced themes are powerful, this method required a certain level of technical expertise and familiarity with web development. If you have not seen this check out our Themes Overview page to dive a little deeper.

You could use our Themes API, FusionAuth CLI, or by using the Admin UI like below.

Advanced Theming in FusionAuth involves the following key components:

• HTML Templates: The structure and layout of your authentication pages are defined using HTML templates.
• CSS Stylesheets: Custom CSS is used to style these pages according to your branding guidelines.
• JavaScript: Optional JavaScript can be included for additional interactivity and functionality.

The Advanced Theming process provides complete control over every aspect of your authentication pages, allowing for highly customized and complex designs. However, it can be time-consuming and challenging, especially for those without a web development background.

You can still edit the Advanced Theme editor from a dropdown within Home / Customizations / Themes like below.

The New Visual, No-Code Theme Editor

The Theming Toucan release (aka 1.51) introduces a game-changing feature: the visual, Simple Theme editor. This tool provides an intuitive interface that allows you to customize your authentication pages without writing any code. Let’s dive into the details of this powerful new feature.

Introduction to the No-Code Theme Editor

The Simple Theme editor is designed to make theming accessible to everyone, regardless of their technical expertise. With this editor, you can:

• Quickly customize the look and feel of your login forms.
• Use pre-built templates as a starting point.
• Make changes in real-time and see instant previews.
• Customize colors, fonts, and other styles with ease.

Features and Capabilities

The Simple Theme editor offers a wide range of features to help you create beautiful and functional authentication pages:

1. Real-Time Preview: See how your changes will look on the live site as you make them.
2. Pre-Built Templates: Start with professionally designed templates and customize them to fit your needs.
3. Style Customization: Adjust colors, fonts, backgrounds, and more to match your brand.
4. Element Properties: Fine-tune the properties of individual elements, such as buttons and input fields.

Step-by-Step Guide to Using the Theme Editor

Let’s walk through the process of creating a custom theme using the new visual, Simple Theme editor.

Step 1: Access the Theme Editor

1. Log in to your FusionAuth administrative dashboard.
2. Navigate to Home / Customizations / Themes
3. Click the Simple Theme button to open the theme editor.

Step 2: Choose a Template

1. In the theme editor, you’ll be presented with a selection of pre-built themes.
2. Browse through the themes and choose one that closely matches your desired layout.
3. Click on Advanced, Dark or Light to start customizing it.

Step 3: Customize the Images

1. In the right-hand panel, you’ll find options to add image paths.
2. You can add a Theme logo that will be displayed on top of the login form by adding the image URL.
3. Input a background image URL and the appropriate settings.

Step 4: Customize Styles

1. In the right-hand panel, you’ll find options to customize the overall styles of your theme.
2. Adjust the colors, fonts, and radius to match your brand’s identity.
3. Use the style customization options to fine-tune individual elements, such as input fields and buttons.

Step 6: Preview Your Changes

1. As you make changes, the real-time preview feature allows you to see how your modifications will look on the live site.
2. Switch between different views to ensure your theme looks great on all pages.

The example below I switched to the Magic Links Confirmation required page.

Step 7: Save and Publish

1. Once you’re satisfied with your custom theme, click the Save button to save your changes.
2. To activate the theme, navigate to the tenant you would like to use this theme on Home / Tenants / Edit / General . Then click on the select option Theme and select your newly created Simple Theme.

Congratulations! You’ve successfully created a custom theme using the visual, Simple Theme editor.

Comparing Advanced and Simple Theming

With the introduction of the Simple Theme editor, FusionAuth now offers two distinct approaches to theming: the Advanced method and the no-code method. Let’s compare these two approaches to help you decide which one is right for you.

Advanced Theming

Pros:

• Complete control over every aspect of your authentication pages.
• Ability to create highly customized and complex designs.
• Flexibility to use HTML, CSS, and JavaScript.

Cons:

• Requires technical expertise in web development.
• Time-consuming, especially for complex themes.
• Limited to those with coding skills.

Simple Theming

Pros:

• User-friendly interface accessible to everyone.
• Quick and easy customization with drag-and-drop functionality.
• Real-time previews to see changes instantly.
• No coding required.

Cons:

• Limited to the capabilities of the visual editor.
• May not offer the same level of customization as coding.

Ultimately, the choice between Advanced and no-code theming depends on your specific needs and technical proficiency. If you require complete control and have the necessary coding skills, the Advanced method may be the best choice. On the other hand, if you want a quick and easy way to customize your authentication pages without writing code, the Simple Theme editor is an excellent option.

Conclusion

The Theming Toucan release of FusionAuth 1.51 introduces a powerful new tool that revolutionizes the theming process: the visual, Simple Theme editor. This user-friendly interface makes it easier than ever to customize your authentication pages, enabling you to create beautiful, branded experiences without writing any code.

Whether you’re an experienced developer or a non-technical user, the Simple Theme editor provides the flexibility and efficiency you need to create professional-looking themes quickly and easily. With features like real-time previews and pre-built templates, the Simple Theme editor empowers you to deliver a seamless and enjoyable user experience.