https://github.com/guptasiddhant/theme-manager-js

Apply and manage theme easily with this light-weight JavaScript library.
https://github.com/guptasiddhant/theme-manager-js

dark-mode javascript theme typescript

Last synced: about 2 months ago
JSON representation

Apply and manage theme easily with this light-weight JavaScript library.

• Host: GitHub
• URL: https://github.com/guptasiddhant/theme-manager-js
• Owner: GuptaSiddhant
• Created: 2020-03-13T07:27:03.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-03-04T06:31:26.000Z (almost 2 years ago)
• Last Synced: 2024-11-08T08:27:08.120Z (3 months ago)
• Topics: dark-mode, javascript, theme, typescript
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/@guptasiddhant/theme-manager-js
• Size: 154 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# Theme Manager JS

Apply and manage theme easily with this light-weight JavaScript library. (TypeScript Supported)

It exports a function `setTheme` and an object `Theme`.

## Theme

It is an object which contains methods to access the right theme variable. It can be used throughout the app. But to see any effect, `setTheme` fucnction must be called.

### Methods

Methods may require additional parameters to return correct value. Params ending with `?` are optional.

    // Radius

    // type? : "xl" | "lg" | "md" | "sm" | "xs" | "none

    Theme.radius(type?)

    // Scacing

    // type? : "xl" | "lg" | "md" | "sm" | "xs" | "none

    Theme.spacing(type?)

    // zIndex

    // type? : "hide" | "menu" | "base" | "docked" | "sticky" | "banner" | "overlay" | "modal" | "popover" | "skipLink" | "toast" | "contextMenu" | "tooltip"

    Theme.zIndex(type?);

    // Shadows

    // type?: "default" | "large" | "hover" | "active" | "outline" | "inner"

    Theme.shadow(type?);

    // Colors

    // type?: "inverse" | "primary" | "secondary" | "disabled"

    Theme.colorText(type?); 

    // type?: "inverse" | "base" | "overlay" | "hover" | "disabled" | "elevated" | "selected" | "rowAlt"

    Theme.colorBackground(type?);

    // type?: "border" | "borderHover" | "borderActive" | "shadow" | "shadowHover" | "shadowActive"

    Theme.colorOutline(type?);

    // type: "accent" | "red" | "orange" | "yellow" | "green" | "blue" | "purple" | "black" | "white" | "danger" | "warning" | "success" | "info" | "inverse"

    // opacity?: 0-100

    Theme.colorTint(type, opacity?)

## setTheme

Function to set or update theme. The function wirtes global/root CSS which then can be accessed by any component.

Call this function atleast once to initialise the theme. Call it again to update theme.

### example

    setTheme(YourTheme); // Only theme

    setTheme(YourTheme, true); // Theme with Dark Mode enabled

    setTheme(YourTheme, , "a { color: white; }"); // Theme in loght mode with global CSS

#### Sample Theme

    import { ThemeObject } from "./typeDefinitions";

    export const SampleTheme: ThemeObject = {

    lightColors: {

        text: {

        primary: "#000000",

        secondary: "#4d4d4d",

        disabled: "#8E8E93",

        inverse: "#f2f2f2"

        },

        background: {

        elevated: "#FFFFFF",

        base: "#FAFAFF",

        disabled: "#F2F2F7",

        overlay: "rgba(0,0,0,0.25)",

        selected: "rgba(0,0,0,0.1)",

        hover: "rgba(0,0,0,0.05)",

        rowAlt: "rgba(0,0,0,0.025)",

        inverse: "#000000"

        },

        outline: {

        shadow: "#E1E1E6",

        shadowHover: "rgba(0,0,0,0.5)",

        shadowActive: "rgba(351,100,68,0.2)",

        border: "#CECED9",

        borderHover: "#CECED9",

        borderActive: "#CECED9"

        },

        tint: {

        accent: "#AE001A",

        red: "#FF3B30",

        orange: "#FF9500",

        yellow: "#FFCC00",

        green: "#2EB24F",

        blue: "#007AFF",

        purple: "#AF52DE",

        black: "#000000",

        white: "#FFFFFF"

        }

    },

    darkColors: {

        text: {

        primary: "#FFFFFF",

        secondary: "#C6C6C8",

        disabled: "#8E8E93",

        inverse: "#202020"

        },

        background: {

        base: "#1C1C1E",

        elevated: "#333333",

        overlay: "rgba(0,0,0,0.5)",

        selected: "rgba(255,255,255,0.2)",

        disabled: "#111111",

        hover: "rgba(255,255,255,0.1)",

        rowAlt: "rgba(255,255,255,0.05)",

        inverse: "#FFFFFF"

        },

        outline: {

        shadow: "#18181A",

        shadowHover: "rgba(255,255,255,0.5)",

        shadowActive: "rgba(351,100,68,0.2)",

        border: "#4D4D4D",

        borderHover: "#4D4D4D",

        borderActive: "#4D4D4D"

        },

        tint: {

        accent: "#AE001A",

        red: "#FF453A",

        orange: "#FF9F0A",

        yellow: "#FFD60A",

        green: "#32D74B",

        blue: "#0A84FF",

        purple: "#BF5AF2",

        black: "#000000",

        white: "#FFFFFF"

        }

    },

    baseRadius: 8,

    baseSpacing: 8,

    sizeMultiplier: {

        xs: 0.25,

        sm: 0.5,

        md: 1,

        lg: 1.5,

        xl: 2

    },

    code: {

        fontConfig: {

        google: {

            families: ["Fira Code"]

        }

        },

        style: {

        fontSize: "14px",

        fontWeight: "normal",

        lineHeight: "20px",

        letterSpacing: 0,

        textTransform: "none"

        }

    },

    text: {

        fontConfig: {

        google: {

            families: ["Muli"]

        }

        },

        h1: {

        fontSize: "26px",

        fontWeight: 800,

        lineHeight: "36px",

        letterSpacing: 0,

        textTransform: "capitalize"

        },

        h2: {

        fontSize: "22px",

        fontWeight: 700,

        lineHeight: "32px",

        letterSpacing: 0,

        textTransform: "none"

        },

        h3: {

        fontSize: "18px",

        fontWeight: 700,

        lineHeight: "24px",

        letterSpacing: 0,

        textTransform: "none"

        },

        h4: {

        fontSize: "16px",

        fontWeight: 400,

        lineHeight: "22px",

        letterSpacing: 0,

        textTransform: "none"

        },

        h5: {

        fontSize: "14px",

        fontWeight: 700,

        lineHeight: "20px",

        letterSpacing: "0.5px",

        textTransform: "none"

        },

        h6: {

        fontSize: "12px",

        fontWeight: 700,

        lineHeight: "16px",

        letterSpacing: "0.25px",

        textTransform: "none"

        },

        strong: {

        fontSize: "12px",

        fontWeight: 900,

        lineHeight: "16px",

        letterSpacing: "1px",

        textTransform: "uppercase"

        },

        p: {

        fontSize: "14px",

        fontWeight: 400,

        lineHeight: "20px",

        letterSpacing: 0,

        textTransform: "none"

        },

        small: {

        fontSize: "12px",

        fontWeight: 400,

        lineHeight: "16px",

        letterSpacing: 0,

        textTransform: "none"

        }

    }

    };