New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details →
Socket
Book a DemoSign in
Socket

@hdoc/react-toggle-theme

Package Overview
Dependencies
Maintainers
1
Versions
11
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@hdoc/react-toggle-theme - npm Package Compare versions

Comparing version
1.0.1
to
2.0.0
+1
-1
dist/main.css

@@ -1,1 +0,1 @@

.theme-button{--hover-light-bg-color: #ccc;--active-light-bg-color: #e6e6e6;--hover-dark-bg-color: #3f3f3f;--active-dark-bg-color: #595959;background-color:transparent;border:none;border-radius:8px;padding:4px;cursor:pointer}.theme-button:hover{background-color:var(--hover-light-bg-color)}.theme-button:active{background-color:var(--active-light-bg-color)}.theme-button--full-rounded{border-radius:50%}body[data-theme=dark] .theme-button:hover{background-color:var(--hover-dark-bg-color)}body[data-theme=dark] .theme-button:active{background-color:var(--active-dark-bg-color)}
.theme-button{background-color:var(--button-bg, transparent);border:none;border-radius:8px;padding:4px;cursor:pointer}.theme-button:hover{background-color:var(--button-bg-hover, #ccc)}.theme-button:active{background-color:var(--button-bg-active, #e6e6e6)}.theme-button--full-rounded{border-radius:50%}body[data-theme=dark] .theme-button{--button-bg-hover: #3f3f3f;--button-bg-active: #595959}
{
"name": "@hdoc/react-toggle-theme",
"private": false,
"version": "1.0.1",
"version": "2.0.0",
"type": "module",

@@ -6,0 +6,0 @@ "license": "MIT",

+15
-22

@@ -89,26 +89,19 @@ # @hdoc/react-toggle-theme

## CSS custom properties
## Customization
The following CSS custom properties are used by `.theme-button` class:
You can customize the background color of the button with the following CSS custom properties:
`--hover-light-bg-color`
```css
.theme-button {
--button-bg: #fff;
--button-bg-hover: #eee;
--button-bg-active: #ddd;
}
Background color of the button when `hover` and the theme is `light`.
---
`--active-light-bg-color`
Background color of the button when `click` and the theme is `light`.
---
`--hover-dark-bg-color`
Background color of the button when `hover` and the theme is `dark`.
---
`--active-dark-bg-color`
Background color of the button when `click` and the theme is `dark`.
/* The same custom properties applies for dark theme. */
[data-theme="dark"] .theme-button {
--button-bg: #333;
--button-bg-hover: #444;
--button-bg-active: #555;
}
```