PHPackages theme/cssvariables - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. theme/cssvariables ActiveNeos-package[Templating & Views](/categories/templating) theme/cssvariables ================== Provide an option to overwrite CSS Variables from within Neos 0.2.3(6y ago)0110[8 PRs](https://github.com/hphoeksma/theme.cssvariables/pulls)MITPHPCI passing Since Oct 17Pushed 4mo ago2 watchersCompare [ Source](https://github.com/hphoeksma/theme.cssvariables)[ Packagist](https://packagist.org/packages/theme/cssvariables)[ RSS](/packages/theme-cssvariables/feed)WikiDiscussions main Synced 2w ago READMEChangelogDependencies (3)Versions (15)Used By (0) Theme Css Variables =================== [](#theme-css-variables) ⚠️ This package is experimental! Use at your own risk! What is does... --------------- [](#what-is-does) This [Neos](https://neos.io) package provides a backend module giving users with access to the module to create a custom stylesheet with CSS custom properties (a.k.a. CSS-variables) based on the custom properties that are found in the Public folder of the site. The custom stylesheet is then loaded after the defined stylesheets via Fusion (so it is configurable if loading doesn't work out of the box). The result? A custom version of the website 😉. The application tries to make an educated guess on the type of variable (color, font, breakpoint). Each of those can be enabled via the `Settings.yaml`. (See below). [![](Resources/Private/Documentation/Images/Module.png)](Resources/Private/Documentation/Images/Module.png) ### What happens in the background? [](#what-happens-in-the-background) The module reads all CSS files and extracts all variables declared inside the `:root` selector. If multiple files are found (for example when using a bootstrap based theme) the array of variables get merged where the top level file is considered to be the most relevant one. When you change the values a new css file is being created and store inside the `Data/Persistent/Theme/CssVariables` folder. It is then symlinked inside the Public resources folder of the Theme.CssVariables package. It is loaded as well, if it exists, and is merged as last so the module shows the active settings for the variables. Optionally you can restore the defaults by removing the file. Installation ------------ [](#installation) Install by running: ``` composer require theme/cssvariables ``` Configuration ------------- [](#configuration) ### Settings [](#settings) SettingTypeDefault valueExplanationstylesheetName`string``custom.css`The name of the file to be generated.types`array``color`Supported are: `color`,`font`,`breakpoint`,`other`. Where `other` means every variable we could not sensibly map to one of the others.### Fusion [](#fusion) Default the newly created CSS-file is placed with `@position = 'after stylesheets'`. If your Neos Page setup is different, make sure the file is loaded after your Site's css files. ### Access to the module [](#access-to-the-module) Our default policy is set for `Neos Administrators` only. However feel free to copy-paste the contents to your site package Policy.yaml and change it to whatever role you deem necessary. Please be aware of one thing though: if more then one user can change the variables they need not be surprised when some of the other users might pick a color they think is 💩! FAQ --- [](#faq) ### My css doesn't use CSS custom properties, can I still use this package? [](#my-css-doesnt-use-css-custom-properties-can-i-still-use-this-package) Lot's of sites are build using SCSS and the Sass variables (i.e. `$primary-color`). When compiling the CSS the variable is substituted by it's value, and not like with the css custom properties as a reference. The result is hardcoded values and renders changing the CSS custom properties kinda useless... **But...** before we forget about the fun: there is an experimental feature that reads your compiled css file and looks for all values that could be substituted by a reference. You can try it out by running `./flow theme:replaceColorVariables`. As you guessed by the name, we currently only support substitution of variables that are considered to be color references. (Mainly for stability reasons). A backup of your original CSS file is created, so feel free to give it a try! ### Something is not working as expected, what should I do? [](#something-is-not-working-as-expected-what-should-i-do) If you run into any issues, feel free to create a pull request or raise an issue. Please be as specific as possible and then a litte more... 😉 ### Health Score 34 — LowBetter than 75% of packages Maintenance51 Moderate activity, may be stable Popularity10 Limited adoption so far Community10 Small or concentrated contributor base Maturity56 Maturing project, gaining track record Bus Factor1 Top contributor holds 76.6% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~20 days Total 4 Last Release 2386d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/0644de5e880c5b511c6b1cb1b08c80be5a64afd16d37dd9e633aa32c2d49f4cd?d=identicon)[hphoeksma](/maintainers/hphoeksma) --- Top Contributors [![hphoeksma](https://avatars.githubusercontent.com/u/250683?v=4)](https://github.com/hphoeksma "hphoeksma (36 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (11 commits)") --- Tags css-variablesneostheming ### Embed Badge ![Health badge](/badges/theme-cssvariables/health.svg) ``` [![Health](https://phpackages.com/badges/theme-cssvariables/health.svg)](https://phpackages.com/packages/theme-cssvariables) ``` ### Alternatives [laravel/framework The Laravel Framework. 34.8k543.8M19.5k](/packages/laravel-framework)[symfony/framework-bundle Provides a tight integration between Symfony components and the Symfony full-stack framework 3.6k246.0M11.2k](/packages/symfony-framework-bundle)[blade-ui-kit/blade-icons A package to easily make use of icons in your Laravel Blade views. 2.5k42.5M389](/packages/blade-ui-kit-blade-icons)[tightenco/jigsaw Simple static sites with Laravel's Blade. 2.3k449.3k30](/packages/tightenco-jigsaw)[api-platform/symfony Symfony API Platform integration 384.0M112](/packages/api-platform-symfony)[typo3/cms-fluid TYPO3 CMS Fluid Integration - Integration of the Fluid templating engine into TYPO3. 1912.6M596](/packages/typo3-cms-fluid) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)