@hdoc/react-toggle-theme
Advanced tools
+1
-1
@@ -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} |
+1
-1
| { | ||
| "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; | ||
| } | ||
| ``` |
6045
-4.61%54
-1.82%107
-6.14%