{"id":20513979,"url":"https://github.com/webreflection/css-proxied-vars","last_synced_at":"2026-03-11T12:49:22.131Z","repository":{"id":65993153,"uuid":"345104477","full_name":"WebReflection/css-proxied-vars","owner":"WebReflection","description":"The easiest way to set, read, or update, CSS variables per each element.","archived":false,"fork":false,"pushed_at":"2022-06-22T10:13:46.000Z","size":14,"stargazers_count":49,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-12-31T15:57:44.509Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/WebReflection.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2021-03-06T13:46:42.000Z","updated_at":"2024-12-16T13:53:02.000Z","dependencies_parsed_at":"2024-02-17T08:43:35.116Z","dependency_job_id":null,"html_url":"https://github.com/WebReflection/css-proxied-vars","commit_stats":{"total_commits":10,"total_committers":1,"mean_commits":10.0,"dds":0.0,"last_synced_commit":"8e23ab6f93f2d40a6a0908f3f86b4ee849b94746"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fcss-proxied-vars","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fcss-proxied-vars/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fcss-proxied-vars/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fcss-proxied-vars/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WebReflection","download_url":"https://codeload.github.com/WebReflection/css-proxied-vars/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":233824434,"owners_count":18736002,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-15T21:14:11.193Z","updated_at":"2026-03-11T12:49:22.124Z","avatar_url":"https://github.com/WebReflection.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# css-proxied-vars\n\n\u003csup\u003e**Social Media Photo by [Michael Dziedzic](https://unsplash.com/@lazycreekimages) on [Unsplash](https://unsplash.com/)**\u003c/sup\u003e\n\nThe easiest way to set, read, or update, CSS properties and variables per each element.\n\n**[Live Demo](https://codepen.io/WebReflection/pen/GRNXrEK?editors=0010)**\n\n```js\nimport proxiedVars from 'css-proxied-vars';\n\n// example =\u003e handle all :root CSS variables\nconst htmlStyle = proxiedVars(document.documentElement);\n\n// or pseudo\n// const pseudoStyle = proxiedVars(element, ':before');\n\n// set CSS properties explicitly\nhtmlStyle.color = 'blue';\n\n// get CSS properties explicitly (always computed)\nhtmlStyle.color; // rgb(0, 0, 255)\n\n// set CSS variables explicitly\nhtmlStyle['--bg-color'] = 'green';\n\n// get CSS variables explicitly (always computed)\nhtmlStyle['--bg-color']; // green\n\n// iterate as key/value pairs\nfor (const [key, value] of htmlStyle) {\n  console.log({ key, value });\n  // { key: 'color', value: 'rgb(0, 0, 255)' }\n  // { key: '--bg-color', value: 'green' }\n}\n\n// or apply a whole theme via import or literals\nObject.assign(htmlStyle, {\n  '--bg-color': 'red',\n  'color': 'gray',\n  '--other': 'value'\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebreflection%2Fcss-proxied-vars","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebreflection%2Fcss-proxied-vars","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebreflection%2Fcss-proxied-vars/lists"}