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.codes/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.codes/highlightjs/furret.css" />
<script src="https://css.furret.codes/highlightjs/highlight.js"></script>
And the following to the end of your <body>
:
<script>hljs.highlightAll();</script>
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.codes/furretcss/js/theme-toggle.js"></script>
And the following to the end of your <body>
:
<script>furrets.addThemeToggle();</script>