explaingit

kognise/water.css

★ 8,626CSSAudience · developerComplexity · 1/5LicenseSetup · easy

TLDR

Water.css is a tiny stylesheet you add to any HTML page in one line to make it look clean and readable instantly, with no class names or configuration needed. It supports automatic light and dark mode based on the user's device settings.

Mindmap

mindmap
  root((repo))
    What it does
      Styles bare HTML instantly
      No class names needed
    Color modes
      Light mode
      Dark mode
      Auto detect system
    How to use
      One CDN link
      CSS variable overrides
      Custom build from source
    Styled elements
      Headings and text
      Buttons and forms
      Tables and code
    Design goals
      Tiny file size
      Broad browser support
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Add one line to your HTML head to give any bare webpage clean typography and styled buttons and forms without writing any CSS

USE CASE 2

Ship a quick demo, documentation page, or internal tool that looks presentable without involving a designer

USE CASE 3

Override individual colors using CSS variables in your own stylesheet to match your brand without modifying Water.css itself

Tech stack

CSS

Getting it running

Difficulty · easy Time to first run · 5min
Licensed under MIT, use it for any purpose including commercial with no restrictions beyond keeping the copyright notice.

In plain English

Water.css is a tiny CSS file you can add to any webpage to instantly improve how it looks, without touching a single HTML element or writing any custom styles. The project was created for developers who need to build a quick demo page or simple website and want it to look presentable without investing time in visual design. The way it works is simple: you add one line to the head of your HTML file, pointing to the Water.css stylesheet hosted on a content delivery network. From that point on, the page's default headings, paragraphs, buttons, forms, tables, links, and code blocks all get cleaner and more readable styling applied automatically. No class names to add, no configuration required. Water.css ships in three versions. The automatic version detects whether your device is set to light or dark mode and switches accordingly. The light and dark versions are fixed and stay the same regardless of device settings. Each version is available in a compressed form for production use and an uncompressed form that is easier to read during development. The stylesheet is built using CSS variables, sometimes called custom properties. This means you can override individual colors or spacing values by adding your own stylesheet after Water.css in the HTML. If you want a different link color or a custom background, you set the relevant variable in your own style block and it takes effect without modifying Water.css itself. For older browsers that do not support CSS variables, there is a compile-your-own-theme path that involves cloning the repository, editing source files, and rebuilding the output files with a provided build command. The project is small in file size by design. It targets broad browser support, including older devices, and most basic HTML elements are styled without any extra work from the developer. It is open source under the MIT license and welcomes contributions.

Copy-paste prompts

Prompt 1
Add Water.css to my plain HTML project and override just the link color and background color using CSS variables without editing the Water.css file
Prompt 2
Show me how to use the Water.css automatic dark and light mode build and how to test both modes locally in my browser
Prompt 3
Clone the water.css repo, change the primary accent color in the source variables, rebuild the stylesheet, and use the custom build in my project
Open on GitHub → Explain another repo

← kognise on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.