@front-app-react/theme NPM

React Themeing

This package is a powerful tool for designing and managing the style and language of react applications, which helps developers to easily and with minimal effort create custom designs and user interfaces.
Using this package, you will be able to easily manage different styles such as colors, fonts, sizes, color combinations and other appearance elements in your application.
support type ThemeDefault styled-components

Demo

demo for using demo-front-app-react

Installing

npm i @front-app-react/theme

Default configuration if fetch was not specified

First, create the following folders and files in the server asset path
For example, it is created in the path of public folders

public
- langs
  - {langName}.json
  - en-US.json
- theme
  - sizing.json
  - colors
    - {colorName}.json
    - light.json
src
package.json

The name of the langs, theme, colors folder and the sizing.json file should be the same
The extension of the data file must be json

If you use a special method to receive information, it is not necessary for the path of the files to be this way, but the file extension and name should be the same.

The Gist

They use React context to hook into the parent state/methods.

import { ThemeProvider } from "@front-app-react/theme";
    <ThemeProvider prefix="app" defaultLang="en-US" defaultColor="light">
        ...otherCode
    </ThemeProvider>

ThemeProvider Props

props	type	description
prefix	string	prefix for storage, default = app storage
defaultLang	`string` or `LangData`	`The name you chose for the language in the assets path` or `LangData has Similar to language json file`
defaultColor	`string` or `ColorData`	`The name you chose for the color in the assets path` or `ColorData has Similar to color json file`
defaultSizing	`SizingData`	`SizingData has Similar to sizing json file` = default undefined
storage	Storage	You can use browser memory type objects such as localstorage, sessionStorage, cookie and dedicated memory = default undefined
fetchLang	`((code:string)=> Promise<LangData>)`	`A method that takes the input of the name of the language data file and returns the language data as async`
fetchColor	`((code:string)=> Promise<ColorData>)`	`A method that takes the input of the name of the color data file and returns the color data as async`
fetchSizing	`(()=> Promise<SizingData>)`	`A method that gives SizingData without input and response in async`

LangData

Values for language data must follow this format

property	type	description
theme.dir*	"ltr" or "rtl"	Should be `rtl` or `ltr`
theme.locale*	string	The name you chose for the language in the assets path
theme.language*	string	anything
theme.langLabel*	string	anything
other key selector	string	Another value you want to use in the theme

ColorData

Values for color data must follow this format

property	type	description
name	string	The name you chose for the color in the assets path
data	{property : value}	List of colors

SizingData

Values for sizing data must follow this format

property	type	description
btn	{property : value}	List button element of sizes
input	{property : value}	List input element of sizes
property	value	Other sizes

hook context theme

You can use React Context hook to get theme values

import { useTheme } from "@front-app-react/theme";

  const { lang, style } = useTheme();

lang

property	type	description
dictionary	LangData	LangData has Similar to language json file
loading	boolean	Check the data received
onChange	(`code` or `LangData`)=> Promise	It can change the language with two input types - The name of the language file - Language data

style

property	type	description
color	ColorData	ColorData has Similar to color json file
sizing	SizingData	SizingData has Similar to sizing json file
loading	boolean	Check the two data received
loadingColor	boolean	Check the data color received
loadingSizing	boolean	Check the data sizing received
onChange	(`code` or `SizingData`)=> Promise	It can change the color with two input types - The name of the color file - color data
getColor	name,mood,opacity	Get color value from color name in 5 levels 0,1,2,3,4 and opacity

Type Color

property	value
name	string
opacity	between 0,1
mood	`-2`,`-1`,`0`,`1`,`2`

Type ThemeColor

property	value
variant *	Type Color
hover	Type Color
active	Type Color

Packages

List of packages used:

checkSizing - Getting the defined sizes of the theme
getColorWithKeyCss - Make css color style from the theme
colorHandler - Making theme coloring styles element

checkSizing

Description

Sizes such as padding and radius are defined in the @front-app-react/theme package.
We can create normal, small, and large sizes with the style name
Sample using in https://github.com/front-app-react/elements (coming)

Usage

dev

const Typography = styled("p")`
    color : ${themeProps=> themeProps.theme.style.getColor("red")};
    ${themeProps=> {
        return checkSizing({ keyCss : "font-size", props : themeProps,keyJson : "btn.font-size" }) + ";";
    }
`
export default ()=> {
    return (
        <Typography $sizing="lg">Hello world</Typography>
    )
}

result

const Typography = styled("p")`
    color : #E16262;
    ${themeProps=> {
        return "font-size : 1.25rem;";
    }
`

Argument 1

type object

property	description
keyCss	property css
props	theme props
keyJson	key reference sizing theme example sizing.json

Value

The output value is property: value in css

getColorWithKeyCss

Description

Make css color style from the theme

Usage

dev

const Button = styled("button")`
    ${themeProps=> {
        return getColorWithKeyCss({ name : "background-color",color : "red", props : themeProps }) + ";";
    }
`

result

const Button = styled("button")`
     color : #E16262;
    ${themeProps=> {
        return "color : #E16262;";
    }
`

Argument 1

type object

property	description
name	property css
color	theme color property name
props	theme props

Value

The output value is property: value in css

colorHandler

Description

Creates an element with color style, background color and border color with handle of mouse hover and active modes.
It is necessary to talk about the configuration color of the package @front-app-react/elements

Usage

dev

const Button = styled("button")`
    ${themeProps=> {
        return colorHandler(props, true) + ";";
    }
`
const ButtonWithoutStyleActions = styled("button")`
    ${themeProps=> {
        return colorHandler(props, false) + ";";
    }
`
export default ()=> {
    return (
        <Button $textColor={{
              variant: {
                name: "white",
              },
        }} $bgColor={{
              variant: {
                name: "primary",
              },
              active: {
                name: "red",
              },
        }} $borderColor={{
              variant: {
                name: "primary",
              },
        }}>Hello world</Button>
         <ButtonWithoutStyleActions $textColor={{
              variant: {
                name: "white",
              },
        }} $bgColor={{
              variant: {
                name: "primary",
              },
        }} $borderColor={{
              variant: {
                name: "primary",
              },
        }}>Hello world</Button>
    )
}

result

const Button = styled("button")`
    &:disabled{
         color: #5D5D5D;
        background-color: #f0f0f0;
        border-color: #f0f0f0;
  }

    &:not(:disabled) {
    color: rgb(255, 255, 255);
    background-color: rgb(58, 150, 121);
    border-color: rgb(58, 150, 121);
     &:hover {
        color: rgb(255, 255, 255);
        background-color: rgb(58, 150, 121);
        border-color: rgb(58, 150, 121);
    }
     &:active {
        color: rgb(255, 255, 255);
        background-color: rgb(225, 98, 98);
        border-color: rgb(225, 98, 98);
    }
    }
`
const ButtonWithoutStyleActions = styled("button")`
    &:not(:disabled) {
    color: rgb(255, 255, 255);
    background-color: rgb(58, 150, 121);
    border-color: transparent;
    }
`