Replace colors with CSS custom properties.

source/css/index.css

@@ -3,9 +3,8 @@ html {
 }
 
 body {
-  --accent-1: #3bd18a;
+  background-color: var(--background-1);
-  background-color: #1f1731;
+  color: var(--foreground-1);
-  color: #f2efff;
   font-size: 1.75rem;
   padding: 16px;
 }
@@ -23,7 +22,7 @@ main {
 
 h1,
 h2 {
-  background-color: #2a2041;
+  background-color: var(--background-2);
   padding: 16px;
   width: 100%;
 }
@@ -36,7 +35,7 @@ p {
 
 a {
   border: 1px dashed transparent;
-  color: #41c8e5;
+  color: var(--primary-accent-7);
   display: inline-block;
   font-weight: bold;
   padding: 4px 8px;
@@ -44,13 +43,13 @@ a {
 }
 
 a:hover {
-  background-color: #d2b83a;
+  background-color: var(--primary-accent-3);
-  color: #1f1731;
+  color: var(--background-1);
 }
 
 a:active,
 a:focus {
-  border: 1px dashed #f2efff;
+  border: 1px dashed var(--foreground-1);
   outline: none;
 }
 
@@ -62,12 +61,12 @@ main,
 footer,
 h1,
 ul {
-  border: 1px solid var(--accent-1);
+  border: 1px solid var(--primary-accent-5);
 }
 
 ul {
   align-items: center;
-  background-color: #2a2041;
+  background-color: var(--background-2);
   list-style: none;
   margin: 0;
   overflow: auto;
@@ -84,7 +83,7 @@ li:last-child {
 }
 
 .divider {
-  border-top: 1px solid var(--accent-1);
+  border-top: 1px solid var(--primary-accent-5);
   width: 100%;
 }
 

source/css/libraries.css

@@ -5,7 +5,7 @@
 }
 
 .libraries li {
-  background-color: #2a2041;
+  background-color: var(--background-2);
   padding: 16px;
 }
 
@@ -14,7 +14,7 @@
 }
 
 .libraries a:hover {
-  background-color: #3bd18a;
+  background-color: var(--primary-accent-2);
 }
 
 .libraries .badges {
@@ -24,20 +24,20 @@
 
 #npm,
 .libraries li.npm {
-  border: 1px solid #f99fb1;
+  border: 1px solid var(--primary-accent-1);
 }
 
 .npm a {
-  background-color: #f99fb1;
+  background-color: var(--primary-accent-1);
-  color: #1f1731;
+  color: var(--background-1);
 }
 
 #crates,
 .libraries li.crates {
-  border: 1px solid #96c839;
+  border: 1px solid var(--primary-accent-4);
 }
 
 .crates a {
-  background-color: #96c839;
+  background-color: var(--primary-accent-4);
-  color: #1f1731;
+  color: var(--background-1);
 }

source/css/userscripts.css

@@ -1,11 +1,7 @@
-body {
-  --accent-1: #96c839;
-}
-
 header {
   align-items: center;
-  background-color: #2a2041;
+  background-color: var(--background-2);
-  border: 1px solid var(--accent-1);
+  border: 1px solid var(--primary-accent-4);
   display: flex;
   justify-content: center;
   padding: 16px;
@@ -18,12 +14,12 @@ h2 {
 }
 
 a.install {
-  background-color: var(--accent-1);
+  background-color: var(--primary-accent-4);
-  color: #1f1731;
+  color: var(--background-1);
 }
 
 a.install:hover {
-  background-color: #d2b83a;
+  background-color: var(--primary-accent-3);
 }
 
 .remove-padding,

source/css/userstyles.css

@@ -1,11 +1,7 @@
-body {
-  --accent-1: #f99fb1;
-}
-
 header {
   align-items: center;
-  background-color: #2a2041;
+  background-color: var(--background-2);
-  border: 1px solid var(--accent-1);
+  border: 1px solid var(--primary-accent-1);
   display: flex;
   justify-content: center;
   padding: 16px;
@@ -18,8 +14,8 @@ h2 {
 }
 
 a.install {
-  background-color: var(--accent-1);
+  background-color: var(--primary-accent-1);
-  color: #1f1731;
+  color: var(--background-1);
 }
 
 a.install:hover {

source/css/variables.css

@@ -0,0 +1,33 @@
+body {
+  --foreground-1: #f2efff;
+  --foreground-2: #e6deff;
+  --background-1: #1f1731;
+  --background-2: #2a2041;
+  --primary-accent-1: #f99fb1;
+  --primary-accent-2: #faa56c;
+  --primary-accent-3: #d2b83a;
+  --primary-accent-4: #96c839;
+  --primary-accent-5: #3bd18a;
+  --primary-accent-6: #3ecdbf;
+  --primary-accent-7: #41c8e5;
+  --primary-accent-8: #98b9f8;
+  --primary-accent-9: #d5a6f8;
+  --primary-accent-10: #f99add;
+  --primary-gray-1: #e2e2e2;
+  --primary-gray-2: #c6c6c6;
+  --primary-gray-3: #ababab;
+  --secondary-accent-1: #8b123c;
+  --secondary-accent-2: #6a3b11;
+  --secondary-accent-3: #514610;
+  --secondary-accent-4: #384d10;
+  --secondary-accent-5: #115133;
+  --secondary-accent-6: #124f49;
+  --secondary-accent-7: #144d5a;
+  --secondary-accent-8: #17477e;
+  --secondary-accent-9: #6f1995;
+  --secondary-accent-10: #81156a;
+  --secondary-gray-1: #1b1b1b;
+  --secondary-gray-2: #303030;
+  --secondary-gray-3: #474747;
+  --transparent-accent-1: #000a;
+}

source/index.html

@@ -6,6 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Bauke</title>
   <link rel="stylesheet" href="css/modern-normalize.css">
+  <link rel="stylesheet" href="css/variables.css">
   <link rel="stylesheet" href="css/index.css">
 </head>
 

source/libraries/index.html

@@ -6,6 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Libraries</title>
   <link rel="stylesheet" href="../css/modern-normalize.css">
+  <link rel="stylesheet" href="../css/variables.css">
   <link rel="stylesheet" href="../css/index.css">
   <link rel="stylesheet" href="../css/libraries.css">
 </head>

source/userscripts/index.html

@@ -6,6 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Userscripts</title>
   <link rel="stylesheet" href="../css/modern-normalize.css">
+  <link rel="stylesheet" href="../css/variables.css">
   <link rel="stylesheet" href="../css/index.css">
   <link rel="stylesheet" href="../css/userscripts.css">
 </head>

source/userstyles/index.html

@@ -6,6 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Userstyles</title>
   <link rel="stylesheet" href="../css/modern-normalize.css">
+  <link rel="stylesheet" href="../css/variables.css">
   <link rel="stylesheet" href="../css/index.css">
   <link rel="stylesheet" href="../css/userstyles.css">
 </head>