From 80379b356191466dac68a335db07ef8df4751142 Mon Sep 17 00:00:00 2001 From: breadthe Date: Tue, 4 Oct 2022 07:37:43 -0500 Subject: [PATCH] Fix light theme when system is in dark mode --- src/app.css | 46 +++++++++++++++++----------------------------- 1 file changed, 17 insertions(+), 29 deletions(-) diff --git a/src/app.css b/src/app.css index a0b2723..90871fd 100644 --- a/src/app.css +++ b/src/app.css @@ -47,6 +47,7 @@ button { font-size: 1em; font-weight: 500; font-family: inherit; + color: theme("colors.white"); background-color: theme("colors.blue.500"); cursor: pointer; transition: border-color 0.25s; @@ -54,6 +55,8 @@ button { button:hover { border-color: theme("colors.blue.600"); + background-color: theme("colors.blue.600"); + color: theme("colors.white"); } button:focus, @@ -94,37 +97,11 @@ button.transparent:hover { border-color: theme("colors.transparent"); } -html.dark body { - color: rgba(255, 255, 255, 0.87); - background-color: theme("colors.neutral.800"); -} - -html.dark button.transparent:hover { - color: rgba(255, 255, 255, 0.87); -} - -@media (prefers-color-scheme: light) { - :root { - color: theme("colors.black"); - background-color: theme("colors.white"); - } - - a:not(.hello-*):hover { - color: #747bff; - } - - button { - background-color: theme("colors.blue.500"); - color: theme("colors.white"); - } - - button:hover { - background-color: theme("colors.blue.600"); - color: theme("colors.white"); - } +html body { + color: theme("colors.black"); + background-color: theme("colors.white"); } - /* Forms */ input, @@ -145,3 +122,14 @@ select { height: theme("height.4"); width: theme("width.4"); } + +/* Dark mode */ + +html.dark body { + color: rgba(255, 255, 255, 0.87); + background-color: theme("colors.neutral.800"); +} + +html.dark button.transparent:hover { + color: rgba(255, 255, 255, 0.87); +}