https://github.com/fusionauth/fusionauth-example-themes
Example of custom themes for FusionAuth
https://github.com/fusionauth/fusionauth-example-themes
Last synced: 9 months ago
JSON representation
Example of custom themes for FusionAuth
- Host: GitHub
- URL: https://github.com/fusionauth/fusionauth-example-themes
- Owner: FusionAuth
- License: apache-2.0
- Created: 2022-09-02T17:32:10.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2025-02-14T14:53:47.000Z (over 1 year ago)
- Last Synced: 2025-10-14T16:09:53.447Z (9 months ago)
- Language: CSS
- Size: 221 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: change-bank/change-bank-example.png
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# FusionAuth Example Themes
This is a set of customizable FusionAuth themes. These should be production ready but are not future proofed. They should serve as a great foundation for you to customize the hosted login pages of the FusionAuth auth server.
## Installation
To install a sample theme:
* Install FusionAuth. (More here: https://fusionauth.io/docs/v1/tech/installation-guide/ )
* Log in to FusionAuth and copy the default theme. Name it something else, like 'My Theme'.
* Review the different sample themes contained in this repository.
* When you find one you like, copy the CSS from the CSS file into the **Stylesheet (CSS)** section of the 'My Theme'.
* Customize the sample theme as detailed below (optional).
* Save the theme.
* Enjoy your new look and feel.
## Customization
You can tweak the colors of this theme by editing the CSS file and modifying the CSS variables at the top:
```
:root {
--main-text-color: #424242;
--main-accent-color: #083b94;
--input-background: #fbfbfb;
--body-background: #f7f7f7;
--tooltip-background: #e2e2e2;
--error-color: #ff0000;
--error-background: #ffe8e8;
--border-color: #dddddd;
--logo-url: url(https://fusionauth.io/cdn/samplethemes/changebank/changebank.svg);
--font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
```
Of course, if needed, you have the full flexibility of FusionAuth themes as well. Learn more about that here: https://fusionauth.io/docs/v1/tech/themes/
## Eye Candy
Change Bank
