A Collection Of CSS Styles To Make Your Site Nicer – furret.css

Preview:

Description:

The furret.css library provides a collection of preset CSS styles to make your websites prettier. Inspired by kognise’s Water.css library. No CSS classes and images required. Light and Dark modes are included.

How to use it:

1. Just add the following stylesheet to the webpage and the library will do the rest.

<!-- 🌙/☀ Automatic Theme: -->
<link rel="stylesheet" href="dist/library.min.css" />
<!-- 🌙 Dark Theme: -->
<link rel="stylesheet" href="dist/dark.min.css" />
<!-- ☀ Light Theme: -->
<link rel="stylesheet" href="dist/light.min.css" />

2. Override the default variables to create your own themes.

:root {
  --color-strong: #000000;
  --color-main: #434242;
  --color-dim: #737373;
  --accent-strong: #0676a2;
  --accent-main: #7ddaff;
  --accent-dim: #a8dff5;
  --highlight-color: rgba(125, 218, 255, 0.8);
  --selection-color: rgba(125, 218, 255, 0.2);
  --background-dark: #e3e3e3;
  --background-darker: #f3f3f3;
  --background-darkest: #ffffff;
}
@media (prefers-color-scheme: dark) {
:root {
  --color-strong: #ebebeb;
  --color-main: #e3dede;
  --color-dim: #a2a2a2;
  --accent-strong: #0676a2;
  --accent-main: #0f9ad2;
  --accent-dim: #a8dff5;
  --highlight-color: rgba(15, 154, 210, 0.8);
  --selection-color: rgba(15, 154, 210, 0.2);
  --background-dark: #212121;
  --background-darker: #121212;
  --background-darkest: #050505;
}

More Previews: