# openstyles/stylus

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/openstyles-stylus).**

6,710 stars · 368 forks · JavaScript · GPL-3.0

## Links

- GitHub: https://github.com/openstyles/stylus
- Homepage: https://add0n.com/stylus.html
- awesome-repositories: https://awesome-repositories.com/repository/openstyles-stylus.md

## Topics

`chrome-extension` `firefox-extension` `opera-addon` `privacy` `stylish` `usercss` `userstyles`

## Description

Stylus is a browser extension for installing, managing, and editing user-created CSS themes that customize the appearance of websites. It provides a central interface for organizing, enabling, disabling, and removing installed styles, and includes a built-in CSS editor with syntax highlighting and linting support.

The extension supports the UserCSS format, allowing users to install themes from `.user.css` files or URLs, and generates a basic UserCSS template with required metadata fields when creating new styles. Stylus can watch local `.user.css` files for changes and automatically apply edits to matching web pages without manual refresh, and it checks for and applies updates to installed styles using configurable per-style and global update settings.

Stylus enables users to customize style properties at install time through a dynamic dialog generated from `@var` definitions, and provides backup and restoration of style collections as JSON files compatible with other userstyle managers. The extension also supports cross-device synchronization of installed styles through cloud storage services like Dropbox, Google Drive, or WebDAV.

## Tags

### Content Management & Publishing

- [Userstyle Personalization](https://awesome-repositories.com/f/content-management-publishing/website-themes/userstyle-personalization.md) — A browser extension for installing, managing, and editing user-created CSS themes that restyle websites.
- [UserCSS](https://awesome-repositories.com/f/content-management-publishing/content-management-systems/content-architecture-modeling/documentation-standards/metadata-parsers/usercss.md) — Extracts and validates structured metadata from CSS comments to enable variable configuration and update checks.

### System Administration & Monitoring

- [Userstyle Managers](https://awesome-repositories.com/f/system-administration-monitoring/installer-managers/userstyle-managers.md) — Organizes, enables, disables, and removes installed CSS themes through a central management interface. ([source](https://github.com/openstyles/stylus/wiki))

### Development Tools & Productivity

- [Browser](https://awesome-repositories.com/f/development-tools-productivity/terminal-shell-cli/cli-tooling-frameworks/cli-tooling/distribution-extensibility/cli-installation-managers/theme-installers/browser.md) — Installs and applies user-created CSS themes from supported repositories to restyle any website. ([source](https://cdn.jsdelivr.net/gh/openstyles/stylus@master/README.md))
- [UserCSS](https://awesome-repositories.com/f/development-tools-productivity/terminal-shell-cli/cli-tooling-frameworks/cli-tooling/distribution-extensibility/cli-installation-managers/theme-installers/usercss.md) — Detects .user.css files and presents an install button to add UserCSS themes to the extension.
- [CSS File Watchers](https://awesome-repositories.com/f/development-tools-productivity/live-style-editing-tools/css-file-watchers.md) — Monitors CSS file changes and reapplies styles instantly without restarting the app, enabling live editing.
- [CSS Live Reload Watchers](https://awesome-repositories.com/f/development-tools-productivity/workflow-automation-tools/development-automation/development-rebuild-triggers/source-file-watching/live-reload-development-servers/css-live-reload-watchers.md) — Watches local .user.css files and applies edits to matching pages without manual refresh.

### User Interface & Experience

- [CSS Theme Authoring](https://awesome-repositories.com/f/user-interface-experience/appearance-customizations/css-theme-authoring.md) — Provides a built-in CSS editor with syntax highlighting and linting for authoring complete website themes.
- [Style Injections](https://awesome-repositories.com/f/user-interface-experience/css-styling/style-injections.md) — Injects user-authored CSS into web pages by intercepting and modifying the browser's style resolution pipeline.
- [CSS Theme Editors](https://awesome-repositories.com/f/user-interface-experience/markdown-and-syntax-highlighting/syntax-highlighting-editors/css-theme-editors.md) — Provides a built-in CSS editor with syntax highlighting, linting support, and live reload for external editors. ([source](https://cdn.jsdelivr.net/gh/openstyles/stylus@master/README.md))
- [Style Editors](https://awesome-repositories.com/f/user-interface-experience/visual-style-customization/style-editors.md) — Allows creating and editing custom CSS rules for specific sites using a built-in editor with syntax highlighting. ([source](https://github.com/openstyles/stylus/wiki))
- [UserCSS Variable Dialogs](https://awesome-repositories.com/f/user-interface-experience/modal-dialogs/alert-dialogs/form-dialogs/usercss-variable-dialogs.md) — Generates a dynamic form from @var definitions to let users customize style properties at install time.
- [UserCSS Variable Configurations](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/typography-and-iconography/typography/variable-font-controls/usercss-variable-configurations.md) — Displays a dialog with input controls for each @var definition to customize colors, fonts, and other style properties. ([source](https://github.com/openstyles/stylus/wiki/Writing-UserCSS))

### Business & Productivity Software

- [Userstyle Auto-Updaters](https://awesome-repositories.com/f/business-productivity-software/automatic-software-updates/plugin-auto-updaters/userstyle-auto-updaters.md) — Checks for and applies updates to installed CSS themes using configurable per-style and global update settings. ([source](https://cdn.jsdelivr.net/gh/openstyles/stylus@master/README.md))

### Mobile Development

- [Userstyle Version Updaters](https://awesome-repositories.com/f/mobile-development/distribution-updates/over-the-air-updates/version-comparison-updates/userstyle-version-updaters.md) — Checks the installation source or @updateURL for a newer version and reinstalls the style when an update is available. ([source](https://github.com/openstyles/stylus/wiki/Writing-UserCSS))

### Software Engineering & Architecture

- [Live Reloading](https://awesome-repositories.com/f/software-engineering-architecture/reactive-change-detection/live-reloading.md) — Watches a local .user.css file for changes and automatically applies edits to matching web pages. ([source](https://github.com/openstyles/stylus/wiki/Writing-UserCSS))
