Arx is a complete dual-theme CSS framework and a 24-plugin jQuery 4 layer. Drop in one stylesheet, add one script, and ship a polished, themeable interface — no build chain, no five-library stack.
Everything a modern interface needs — styled, accessible, themeable — without assembling a toolchain first.
arx-dark and the entire UI flips. Every colour, radius, and shadow is a CSS custom property, so themes are real — not a separate stylesheet.--arx-* tokens — or drop in a theme file — and the whole framework restyles instantly. Design a palette live in the Playground and export it.data-* attributes. No init boilerplate.Because every component reads its colours from CSS variables, a single override file re-skins everything — light, dark, or your brand. No recompile, no specificity wars.
:root {
--arx-primary: #7c5cff;
--arx-radius: 0.75rem;
--arx-font: "Geist", system-ui;
}
.arx-dark {
--arx-bg: #0a0a12;
--arx-primary: #a78bfa;
}A taste below — all live, all themeable. Browse the full set in the examples.
Link the stylesheet, add jQuery 4 and the bundle for interactivity, and start writing Arx classes. That's the whole setup.
<link rel="stylesheet" href="https://library.darkvision.dev/css/arx.min.css">
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://library.darkvision.dev/css/arx.min.css">
</head>
<body>
<button class="arx-btn arx-btn-primary">Hello Arx</button>
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script src="https://library.darkvision.dev/js/arx.min.js"></script>
</body>
</html>Free, MIT-licensed, and ready to drop in. One stylesheet away from a polished, themeable front-end.