darkmode vercel

seqan · Oct 13, 2022 · e4ecae9 · e4ecae9
1 parent 5759cd3
commit e4ecae9
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 21 deletions.
diff --git a/test/documentation/.vercel/build.sh b/test/documentation/.vercel/build.sh
@@ -25,3 +25,4 @@ mkdir -p "${EXPORT_DIR}/usr/" "${EXPORT_DIR}/dev/"
 DESTDIR="${EXPORT_DIR}/usr/" cmake3 -DCOMPONENT=doc -P cmake_install.cmake 1>/dev/null
 DESTDIR="${EXPORT_DIR}/dev/" cmake3 -DCOMPONENT=doc-dev -P cmake_install.cmake 1>/dev/null
 cp "${SOURCE_DIR}/test/documentation/.vercel/index.html" "${EXPORT_DIR}/index.html"
+cp "${SOURCE_DIR}/test/documentation/.vercel/vercel.css" "${EXPORT_DIR}/vercel.css"
diff --git a/test/documentation/.vercel/index.html b/test/documentation/.vercel/index.html
@@ -1,27 +1,7 @@
 <html>
   <head>
     <title>SeqAn Documentation Preview</title>
-    <style>
-    body {text-align: center}
-    h1 {color: gray}
-    a.selection {
-      height: 2em;
-      display: inline-block;
-      border-radius: 4px;
-      background: black;
-      color: white;
-      line-height: 2em;
-      padding: 5px;
-      width: 50%;
-      font-size: 1.5em;
-      text-decoration: none;
-      margin: 5px;
-    }
-    a.selection:hover {
-        background-color: #fede09;
-        text-decoration: underline;
-    }
-    </style>
+    <link href="vercel.css" rel="stylesheet" type="text/css">
   </head>
 
   <body>

diff --git a/test/documentation/.vercel/vercel.css b/test/documentation/.vercel/vercel.css
@@ -0,0 +1,39 @@
+@media (prefers-color-scheme: dark) {
+    :root {
+        --background-color: rgb(5, 5, 5);
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        --background-color: rgb(250, 250, 250);
+    }
+}
+
+body {
+    background-color: var(--background-color);
+    text-align: center;
+}
+
+h1 {
+    color: rgb(135,135,135);
+}
+
+a.selection {
+    height: 2em;
+    display: inline-block;
+    border-radius: 4px;
+    background: rgb(55, 55, 55);
+    color: rgb(250, 250, 250);
+    line-height: 2em;
+    padding: 5px;
+    width: 50%;
+    font-size: 1.5em;
+    text-decoration: none;
+    margin: 5px;
+}
+
+a.selection:hover {
+    background-color: #776700;
+    text-decoration: underline;
+}