github/uikit
1
1
Fork 0
mirror of https://github.com/chancehudson/uikit.git synced 2026-01-10 06:28:09 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix: dark/light mode

Browse Source 
refactor: remove wrapping el
This commit is contained in:
Chance Hudson
2022-03-29 10:39:14 -05:00
parent cf453cc449
commit 337bbd5453
2 changed files with 20 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
packages/kit/src/ToggleSwitch.js
View File

@@ -6,18 +6,16 @@ const ToggleSwitch = ({ onChange, checked, ...props }) => {
const ui = React.useContext(UIContext)
return (
<div className={ui.modeCssClass}>
<input
className="nanoether--toggle"
type="checkbox"
checked={typeof checked === 'boolean' ? checked : undefined}
onChange={(e) => {
if (onChange) {
onChange(e.target.checked)
}
}}
/>
</div>
<input
className={`nanoether--toggle ${ui.modeCssClass}`}
type="checkbox"
checked={typeof checked === 'boolean' ? checked : undefined}
onChange={(e) => {
if (onChange) {
onChange(e.target.checked)
}
}}
/>
)
}

20
packages/kit/src/toggleswitch.css
View File

@@ -28,9 +28,9 @@ input[type='checkbox'].nanoether--toggle:before {
}
/* checked style */
input[type='checkbox'].nanoether--toggle:checked:before{
input[type='checkbox'].nanoether--toggle:checked {
background-color: var(--color-gray-9);
border-color: var(--color-white);
/* border-color: var(--color-white); */
}
input[type='checkbox'].nanoether--toggle:checked:before {
@@ -39,20 +39,20 @@ input[type='checkbox'].nanoether--toggle:checked:before {
}
/* dark theme */
.dark > input[type='checkbox'].nanoether--toggle {
input[type='checkbox'].nanoether--toggle.dark {
border-color: var(--color-white);
background-color: var(--color-gray-9);
}
.dark > input[type='checkbox'].nanoether--toggle:before {
input[type='checkbox'].nanoether--toggle.dark:checked {
background-color: var(--color-white);
/* border-color: var(--color-gray-9); */
}
input[type='checkbox'].nanoether--toggle.dark:before {
background-color: var(--color-white);
}
.dark > input[type='checkbox'].nanoether--toggle:checked {
background-color: var(--color-white);
border-color: var(--color-gray-9);
}
.dark > input[type='checkbox'].nanoether--toggle:checked:before {
input[type='checkbox'].nanoether--toggle.dark:checked:before {
background-color: var(--color-gray-9);
}