{"id":24647135,"url":"https://github.com/opium-pro/themeor","last_synced_at":"2025-05-12T23:09:35.465Z","repository":{"id":46629626,"uuid":"272827133","full_name":"opium-pro/themeor","owner":"opium-pro","description":"Create sophisticated themes in React JS Fast. Without even knowing CSS","archived":false,"fork":false,"pushed_at":"2022-09-26T01:03:59.000Z","size":4538,"stargazers_count":4,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-12T23:09:27.566Z","etag":null,"topics":["css","no-css","no-css-framework","react","theme","theming"],"latest_commit_sha":null,"homepage":"","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/opium-pro.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}},"created_at":"2020-06-16T22:45:33.000Z","updated_at":"2021-10-09T22:45:54.000Z","dependencies_parsed_at":"2023-01-18T19:15:42.467Z","dependency_job_id":null,"html_url":"https://github.com/opium-pro/themeor","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opium-pro%2Fthemeor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opium-pro%2Fthemeor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opium-pro%2Fthemeor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opium-pro%2Fthemeor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/opium-pro","download_url":"https://codeload.github.com/opium-pro/themeor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253837443,"owners_count":21971984,"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":["css","no-css","no-css-framework","react","theme","theming"],"created_at":"2025-01-25T15:15:09.559Z","updated_at":"2025-05-12T23:09:35.444Z","avatar_url":"https://github.com/opium-pro.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Create sophisticated themes in React JS. Fast. Without even knowing CSS\n\n## Version #2 main changes:\n1. Fully custom config. Not necessary to use 'md', 'sm', 'lg', 'faint', 'base' etc as variable names any more. You can add your own name in config file and use it.\n\n2. Almost completely removed usage of css files. Now styles are being attached directly to header.\n\n3. Get rid of CSS variables. Now we use variables directly from JS.\n\n## [Documentation and demo](http://themeor.opium.pro/)\n\n## Documentation is in progress.\nSorry for the lack of documentation, it's in progress.\nBut all the components are ready to use.\nFeel free to ask any questions [dev@opium.pro](mailto:dev@opium.pro)\n\n---\n\n`npm i themeor`\n\nHere you can find a description of color concept: [Standardization of color schemes through the eyes of a programmer](https://medium.com/@opium.pro/standardisation-of-color-schemes-through-the-eyes-of-a-programmer-53cc25148470) But this concept is not obligatory to use, you can set your own colors in `config.customVariables`\n\nFor fast start download [the demo config file](https://github.com/opium-pro/themeor/blob/master/src/docs/theme/theme-light.json)\n\nAnd optionally [the dark theme file](https://github.com/opium-pro/themeor/blob/master/src/docs/theme/theme-dark.json)\n\n---\n\nHere is how you can use it:\n\n```javascript\nimport React from 'react'\nimport theme from './theme-light.json' // here is your config file\nimport darkTheme from './theme-dark.json' // if you set 'darkConfig' prop, dark theme on user's computer will be detected automatically\nimport {Theme, Box, Font, Line, Fit, Align, Gap} from 'themeor'\n\nexport default function App() {\n  return (\n    \u003cTheme config={theme} darkConfig={darkTheme} reset\u003e\n      \u003cFont size=\"xl\" weight=\"700\"\u003eImagine that I am your app\u003c/Font\u003e\n\n      \u003cGap /\u003e\n      \u003cLine fill=\"faint\" /\u003e\n      \u003cGap /\u003e\n\n      \u003cAlign row gapHor=\"md\" vert=\"center\"\u003e\n        \u003cBox fill=\"accent\" strong\u003e\n          \u003cGap vert=\"sm\" hor=\"x2l\"\u003e\n            \u003cFont size=\"sm\" weight=\"700\" uppercase\u003eText #1\u003c/Font\u003e\n          \u003c/Gap\u003e\n        \u003c/Box\u003e\n\n        \u003cLine.TryTagless fill=\"critic\"\u003e\n          \u003cBox fill=\"critic\" radius=\"max\"\u003e\n            \u003cGap\u003e\n              \u003cFont fill=\"critic\"\u003eText #2\u003c/Font\u003e\n            \u003c/Gap\u003e\n          \u003c/Box\u003e\n        \u003c/Line.TryTagless\u003e\n\n        \u003cBox fill=\"base\" strong radius=\"md\"\u003e\n          \u003cFit width=\"300px\"\u003e\n            \u003cGap size=\"sm\"\u003e\n              \u003cFont underline align=\"center\"\u003eText #3\u003c/Font\u003e\n            \u003c/Gap\u003e\n          \u003c/Fit\u003e\n        \u003c/Box\u003e\n      \u003c/Align\u003e\n    \u003c/Theme\u003e\n  )\n}\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopium-pro%2Fthemeor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fopium-pro%2Fthemeor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopium-pro%2Fthemeor/lists"}