styled-components-theme - Defines themes via flexible color selectors for use with styled-components

  •        15

styled-components-theme generates selectors for colors in your styled-components theme that allows color manipulation, using the color library via calls on the selectors themselves. A selector, in this context, is defined as a function that looks like (props) => props.theme.myColor that the styled-components library accepts as a template variable.

https://github.com/erikras/styled-components-theme

Dependencies:

color : ^1.0.3

Tags
Implementation
License
Platform

   




Related Projects

rebass - :atom_symbol: React UI component library & design system, built with styled-components and styled-system

  •    Javascript

React UI component library & design system, built with styled-system, with support for styled-components & emotion. Rebass is a library of highly-composable, primitive UI components for React, built with styled-components to keep styles isolated and reduce the need to write custom CSS in your application. Based upon a configurable design system, Rebass‘s props API makes building consistent, responsive web apps simpler and faster.

grid-styled - Responsive React grid system built with styled-system

  •    Javascript

The Box component handles width, margin and padding. All grid-styled components use styled-system for style props, which pick up values from a theme and allow for responsive styles to be passed as array values.

styled-theming - Create themes for your app using styled-components

  •    Javascript

<ThemeProvider> is part of styled-components, but is required for styled-theming. Most of your theming will be done with this function.

react-with-styles - Use CSS-in-JavaScript with themes for React without being tightly coupled to one implementation

  •    Javascript

Use CSS-in-JavaScript for your React components without being tightly coupled to one implementation (e.g. Aphrodite, Radium, or React Native). Easily access shared theme information (e.g. colors, fonts) when defining your styles.Create a module that exports an object with shared theme information like colors.

glamorous-native - React Native component styling solved💄

  •    Javascript

glamorous for React Native. React component styling solved with an elegant (inspired) API, small footprint, and great performance. For full feature documentation, see the glamorous docs. In React Native, we write styles within our JS, but you don't like having to create entire component functions just for styling purposes. You don't want to give a name to something that's purely style-related. And it's kind of annoying to do the StyleSheet.create, conditionals, and props-forwarding song and dance.


theme - Style your React Native components on one place

  •    Javascript

The React Native component's style is usually defined as a static variable along with the component itself. This makes it easy to build self contained components that always look and behave in the same way. On the other hand, it complicates building themeable (or skinnable) components that could have multiple styles that can be customized without touching the component source code. @shoutem/theme is built to address that problem. With themes, you can target specific components in your app and customize them through one file, just like you would do it with CSS on the web. All the documentation is available on the Developer portal.

oomox - Graphical application for generating different color variations of a Oomox (Numix-based), Materia and Arc themes (GTK2, GTK3), Gnome-Colors and Archdroid icons and terminal

  •    Python

Graphical application for generating different color variations of Oomox (Numix-based), Materia (ex-Flat-Plat) and Arc themes (GTK2, GTK3, Cinnamon, GNOME, Openbox, Xfwm), Gnome-Colors and Archdroid icon themes. Have a hack for HiDPI in gtk2. AUR helpers are not officialy supported, so you can also install it manually from either rolling-release or stable PKGBUILD.

styled-components - Visual primitives for the component age

  •    Javascript

If you are looking for styled-components v4.0 (under active development), check out the roadmap and dev branch. styled-components is compatible with both React (for web) and React Native – meaning it's the perfect choice even for truly universal apps! See the documentation about React Native for more information.

styled-tools - Useful interpolated functions for CSS-in-JS

  •    Javascript

Useful interpolated functions for styled-components 💅, emotion 👩‍🎤, JSS and other CSS-in-JS libraries. Same as prop, except that it returns props.theme[path] instead of props[path].

reactql - Universal React+GraphQL starter kit: React 16, Apollo 2, Webpack 4, Styled Components 4, React Router 4, PostCSS, SSR

  •    TypeScript

Universal front-end React + GraphQL starter kit, written in Typescript. Hot code reloading. Make a change anywhere in your code base (outside of the Webpack config), and changes will be pushed down the browser automatically - without page reloads. This happens for React, Styled Components, SASS - pretty much anything.

nord - An arctic, north-bluish color palette.

  •    CSS

An arctic, north-bluish color palette. Created for the clean- and minimal flat design pattern to achieve a optimal focus and readability for code syntax highlighting and UI. It consists of a total of sixteen, carefully selected, dimmed pastel colors for a eye-comfortable, but yet colorful ambiance.

sassy-starter - :tada: Sassy starter - HTML / SCSS (SMACSS)

  •    CSS

For theming: add separate file (theme.scss) insrc/scss/themes/, override the default $theme variable, and run gulp themes. Developed by @MinaMarkham. Please list all bugs and feature requests in the Github issue tracker.

polished - A lightweight toolset for writing styles in JavaScript ✨

  •    Javascript

When ✨ polished modules are imported properly, tree shaking in webpack and Rollup can be leveraged to reduce your bundle size. ✨ polished has first-class Flow support with zero configuration to assist you in finding type errors while using our modules.

awesome-styled-components - A curated list of awesome styled-components resources 💅

  •    

Please read the contribution guidelines before contributing. Contributions welcome and suggestions! Read the contribution guidelines first.

idea-one-dark-theme - One Dark theme for IntelliJ IDEA, PhpStorm, PyCharm, RubyMine, WebStorm

  •    Javascript

Go to File | Import Settings... and specify the idea-one-dark-theme directory or the settings.jar file. Click OK in the dialog that appears. Go to Preferences | Editor | Colors & Fonts and select one of the new color themes.

mustard-ui - A starter CSS framework that actually looks good.

  •    CSS

Mustard is a starter CSS framework that actually looks good. You can start configuring the colors to suit your needs by first changing the $brand-color variable located in src/scss/base/base.scss from $color-green-500 to $color-indigo-500 or any other color you'd like. There are lots of colors that can be found in the src/scss/vars/colors.scss file.

todc-bootstrap - Google-styled theme for Bootstrap.

  •    CSS

This is a Google-styled theme for Bootstrap. Because I'm a fan of the new Google UI seen in Gmail, Docs, Calendar, etc, I decided to reproduce the look of these new UI elements for my own personal use. The project's goal isn't UI parity with Google Apps -- it's feature parity with Bootstrap, themed with Google's UI in mind. TODC Bootstrap was created by Tim O'Donnell, and maintained with the support and involvement of the community.

Motif - Lightweight and customizable stylesheets for iOS

  •    Objective-C

You have an app. Maybe even a family of apps. You know about CSS, and how it enables web developers to write a set of declarative classes to style elements throughout their site, creating composable interface definitions that are entirely divorced from page content. You'll admit that you're a little jealous that things aren't quite the same on iOS. To style your app today, maybe you have a MyAppStyle singleton that vends styled interface components that's a dependency of nearly every view controller in your app. Maybe you use Apple's UIAppearance APIs, but you're limited to a frustratingly small subset of the appearance APIs. Maybe you've started to subclass some UIKit classes just to set a few defaults to create some styled components. You know this sucks, but there just isn't a better way to do things in iOS.

react-styled-flexboxgrid - Grid system based on styled-components and flexbox for React

  •    Javascript

Set of React components that implement flexboxgrid.css but with styled-components. Furthermore, it allows to customize grid configuration like gutter width... Highly inspired by the excellent react-flexbox-grid which the API is nearly the same than this module.