{"id":16235952,"url":"https://github.com/lukethacoder/cytoscape-css-variables","last_synced_at":"2025-07-22T11:04:24.465Z","repository":{"id":37051852,"uuid":"299452403","full_name":"lukethacoder/cytoscape-css-variables","owner":"lukethacoder","description":"🎨 add CSS Variable functionality to cytoscape.js","archived":false,"fork":false,"pushed_at":"2025-07-12T09:55:21.000Z","size":892,"stargazers_count":6,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-12T11:49:28.359Z","etag":null,"topics":["css-variables","cytoscapejs","cytoscapejs-extension"],"latest_commit_sha":null,"homepage":"https://cytoscape-css-variables.lukesecomb.digital","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lukethacoder.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,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-09-28T23:10:47.000Z","updated_at":"2025-07-12T09:55:24.000Z","dependencies_parsed_at":"2023-02-18T22:00:41.954Z","dependency_job_id":"4135f2ea-4511-4adb-8914-e56efdf6fdb6","html_url":"https://github.com/lukethacoder/cytoscape-css-variables","commit_stats":{"total_commits":208,"total_committers":5,"mean_commits":41.6,"dds":0.4182692307692307,"last_synced_commit":"ac97d1e0b680d1526960a5af495c2353f497b97b"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/lukethacoder/cytoscape-css-variables","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukethacoder%2Fcytoscape-css-variables","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukethacoder%2Fcytoscape-css-variables/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukethacoder%2Fcytoscape-css-variables/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukethacoder%2Fcytoscape-css-variables/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lukethacoder","download_url":"https://codeload.github.com/lukethacoder/cytoscape-css-variables/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukethacoder%2Fcytoscape-css-variables/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266481732,"owners_count":23935938,"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","status":"online","status_checked_at":"2025-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["css-variables","cytoscapejs","cytoscapejs-extension"],"created_at":"2024-10-10T13:28:18.112Z","updated_at":"2025-07-22T11:04:24.448Z","avatar_url":"https://github.com/lukethacoder.png","language":"TypeScript","readme":"\u003ch1 align=\"center\"\u003e cytoscape-css-variables \u003c/h1\u003e\n\u003cbr\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://cytoscape-css-variables.netlify.app/\"\u003e\n    \u003cimg alt=\"cytoscape.js-css-variables\" title=\"cytoscape.js-css-variables\" src=\"./docs/logo.png\" width=\"450\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  Add CSS Variable functionality to Cytoscape graphs\n\u003c/p\u003e\n\n## 🎨 Example\n\n[![Example Link](./docs/example.jpg)](https://cytoscape-css-variables.netlify.app/)\n\n## 📦 Install\n\nDownload the library:\n * via npm: `npm install cytoscape-css-variables`,\n * via unpkg: `https://unpkg.com/cytoscape-css-variables/dist/cytoscape-css-variables.js`\n\nImport the library as appropriate for your project:\n\nES import:\n\n```js\nimport cytoscape from 'cytoscape';\nimport cssVars from 'cytoscape-css-variables';\n\ncytoscape.use( cssVars );\n```\n\nCommonJS require:\n\n```js\nlet cytoscape = require('cytoscape');\nlet cssVars = require('cytoscape-css-variables');\n\ncytoscape.use( cssVars ); // register extension\n```\n\nAMD:\n\n```js\nrequire(['cytoscape', 'cytoscape-css-variables'], function( cytoscape, cssVars ){\n  cssVars( cytoscape ); // register extension\n});\n```\n\nPlain HTML/JS has the extension registered for you automatically, because no `require()` is needed.\n\n\n## 🔥 API\n\n```javascript\n// core cytoscape instance\nlet cy\n\n// cssVars extension instance\nlet css_vars\n\n// Can't call css_vars before it is initiated, so declaring the function here\nconst getVar = (variable) =\u003e (css_vars ? css_vars.getVar(variable) : null)\n\ncy = cytoscape({\n  container: document.getElementById('cy'),\n  style: [\n    {\n      selector: 'node',\n      style: {\n        // Use getVar() with the css variable name to use it\n        // - this can be used for more than just colors\n        // - getVar() here is a local function, NOT the extension function\n        'background-color': () =\u003e getVar('--theme-primary'),\n      },\n    },\n  ],\n  // your array elements go here\n  elements: [],\n})\n\n// cssVars takes two (optional) values,\n// initialVars object and the domEl to assign the vars to/from\ncy.cssVars({\n  initialVars: {\n    '--theme-primary': 'rgb(245, 204, 0)',\n    '--theme-secondary': 'rgb(0, 8, 20)',\n    '--theme-tertiary': 'rgb(234,84,85)',\n    '--cy-node-size': 30,\n  },\n  domEl: document.body,\n})\n\n// no updates will be made until update() is called (even on init)\n// this allows you to bulk change css vars but only run one update\n// NOTE: this will need to be run after any set of set/get/remove functions\ncss_vars.update()\n\n// assigns a value to a variable\ncss_vars.setVar('--theme-primary', 'rgb(245, 204, 0)')\n\n// removes a variable and its value by the variable name\ncss_vars.removeVar()\n\n// returns an object of css variables and their values\n// will match the initialVars object to be passed in on init\ncss_vars.getVars()\n\n// bulk add variables\n// will match the initialVars object to be passed in on init\ncss_vars.addVars()\n\n// removes all variables and their values\ncss_vars.resetVars()\n\n// sets the current active DOM element\ncss_vars.setDomEl()\n\n```\n\n## 📢 Publishing\n\n\u003e Make sure you have [np](https://github.com/sindresorhus/np) installed\n\n1. Commit changes to Github\n2. Run `yarn publish`\n3. Profit 💰","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukethacoder%2Fcytoscape-css-variables","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flukethacoder%2Fcytoscape-css-variables","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukethacoder%2Fcytoscape-css-variables/lists"}