{"id":23099145,"url":"https://github.com/guptasiddhant/theme-manager-js","last_synced_at":"2025-05-05T17:56:11.845Z","repository":{"id":42919595,"uuid":"247011886","full_name":"GuptaSiddhant/theme-manager-js","owner":"GuptaSiddhant","description":"Apply and manage theme easily with this light-weight JavaScript library. ","archived":false,"fork":false,"pushed_at":"2023-03-04T06:31:26.000Z","size":158,"stargazers_count":3,"open_issues_count":6,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-21T07:42:31.351Z","etag":null,"topics":["dark-mode","javascript","theme","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@guptasiddhant/theme-manager-js","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GuptaSiddhant.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-13T07:27:03.000Z","updated_at":"2023-03-08T22:10:39.000Z","dependencies_parsed_at":"2023-02-04T00:01:43.516Z","dependency_job_id":null,"html_url":"https://github.com/GuptaSiddhant/theme-manager-js","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GuptaSiddhant%2Ftheme-manager-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GuptaSiddhant%2Ftheme-manager-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GuptaSiddhant%2Ftheme-manager-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GuptaSiddhant%2Ftheme-manager-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GuptaSiddhant","download_url":"https://codeload.github.com/GuptaSiddhant/theme-manager-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252546969,"owners_count":21765887,"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":["dark-mode","javascript","theme","typescript"],"created_at":"2024-12-16T23:18:23.519Z","updated_at":"2025-05-05T17:56:11.813Z","avatar_url":"https://github.com/GuptaSiddhant.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Theme Manager JS\n\nApply and manage theme easily with this light-weight JavaScript library. (TypeScript Supported)\n\nIt exports a function `setTheme` and an object `Theme`.\n\n## Theme\n\nIt 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.\n\n### Methods\n\nMethods may require additional parameters to return correct value. Params ending with `?` are optional.\n\n    // Radius\n    // type? : \"xl\" | \"lg\" | \"md\" | \"sm\" | \"xs\" | \"none\n    Theme.radius(type?)\n\n    // Scacing\n    // type? : \"xl\" | \"lg\" | \"md\" | \"sm\" | \"xs\" | \"none\n    Theme.spacing(type?)\n\n    // zIndex\n    // type? : \"hide\" | \"menu\" | \"base\" | \"docked\" | \"sticky\" | \"banner\" | \"overlay\" | \"modal\" | \"popover\" | \"skipLink\" | \"toast\" | \"contextMenu\" | \"tooltip\"\n    Theme.zIndex(type?);\n\n    // Shadows\n    // type?: \"default\" | \"large\" | \"hover\" | \"active\" | \"outline\" | \"inner\"\n    Theme.shadow(type?);\n\n    // Colors\n\n    // type?: \"inverse\" | \"primary\" | \"secondary\" | \"disabled\"\n    Theme.colorText(type?); \n\n    // type?: \"inverse\" | \"base\" | \"overlay\" | \"hover\" | \"disabled\" | \"elevated\" | \"selected\" | \"rowAlt\"\n    Theme.colorBackground(type?);\n\n    // type?: \"border\" | \"borderHover\" | \"borderActive\" | \"shadow\" | \"shadowHover\" | \"shadowActive\"\n    Theme.colorOutline(type?);\n\n    // type: \"accent\" | \"red\" | \"orange\" | \"yellow\" | \"green\" | \"blue\" | \"purple\" | \"black\" | \"white\" | \"danger\" | \"warning\" | \"success\" | \"info\" | \"inverse\"\n    // opacity?: 0-100\n    Theme.colorTint(type, opacity?)\n\n## setTheme\n\nFunction to set or update theme. The function wirtes global/root CSS which then can be accessed by any component.\n\nCall this function atleast once to initialise the theme. Call it again to update theme.\n\n### example\n\n    setTheme(YourTheme); // Only theme\n    setTheme(YourTheme, true); // Theme with Dark Mode enabled\n    setTheme(YourTheme, , \"a { color: white; }\"); // Theme in loght mode with global CSS\n\n#### Sample Theme\n\n    import { ThemeObject } from \"./typeDefinitions\";\n    export const SampleTheme: ThemeObject = {\n    lightColors: {\n        text: {\n        primary: \"#000000\",\n        secondary: \"#4d4d4d\",\n        disabled: \"#8E8E93\",\n        inverse: \"#f2f2f2\"\n        },\n        background: {\n        elevated: \"#FFFFFF\",\n        base: \"#FAFAFF\",\n        disabled: \"#F2F2F7\",\n        overlay: \"rgba(0,0,0,0.25)\",\n        selected: \"rgba(0,0,0,0.1)\",\n        hover: \"rgba(0,0,0,0.05)\",\n        rowAlt: \"rgba(0,0,0,0.025)\",\n        inverse: \"#000000\"\n        },\n        outline: {\n        shadow: \"#E1E1E6\",\n        shadowHover: \"rgba(0,0,0,0.5)\",\n        shadowActive: \"rgba(351,100,68,0.2)\",\n        border: \"#CECED9\",\n        borderHover: \"#CECED9\",\n        borderActive: \"#CECED9\"\n        },\n        tint: {\n        accent: \"#AE001A\",\n        red: \"#FF3B30\",\n        orange: \"#FF9500\",\n        yellow: \"#FFCC00\",\n        green: \"#2EB24F\",\n        blue: \"#007AFF\",\n        purple: \"#AF52DE\",\n        black: \"#000000\",\n        white: \"#FFFFFF\"\n        }\n    },\n    darkColors: {\n        text: {\n        primary: \"#FFFFFF\",\n        secondary: \"#C6C6C8\",\n        disabled: \"#8E8E93\",\n        inverse: \"#202020\"\n        },\n        background: {\n        base: \"#1C1C1E\",\n        elevated: \"#333333\",\n        overlay: \"rgba(0,0,0,0.5)\",\n        selected: \"rgba(255,255,255,0.2)\",\n        disabled: \"#111111\",\n        hover: \"rgba(255,255,255,0.1)\",\n        rowAlt: \"rgba(255,255,255,0.05)\",\n        inverse: \"#FFFFFF\"\n        },\n        outline: {\n        shadow: \"#18181A\",\n        shadowHover: \"rgba(255,255,255,0.5)\",\n        shadowActive: \"rgba(351,100,68,0.2)\",\n        border: \"#4D4D4D\",\n        borderHover: \"#4D4D4D\",\n        borderActive: \"#4D4D4D\"\n        },\n        tint: {\n        accent: \"#AE001A\",\n        red: \"#FF453A\",\n        orange: \"#FF9F0A\",\n        yellow: \"#FFD60A\",\n        green: \"#32D74B\",\n        blue: \"#0A84FF\",\n        purple: \"#BF5AF2\",\n        black: \"#000000\",\n        white: \"#FFFFFF\"\n        }\n    },\n    baseRadius: 8,\n    baseSpacing: 8,\n    sizeMultiplier: {\n        xs: 0.25,\n        sm: 0.5,\n        md: 1,\n        lg: 1.5,\n        xl: 2\n    },\n    code: {\n        fontConfig: {\n        google: {\n            families: [\"Fira Code\"]\n        }\n        },\n        style: {\n        fontSize: \"14px\",\n        fontWeight: \"normal\",\n        lineHeight: \"20px\",\n        letterSpacing: 0,\n        textTransform: \"none\"\n        }\n    },\n    text: {\n        fontConfig: {\n        google: {\n            families: [\"Muli\"]\n        }\n        },\n        h1: {\n        fontSize: \"26px\",\n        fontWeight: 800,\n        lineHeight: \"36px\",\n        letterSpacing: 0,\n        textTransform: \"capitalize\"\n        },\n        h2: {\n        fontSize: \"22px\",\n        fontWeight: 700,\n        lineHeight: \"32px\",\n        letterSpacing: 0,\n        textTransform: \"none\"\n        },\n        h3: {\n        fontSize: \"18px\",\n        fontWeight: 700,\n        lineHeight: \"24px\",\n        letterSpacing: 0,\n        textTransform: \"none\"\n        },\n        h4: {\n        fontSize: \"16px\",\n        fontWeight: 400,\n        lineHeight: \"22px\",\n        letterSpacing: 0,\n        textTransform: \"none\"\n        },\n        h5: {\n        fontSize: \"14px\",\n        fontWeight: 700,\n        lineHeight: \"20px\",\n        letterSpacing: \"0.5px\",\n        textTransform: \"none\"\n        },\n        h6: {\n        fontSize: \"12px\",\n        fontWeight: 700,\n        lineHeight: \"16px\",\n        letterSpacing: \"0.25px\",\n        textTransform: \"none\"\n        },\n        strong: {\n        fontSize: \"12px\",\n        fontWeight: 900,\n        lineHeight: \"16px\",\n        letterSpacing: \"1px\",\n        textTransform: \"uppercase\"\n        },\n        p: {\n        fontSize: \"14px\",\n        fontWeight: 400,\n        lineHeight: \"20px\",\n        letterSpacing: 0,\n        textTransform: \"none\"\n        },\n        small: {\n        fontSize: \"12px\",\n        fontWeight: 400,\n        lineHeight: \"16px\",\n        letterSpacing: 0,\n        textTransform: \"none\"\n        }\n    }\n    };\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguptasiddhant%2Ftheme-manager-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fguptasiddhant%2Ftheme-manager-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguptasiddhant%2Ftheme-manager-js/lists"}