diff --git a/src/common/themes.css b/src/common/themes.css index 38ce1fc..6cfba8f 100644 --- a/src/common/themes.css +++ b/src/common/themes.css @@ -5,7 +5,7 @@ */ .__NoScript_Theme__, .__NoScript_Theme__[data-theme="dark"] { - color-scheme: light dark; + color-scheme: dark; --accent-color: #d12027; --fg-color1: #ccc; --fg-color2: #fff; @@ -17,13 +17,14 @@ --focus-color: #8007; --tab-color1: #6668; --tab-color2: #3348; - --form-check-color: var(--bg-color2); - --form-control-color: var(--accent-color); + --form-check-color: var(--accent-color); + --form-control-color: var(--form-color2); --hilite-color: #f008; } @media (prefers-color-scheme: light) { .__NoScript_Theme__ { + color-scheme: light; --fg-color1: #555; --fg-color2: #000; --text-color: #333; diff --git a/src/ui/common.css b/src/ui/common.css index 2dd76a5..8138c27 100644 --- a/src/ui/common.css +++ b/src/ui/common.css @@ -68,7 +68,7 @@ input[type="checkbox"]:not(.https-only, .temp) { transform: translateY(-0.075em); display: grid; place-content: center; - background-color: var(--form-check-color); + background-color: var(--form-color1); } input[type="checkbox"]:not(.https-only, .temp)::before { @@ -87,8 +87,7 @@ input[type="checkbox"]:not(.https-only, .temp):checked::before { } input[type="checkbox"]:not(.https-only, .temp):checked { background-color: var(--form-control-color); - border-color: var(--form-control-color); -} + } input[type="radio"]:not(.preset) { -webkit-appearance: none; @@ -116,13 +115,17 @@ input[type="radio"]:not(.preset)::before { border-radius: 50%; transform: scale(0); transition: 120ms transform ease-in-out; - box-shadow: inset 1em 1em var(--form-control-color); + box-shadow: inset 1em 1em var(--form-check-color); background-color: CanvasText; } input[type="radio"]:not(.preset):checked::before { transform: scale(1); } +input[type="radio"]:not(.preset):checked { + background-color: var(--form-control-color); +} + input:disabled, button:disabled, select:disabled { filter: grayscale(100%);