Merge pull request #1 from Fenimoure/patch-1

Update global.css to have dark and light themes

src/components/overview.tsx

@@ -9,18 +9,6 @@ export type OverviewProps = {
 export const Overview = ({ wallpapers }: OverviewProps) => {
   return (
     <>
-      {/* <h1
-        css={css`
-          font-size: 0.9rem;
-          text-align: center;
-          padding-top: 0.75rem;
-          padding-bottom: 0.75rem;
-          background-color: #303030;
-          font-weight: 575;
-        `}
-      >
-        Wallpapers
-      </h1> */}
       <div
         css={css`
           display: grid;

src/components/overviewWallpaper.tsx

@@ -77,7 +77,6 @@ export const OverviewWallpaper = ({ wallpaper }: OverviewProps) => {
           <h2
             css={css`
               font-size: 2rem;
-              color: white;
               text-decoration: none !important;
               cursor: inherit;
               margin-top: 0;

src/styles/global.css

@@ -1,5 +1,32 @@
+/* Colors set according to libadwaita: https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/named-colors.html#window-colors */
+
+@property --window_bg_color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #242424;
+}
+
+@property --window_fg_color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #ffffff;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --window_fg_color: rgba(0, 0, 0, 0.8);
+    --window_bg_color: #fafafa;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --window_fg_color: #ffffff;
+    --window_bg_color: #242424;
+  }
+}
+
 body {
-  background-color: #1e1e1e;
-  color: #fff;
+  background-color: var(--window_bg_color, #242424);
+  color: var(--window_fg_color, #ffffff);
   font-family: Cantarell, "Droid Sans", Ubuntu, "DejaVu Sans", Arial, sans-serif !important;
 }