Furret.css was built with beauty as a key point. As such, it comes with seperate light and dark themes, along with syntax highlighting and theme toggling!
To use the dark theme, change the light in the stylesheet url to dark, or add the following to the to the <head> of your HTML:
<link rel="stylesheet" href="https://css.furret.dev/furretcss/v2/full/dark.min.css" /> Furret.css does not include syntax highlighting out of the box, however it can be used with highlight.js and a custom stylesheet. To use the syntax highlighter, add the following to the <head> of your HTML:
<link rel="stylesheet" href="https://css.furret.dev/highlightjs/light.css" />
<script src="https://css.furret.dev/highlightjs/highlight.js"></script>And the following to the end of your <body>:
<script>hljs.highlightAll();</script> You can use the dark syntax highlighting theme by replacing light.css with dark.css.
In order to provide the best experience with for developers and users, furret.css defaults to a single theme and comes with Javascript that allows for a toggleable light and dark theme. This will respect user preferences and allows for persisted themes. To add toggleable theming, add the following script to the <head> of your HTML:
<script src="https://css.furret.dev/furretcss/js/theme-toggle.js"></script>And the following to the end of your <body>:
<script>furrets.addThemeToggle();</script>