improve colours and modularise css

Author: LinuxJava7

adwaita.css

@@ -0,0 +1,220 @@
+:root {
+  /* Accent Colors */
+  --accent-color: #1c71d8;
+  --accent-bg-color: #3584e4;
+  --accent-fg-color: #ffffff;
+
+  /* Destructive Colors */
+  --destructive-color: #c01c28;
+  --destructive-bg-color: #e01b24;
+  --destructive-fg-color: #ffffff;
+
+  /* Success Colors */
+  --success-color: #1b8553;
+  --success-bg-color: #2ec27e;
+  --success-fg-color: #ffffff;
+
+  /* Warning Colors */
+  --warning-color: #9c6e03;
+  --warning-bg-color: #e5a50a;
+  --warning-fg-color: rgba(0, 0, 0, 0.8);
+
+  /* Error Colors */
+  --error-color: #c01c28;
+  --error-bg-color: #e01b24;
+  --error-fg-color: #ffffff;
+
+  /* Window Colors */
+  --window-bg-color: #fafafa;
+  --window-fg-color: rgba(0, 0, 0, 0.8);
+
+  /* View Colors */
+  --view-bg-color: #ffffff;
+  --view-fg-color: rgba(0, 0, 0, 0.8);
+
+  /* Header Bar Colors */
+  --headerbar-bg-color: #ffffff;
+  --headerbar-fg-color: rgba(0, 0, 0, 0.8);
+  --headerbar-border-color: rgba(0, 0, 0, 0.8);
+  --headerbar-backdrop-color: #fafafa;
+  --headerbar-shade-color: rgba(0, 0, 0, 0.12);
+  --headerbar-darker-shade-color: rgba(0, 0, 0, 0.12);
+
+  /* Sidebar Colors */
+  --sidebar-bg-color: #ebebeb;
+  --sidebar-fg-color: rgba(0, 0, 0, 0.8);
+  --sidebar-backdrop-color: #f2f2f2;
+  --sidebar-border-color: rgba(0, 0, 0, 0.07);
+  --sidebar-shade-color: rgba(0, 0, 0, 0.07);
+
+  /* Secondary Sidebar Colors */
+  --secondary-sidebar-bg-color: #f3f3f3;
+  --secondary-sidebar-fg-color: rgba(0, 0, 0, 0.8);
+  --secondary-sidebar-backdrop-color: #f6f6f6;
+  --secondary-sidebar-border-color: rgba(0, 0, 0, 0.07);
+  --secondary-sidebar-shade-color: rgba(0, 0, 0, 0.07);
+
+  /* Card Colors */
+  --card-bg-color: #ffffff;
+  --card-fg-color: rgba(0, 0, 0, 0.8);
+  --card-shade-color: rgba(0, 0, 0, 0.07);
+
+  /* Thumbnail Colors */
+  --thumbnail-bg-color: #ffffff;
+  --thumbnail-fg-color: rgba(0, 0, 0, 0.8);
+
+  /* Dialog Colors */
+  --dialog-bg-color: #fafafa;
+  --dialog-fg-color: rgba(0, 0, 0, 0.8);
+
+  /* Popover Colors */
+  --popover-bg-color: #ffffff;
+  --popover-fg-color: rgba(0, 0, 0, 0.8);
+  --popover-shade-color: rgba(0, 0, 0, 0.07);
+
+  /* Miscellaneous Colors */
+  --shade-color: rgba(0, 0, 0, 0.07);
+  --scrollbar-outline-color: #ffffff;
+
+  /* Helper Colors */
+  --borders: rgba(0, 0, 0, 0.15);
+
+  /* Palette Colors */
+  --blue-1: #99c1f1;
+  --blue-2: #62a0ea;
+  --blue-3: #3584e4;
+  --blue-4: #1c71d8;
+  --blue-5: #1a5fb4;
+
+  --green-1: #8ff0a4;
+  --green-2: #57e389;
+  --green-3: #33d17a;
+  --green-4: #2ec27e;
+  --green-5: #26a269;
+
+  --yellow-1: #f9f06b;
+  --yellow-2: #f8e45c;
+  --yellow-3: #f6d32d;
+  --yellow-4: #f5c211;
+  --yellow-5: #e5a50a;
+
+  --orange-1: #ffbe6f;
+  --orange-2: #ffa348;
+  --orange-3: #ff7800;
+  --orange-4: #e66100;
+  --orange-5: #c64600;
+
+  --red-1: #f66151;
+  --red-2: #ed333b;
+  --red-3: #e01b24;
+  --red-4: #c01c28;
+  --red-5: #a51d2d;
+
+  --purple-1: #dc8add;
+  --purple-2: #c061cb;
+  --purple-3: #9141ac;
+  --purple-4: #813d9c;
+  --purple-5: #613583;
+
+  --brown-1: #cdab8f;
+  --brown-2: #b5835a;
+  --brown-3: #986a44;
+  --brown-4: #865e3c;
+  --brown-5: #63452c;
+
+  --light-1: #ffffff;
+  --light-2: #f6f5f4;
+  --light-3: #deddda;
+  --light-4: #c0bfbc;
+  --light-5: #9a9996;
+
+  --dark-1: #77767b;
+  --dark-2: #5e5c64;
+  --dark-3: #3d3846;
+  --dark-4: #241f31;
+  --dark-5: #000000;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* Accent Colors */
+    --accent-color: #78aeed;
+    --accent-bg-color: #3584e4;
+    --accent-fg-color: #ffffff;
+
+    /* Destructive Colors */
+    --destructive-color: #ff7b63;
+    --destructive-bg-color: #c01c28;
+    --destructive-fg-color: #ffffff;
+
+    /* Success Colors */
+    --success-color: #8ff0a4;
+    --success-bg-color: #26a269;
+    --success-fg-color: #ffffff;
+
+    /* Warning Colors */
+    --warning-color: #f8e45c;
+    --warning-bg-color: #cd9309;
+    --warning-fg-color: rgba(0, 0, 0, 0.8);
+
+    /* Error Colors */
+    --error-color: #ff7b63;
+    --error-bg-color: #c01c28;
+    --error-fg-color: #ffffff;
+
+    /* Window Colors */
+    --window-bg-color: #242424;
+    --window-fg-color: #ffffff;
+
+    /* View Colors */
+    --view-bg-color: #1e1e1e;
+    --view-fg-color: #ffffff;
+
+    /* Header Bar Colors */
+    --headerbar-bg-color: #303030;
+    --headerbar-fg-color: #ffffff;
+    --headerbar-border-color: #ffffff;
+    --headerbar-backdrop-color: #242424;
+    --headerbar-shade-color: rgba(0, 0, 0, 0.36);
+    --headerbar-darker-shade-color: rgba(0, 0, 0, 0.9);
+
+    /* Sidebar Colors */
+    --sidebar-bg-color: #303030;
+    --sidebar-fg-color: #ffffff;
+    --sidebar-backdrop-color: #2a2a2a;
+    --sidebar-border-color: rgba(0, 0, 0, 0.36);
+    --sidebar-shade-color: rgba(0, 0, 0, 0.25);
+
+    /* Secondary Sidebar Colors */
+    --secondary-sidebar-bg-color: #2a2a2a;
+    --secondary-sidebar-fg-color: #ffffff;
+    --secondary-sidebar-backdrop-color: #272727;
+    --secondary-sidebar-border-color: rgba(0, 0, 0, 0.36);
+    --secondary-sidebar-shade-color: rgba(0, 0, 0, 0.25);
+
+    /* Card Colors */
+    --card-bg-color: rgba(255, 255, 255, 0.08);
+    --card-fg-color: #ffffff;
+    --card-shade-color: rgba(0, 0, 0, 0.36);
+
+    /* Thumbnail Colors */
+    --thumbnail-bg-color: #383838;
+    --thumbnail-fg-color: #ffffff;
+
+    /* Dialog Colors */
+    --dialog-bg-color: #383838;
+    --dialog-fg-color: #ffffff;
+
+    /*tPopover Colors */
+    --popover-bg-color: #383838;
+    --popover-fg-color: #ffffff;
+    --popover-shade-color: rgba(0, 0, 0, 0.25);
+
+    /* Miscellaneous Colors */
+    --shade-color: rgba(0, 0, 0, 0.25);
+    --scrollbar-outline-color: rgba(0, 0, 0, 0.5);
+
+    /* Helper Colors */
+    --borders: rgba(255, 255, 255, 0.5);
+  }
+}