{"id":24839404,"url":"https://github.com/Devlander-Software/styled-components-theme","last_synced_at":"2025-10-14T13:30:45.561Z","repository":{"id":278430462,"uuid":"683104663","full_name":"Devlander-Software/styled-components-theme","owner":"Devlander-Software","description":null,"archived":false,"fork":false,"pushed_at":"2025-01-09T16:24:17.000Z","size":339471,"stargazers_count":1,"open_issues_count":3,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-22T02:22:43.539Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/Devlander-Software.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":null}},"created_at":"2023-08-25T15:57:47.000Z","updated_at":"2025-02-19T18:10:54.000Z","dependencies_parsed_at":null,"dependency_job_id":"4c56559e-f007-4305-8e14-b459b265f410","html_url":"https://github.com/Devlander-Software/styled-components-theme","commit_stats":null,"previous_names":["devlander-software/styled-components-theme"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Devlander-Software/styled-components-theme","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Devlander-Software%2Fstyled-components-theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Devlander-Software%2Fstyled-components-theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Devlander-Software%2Fstyled-components-theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Devlander-Software%2Fstyled-components-theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Devlander-Software","download_url":"https://codeload.github.com/Devlander-Software/styled-components-theme/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Devlander-Software%2Fstyled-components-theme/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279018715,"owners_count":26086609,"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-10-14T02:00:06.444Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","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":[],"created_at":"2025-01-31T06:43:03.780Z","updated_at":"2025-10-14T13:30:45.555Z","avatar_url":"https://github.com/Devlander-Software.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Devlander's Styled Components Theme\n\nDevlander's Styled Components Theme is a powerful and type-safe solution for managing themes in React and React Native projects. This package ensures consistency, type safety, and reusable utility colors, fonts, and styles, making it an essential tool for developers looking to create scalable and maintainable design systems.\n\n## Why Use Devlander's Styled Components Theme?\n\n### Key Benefits:\n- **Type Safety**: Enforce strict types for colors, fonts, and utilities to eliminate errors and improve maintainability.\n- **Reusable Utilities**: Simplify development with pre-defined utility functions for colors, responsive font sizes, and unit conversions.\n- **Cross-Platform Support**: Ensure seamless integration and consistent themes across React and React Native projects.\n- **Standardized Design Systems**: Avoid mixing themes and naming conventions by adhering to a unified structure.\n\nBy using this package, development teams can establish a single source of truth for themes, eliminating redundant setup and ensuring a cohesive design system.\n\n## Features\n- **Strict Type Definitions**: Prevent errors with type-safe themes for colors and fonts.\n- **Dynamic Theme Switching**: Easily toggle between light and dark themes.\n- **Pre-Defined Utility Colors**: Use reusable color utilities for consistent design across projects.\n- **Responsive Font Sizes**: Built-in tools for handling responsive typography.\n- **Cross-Platform Compatibility**: Works seamlessly with both React and React Native.\n\n## Installation\n\nAdd the package to your project using Yarn or npm:\n\n### Yarn\n```bash\nyarn add @devlander/styled-components-theme\n```\n\n### npm\n```bash\nnpm install @devlander/styled-components-theme\n```\n\n## Getting Started\n\n### 1. Initialize Your Theme\n\n#### React Example\n```typescript\nimport { createThemeForWeb } from \"@devlander/styled-components-theme\";\nimport { lightTheme } from \"./colors.util\";\nimport { fontOptions } from \"./fonts.util\";\n\nexport const theme = createThemeForWeb({\n  colorPreferences: lightTheme,\n  fontPreferences: fontOptions,\n});\n```\n\n#### React Native Example\n```typescript\nimport { createThemeForNative } from \"@devlander/styled-components-theme\";\nimport { lightTheme } from \"./colors.util\";\nimport { fontOptions } from \"./fonts.util\";\nimport { dimensionsModuleForNative } from \"@devlander/styled-components-theme\";\n\nexport const theme = createThemeForNative({\n  colorPreferences: lightTheme,\n  fontPreferences: fontOptions,\n  deviceOnTheme: {\n    platform: \"ios\",\n    isTablet: false,\n    hasNotch: false,\n    statusBarHeight: 15,\n    screenWidth: dimensionsModuleForNative().screenWidth,\n    screenHeight: dimensionsModuleForNative().screenHeight,\n  },\n});\n```\n\n### 2. Define Fonts and Colors\n\n#### Font Options Example\n```typescript\nimport type { FontsInterface } from \"@devlander/styled-components-theme\";\nimport { Platform } from \"react-native\";\n\nexport const fontOptions: Partial\u003cFontsInterface\u003e = {\n  Roboto: {\n    light: \"Roboto-Light\",\n    regular: \"Roboto-Regular\",\n    bold: \"Roboto-Bold\",\n    name: Platform.OS === \"web\" ? '\"Roboto\"' : \"Roboto\",\n  },\n  RobotoCondensed: {\n    light: \"RobotoCondensed-Light\",\n    regular: \"RobotoCondensed-Regular\",\n    bold: \"RobotoCondensed-Bold\",\n    name: Platform.OS === \"web\" ? '\"Roboto Condensed\"' : \"RobotoCondensed\",\n  },\n  Lora: {\n    light: \"Lora-Light\",\n    regular: \"Lora-Regular\",\n    bold: \"Lora-Bold\",\n    name: Platform.OS === \"web\" ? '\"Lora\"' : \"Lora\",\n  },\n};\n```\n\n#### Colors Example\n```typescript\nimport { ColorsInterface } from \"@devlander/styled-components-theme\";\n\nexport const lightTheme: ColorsInterface = {\n  background: \"#F9F9F9\",\n  primary: \"#4CAF50\",\n  secondary: \"#FF9800\",\n  text: \"#212121\",\n  dividerColor: \"#BDBDBD\",\n  error: \"#F44336\",\n  warning: \"#FFC107\",\n  success: \"#4CAF50\",\n  surface: \"#FFFFFF\",\n  cardBackground: \"#FAFAFA\",\n  accent: \"#3F51B5\",\n};\n\nexport const darkTheme: ColorsInterface = {\n  background: \"#121212\",\n  primary: \"#81C784\",\n  secondary: \"#FFB74D\",\n  text: \"#E0E0E0\",\n  dividerColor: \"#757575\",\n  error: \"#E57373\",\n  warning: \"#FFD54F\",\n  success: \"#66BB6A\",\n  surface: \"#1E1E1E\",\n  cardBackground: \"#2E2E2E\",\n  accent: \"#5C6BC0\",\n};\n```\n\n### 3. Create Styled Components\n\n#### BaseTextStyled Example\n```typescript\nimport styled from \"styled-components/native\";\nimport { Text } from \"react-native\";\nimport type { NativeTheme } from \"@devlander/styled-components-theme\";\n\nexport const BaseTextStyled = styled(Text)`\n  ${(props) =\u003e props.theme.textStyleGenerator(props)};\n  box-shadow: none;\n`;\n\nBaseTextStyled.defaultProps = {\n  theme: {\n    colors: darkTheme,\n  },\n};\n```\n\n#### PaddingContainerStyled Example\n```typescript\nimport styled from \"styled-components/native\";\nimport { View } from \"react-native\";\n\nexport const PaddingContainerStyled = styled(View)`\n  padding: 16px;\n  background-color: ${(props) =\u003e props.theme.colors.background};\n`;\n```\n\n### 4. Enable Dynamic Theme Switching\n\nToggle between light and dark themes:\n```typescript\nimport React, { useState, createContext, useContext, useMemo } from \"react\";\nimport { ThemeProvider } from \"styled-components/native\";\nimport { lightTheme, darkTheme } from \"./colors.util\";\n\nconst ThemeContext = createContext({\n  isDarkMode: false,\n  toggleTheme: () =\u003e {},\n});\n\nexport const ThemeProviderWithToggle: React.FC = ({ children }) =\u003e {\n  const [isDarkMode, setIsDarkMode] = useState(false);\n\n  const toggleTheme = () =\u003e setIsDarkMode((prev) =\u003e !prev);\n\n  const theme = useMemo(() =\u003e (isDarkMode ? darkTheme : lightTheme), [isDarkMode]);\n\n  return (\n    \u003cThemeContext.Provider value={{ isDarkMode, toggleTheme }}\u003e\n      \u003cThemeProvider theme={theme}\u003e{children}\u003c/ThemeProvider\u003e\n    \u003c/ThemeContext.Provider\u003e\n  );\n};\n\nexport const useThemeContext = () =\u003e useContext(ThemeContext);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDevlander-Software%2Fstyled-components-theme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FDevlander-Software%2Fstyled-components-theme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDevlander-Software%2Fstyled-components-theme/lists"}