Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
theme-switcher-cli
Advanced tools
Readme
Theme switcher cli for vuejs and react.
As long as the UI library supports less or sass theme customization, it should support.
Here are the tested UI libraries.
support follow react ui:
support follow vuejs ui:
npm i theme-switcher-cli
// or
yarn add theme-switcher-cli
node >= V10.0
// package.json
{
"scripts": {
"theme:dev": "theme-switcher-cli dev",
"theme:build": "theme-switcher-cli build"
}
}
dev
Run the local development environment. When you run the dev command, you can compile the packaging style file in real time.
build
Run publishing environment.
// themes.config.js
module.exports = {
// themes info [Array<any>]。
themes: [
{
// theme name [string]
themeName: "theme-black",
// this theme includes files[Array<string>]。Relative to the `theme.config.js` file path
themeFiles: [
"./src/css/themes/black/app.scss",
"./src/css/themes/black/ant-design.less"
]
},
{
themeName: "theme-blue",
themeFiles: [
"./src/css/themes/blue/app.scss",
"./src/css/themes/blue/ant-design.less"
]
},
{
themeName: "theme-orange",
themeFiles: [
"./src/css/themes/orange/app.scss",
"./src/css/themes/orange/ant-design.less"
]
},
{
themeName: "theme-red",
themeFiles: [
"./src/css/themes/red/app.scss",
"./src/css/themes/red/ant-design.less"
]
}
],
// default theme [string]。it will create link tag in your html file.
defaultTheme: "theme-black",
// themes output folder name [string].Will be created in the public directory
outputFolderName: "themes",
// watch directory [Array<string>],.css\.less\.scss file in development environment will recomiple.
watchDir: ["./src"],
// those html file will effect [Array<string>]
htmlFiles: ["./public/index.html"],
// html link id [string]。default link id is “theme_switch_cli_style_id”
htmlLinkId: "theme_switch_cli_style_id"
};
theme-switcher-cli
will created the script
tag in your html file. like:
<script type="text/javascript" id="theme_switch_cli_script_id">
window.theme_switcher_cli_themeVars = [
{ key: "theme-black", themePath: "./themes/theme-black.css" },
{ key: "theme-blue", themePath: "./themes/theme-blue.css" },
{ key: "theme-orange", themePath: "./themes/theme-orange.css" },
{ key: "theme-red", themePath: "./themes/theme-red.css" }
];
</script>
So you can get the generated themes info by global variables :window.theme_switcher_cli_themeVars
FAQs
theme switcher
The npm package theme-switcher-cli receives a total of 16 weekly downloads. As such, theme-switcher-cli popularity was classified as not popular.
We found that theme-switcher-cli demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.