Overview
Fluent-svelte-extra is a fork of fluent-svelte that is currently in active development. This variant offers additional components and features compared to the original library. One notable feature includes the ability to switch between dark and light themes, enhancing customization options for users.
Features
- Undocumented Components: Developers can access components that are not included in the official documentation.
- Switching between themes: Users can easily switch between dark and light themes by importing fluent-svelte-extra/switchable.css into their layout.svelte file and applying specific classes to the <html> tag in the app.html file.
- Enhanced Components: The library provides new components and enhancements beyond the original fluent-svelte offering.
Installation
To install fluent-svelte-extra and enable theme switching, follow these steps:
- Import fluent-svelte-extra/switchable.css in your layout.svelte file.
- Add fds-theme-dark or fds-theme-light classes to the <html> tag in your app.html file.
- Utilize fluent-svelte-extra/theme.css to use the system default theme, and apply fds-theme-dark or fds-theme-light classes as needed.
Summary
Fluent-svelte-extra offers a valuable extension to the fluent-svelte library by providing additional components and theme customization options. Developers can leverage this fork to access undocumented components, enhance their project’s design with themes, and benefit from ongoing development efforts. By following the installation guide, users can seamlessly integrate fluent-svelte-extra into their projects and enjoy its extended features.