Add light mode support

apollo/server/server.py

@@ -6,7 +6,7 @@ Tortoise.init_models(["apollo.db"], "models")  # noqa # pylint: disable=wrong-im
 
 from fastapi import FastAPI, Request, Depends
 from fastapi.openapi.utils import get_openapi
-from fastapi.responses import JSONResponse
+from fastapi.responses import JSONResponse, RedirectResponse
 from starlette.middleware.sessions import SessionMiddleware
 from fastapi_pagination import add_pagination
 
@@ -88,6 +88,23 @@ async def health():
     return {"status": "ok"}
 
 
+@app.get("/_/set_color")
+async def set_color(request: Request):
+    valid_colors = ["dark", "light"]
+    color = request.query_params.get("color")
+    response = RedirectResponse(
+        request.headers["referer"] if "referer" in request.headers else "/"
+    )
+
+    # First check if the color is valid
+    # If valid, set the color in the cookie, then
+    # redirect back to referrer
+    if color in valid_colors:
+        response.set_cookie("color", color)
+
+    return response
+
+
 @app.exception_handler(404)
 async def not_found_handler(request, exc):  # pylint: disable=unused-argument
     if request.url.path.startswith("/api"

apollo/server/static/theme.scss

@@ -6,12 +6,56 @@ $feature-flags: (
 @use 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/generated/themes';
 @import 'carbon-components/scss/globals/scss/styles.scss';
 
-:root {
+@mixin dark-mode-non-root {
-  @include carbon--theme($carbon--theme--g90, true);
+  a {
+    color: map-get($carbon--theme--g90, 'link-01');
+  }
+
+  #color-switcher-dark {
+    display: var(--display-dark-switcher);
+  }
 }
 
-a {
+@mixin dark-mode {
-  color: map-get($carbon--theme--g90, 'link-01');
+  :root {
+    @include carbon--theme($carbon--theme--g90, true);
+    --display-dark-switcher: none;
+    --display-light-switcher: block;
+  }
+
+  @include dark-mode-non-root;
+}
+
+@mixin light-mode {
+  :root,
+  :root.light {
+    @include carbon--theme($carbon--theme--white, true);
+    --display-light-switcher: none;
+    --display-dark-switcher: block;
+  }
+
+  bx-side-nav {
+    border-right: 1px solid var(--cds-ui-03);
+  }
+
+  #color-switcher-light {
+    display: var(--display-light-switcher);
+  }
+}
+
+@include light-mode;
+
+@media (prefers-color-scheme: dark) {
+  @include dark-mode;
+}
+
+:root.dark {
+  @include carbon--theme($carbon--theme--g90, true);
+
+  @include dark-mode-non-root;
+
+  --display-dark-switcher: none;
+  --display-light-switcher: block;
 }
 
 .bx--inline-notification__text-wrapper {

apollo/server/templates/advisory.jinja

@@ -40,19 +40,19 @@
 <div class="bx--grid bx--grid--full-width" style="margin:3rem 0;">
   <div class="bx--row">
     <div class="bx--col-lg-10">
-      <div style="background:var(--cds-ui-02);color:var(--cds-text-01);padding:2rem;">
+      <div style="background:var(--cds-ui-01);color:var(--cds-text-01);padding:2rem;">
-        <h3 style="font-weight:600;color:var(--cds-text-04);padding-bottom:0.3rem;">Synopsis</h3>
+        <h3 style="font-weight:600;color:var(--cds-text-01);padding-bottom:0.3rem;">Synopsis</h3>
         <p>{{ advisory.synopsis }}</p>
         <br /><br />
 
-        <h3 style="font-weight:600;color:var(--cds-text-04);padding-bottom:0.3rem;">Description</h3>
+        <h3 style="font-weight:600;color:var(--cds-text-01);padding-bottom:0.3rem;">Description</h3>
         {% set description = advisory.description.split("\n") %}
         {% for line in description %}
         <p>{{ line }}</p>
         {% endfor %}
         <br /><br />
 
-        <h3 style="font-weight:600;color:var(--cds-text-04);padding-bottom:0.3rem;">Affected products</h3>
+        <h3 style="font-weight:600;color:var(--cds-text-01);padding-bottom:0.3rem;">Affected products</h3>
         <bx-ordered-list>
           {% for product in advisory.affected_products %}
           <bx-list-item style="font-size:var(--cds-body-short-02-font-size)">{{ product.name }}</bx-list-item>
@@ -60,7 +60,7 @@
         </bx-ordered-list>
         <br /> <br />
 
-        <h3 style="font-weight:600;color:var(--cds-text-04);padding-bottom:0.3rem;">Fixes</h3>
+        <h3 style="font-weight:600;color:var(--cds-text-01);padding-bottom:0.3rem;">Fixes</h3>
         <bx-ordered-list>
           {% for fix in advisory.fixes %}
           <bx-list-item style="font-size:var(--cds-body-short-02-font-size)">
@@ -70,7 +70,7 @@
         </bx-ordered-list>
         <br /> <br />
 
-        <h3 style="font-weight:600;color:var(--cds-text-04);padding-bottom:0.3rem;">CVEs</h3>
+        <h3 style="font-weight:600;color:var(--cds-text-01);padding-bottom:0.3rem;">CVEs</h3>
         <bx-ordered-list>
           {% for cve in advisory.cves %}
           <bx-list-item style="font-size:var(--cds-body-short-02-font-size)">
@@ -83,8 +83,8 @@
       </div>
     </div>
     <div class="bx--col-lg-6">
-      <div style="background:var(--cds-ui-02);color:var(--cds-text-01);padding:2rem;">
+      <div style="background:var(--cds-ui-01);color:var(--cds-text-01);padding:2rem;">
-        <h3 style="font-weight:600;color:var(--cds-text-04);">Affected packages</h3>
+        <h3 style="font-weight:600;color:var(--cds-text-01);">Affected packages</h3>
         {% for product_repo_name, nevras in package_map.items() %}
         <h4 style="padding-bottom:0.3rem;font-weight:400;padding-top:0.3rem;">{{ product_repo_name }}</h4>
         <bx-ordered-list>

apollo/server/templates/layout.jinja

@@ -1,9 +1,18 @@
 <!DOCTYPE html>
-<html lang="en">
+{% set theme = "" %}
+{% if "color" in request.cookies %}
+{% if request.cookies["color"] == "light" %}
+{% set theme = "light" %}
+{% elif request.cookies["color"] == "dark" %}
+{% set theme = "dark" %}
+{% endif %}
+{% endif %}
+<html lang="en" class="{{theme}}">
 
 <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="color-scheme" content="dark">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <title>{% block title %}Peridot Apollo{% endblock %}</title>
@@ -25,8 +34,8 @@
 
     .apollo-outer bx-inline-notification {
       margin: 0;
-      color: #ffffff;
+      color: var(--cds-text-01);
-      --cds-inverse-01: #ffffff;
+      --cds-inverse-01: var(--cds-text-01);
       background: var(--cds-button-separator);
     }
 
@@ -95,6 +104,12 @@
       {% endif %}
     </bx-header-nav>
     <bx-header-nav style="margin-left:auto;padding-left:0">
+      <bx-header-nav-item href="/_/set_color?color=light" id="color-switcher-light">
+        {% include "light_icon.jinja" %}
+      </bx-header-nav-item>
+      <bx-header-nav-item href="/_/set_color?color=dark" id="color-switcher-dark">
+        {% include "light_icon.jinja" %}
+      </bx-header-nav-item>
       {% if request.session.get("user.name") %}
       <bx-header-nav-item>{{ request.session.get("user.name") }}</bx-header-nav-item>
       <bx-header-nav-item href="/logout/">Logout</bx-header-nav-item>

apollo/server/templates/light_icon.jinja

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+  y="0px" width="16px" height="16px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;display:block;"
+  xml:space="preserve">
+  <style type="text/css">
+    .st0 {
+      fill: none;
+    }
+  </style>
+  <title>light</title>
+  <rect fill="currentColor" x="7.5" y="1" width="1" height="2.5" />
+  <rect fill="currentColor" x="10.8" y="3.4" transform="matrix(0.7071 -0.7071 0.7071 0.7071 0.7526 9.6636)" width="2.5"
+    height="1" />
+  <rect fill="currentColor" x="12.5" y="7.5" width="2.5" height="1" />
+  <rect fill="currentColor" x="11.6" y="10.8" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -4.9774 12.0652)" width="1"
+    height="2.5" />
+  <rect fill="currentColor" x="7.5" y="12.5" width="1" height="2.5" />
+  <rect fill="currentColor" x="2.7" y="11.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -7.3811 6.3373)" width="2.5"
+    height="1" />
+  <rect fill="currentColor" x="1" y="7.5" width="2.5" height="1" />
+  <rect fill="currentColor" x="3.4" y="2.7" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -1.6512 3.9356)" width="1"
+    height="2.5" />
+  <path fill="currentColor"
+    d="M8,6c1.1,0,2,0.9,2,2s-0.9,2-2,2S6,9.1,6,8S6.9,6,8,6 M8,5C6.3,5,5,6.3,5,8s1.3,3,3,3s3-1.3,3-3S9.7,5,8,5z" />
+  <rect id="_Transparent_Rectangle_" class="st0" width="16" height="16" />
+</svg>

apollo/server/templates/red_hat_advisory.jinja

@@ -69,19 +69,19 @@
 <div class="bx--grid bx--grid--full-width" style="margin:3rem 0;">
   <div class="bx--row">
     <div class="bx--col-lg-10">
-      <div style="background:var(--cds-ui-02);color:var(--cds-text-01);padding:2rem;">
+      <div style="background:var(--cds-ui-01);color:var(--cds-text-01);padding:2rem;">
-        <h3 style="font-weight:600;color:var(--cds-text-04);padding-bottom:0.3rem;">Synopsis</h3>
+        <h3 style="font-weight:600;color:var(--cds-text-01);padding-bottom:0.3rem;">Synopsis</h3>
         <p>{{ advisory.synopsis }}</p>
         <br /><br />
 
-        <h3 style="font-weight:600;color:var(--cds-text-04);padding-bottom:0.3rem;">Description</h3>
+        <h3 style="font-weight:600;color:var(--cds-text-01);padding-bottom:0.3rem;">Description</h3>
         {% set description = advisory.description.split("\n") %}
         {% for line in description %}
         <p>{{ line }}</p>
         {% endfor %}
         <br /><br />
 
-        <h3 style="font-weight:600;color:var(--cds-text-04);padding-bottom:0.3rem;">Affected products</h3>
+        <h3 style="font-weight:600;color:var(--cds-text-01);padding-bottom:0.3rem;">Affected products</h3>
         <bx-ordered-list>
           {% for product in advisory.affected_products %}
           <bx-list-item style="font-size:var(--cds-body-short-02-font-size)">
@@ -92,7 +92,7 @@
         </bx-ordered-list>
         <br /> <br />
 
-        <h3 style="font-weight:600;color:var(--cds-text-04);padding-bottom:0.3rem;">Fixes</h3>
+        <h3 style="font-weight:600;color:var(--cds-text-01);padding-bottom:0.3rem;">Fixes</h3>
         <bx-ordered-list>
           {% for ticket in advisory.bugzilla_tickets %}
           <bx-list-item style="font-size:var(--cds-body-short-02-font-size)">
@@ -104,7 +104,7 @@
         </bx-ordered-list>
         <br /> <br />
 
-        <h3 style="font-weight:600;color:var(--cds-text-04);padding-bottom:0.3rem;">CVEs</h3>
+        <h3 style="font-weight:600;color:var(--cds-text-01);padding-bottom:0.3rem;">CVEs</h3>
         <bx-ordered-list>
           {% for cve in advisory.cves %}
           <bx-list-item style="font-size:var(--cds-body-short-02-font-size)">
@@ -117,7 +117,7 @@
       </div>
     </div>
     <div class="bx--col-lg-6">
-      <div style="background:var(--cds-ui-02);color:var(--cds-text-01);padding:2rem;">
+      <div style="background:var(--cds-ui-01);color:var(--cds-text-01);padding:2rem;">
         {% set pkg_list = {} %}
         {% for pkg in advisory.packages %}
         {% if pkg.repo_name in pkg_list %}
@@ -127,7 +127,7 @@
         {% endif %}
         {% endfor %}
 
-        <h3 style="font-weight:600;color:var(--cds-text-04);padding-bottom:0.3rem;">Affected packages</h3>
+        <h3 style="font-weight:600;color:var(--cds-text-01);padding-bottom:0.3rem;">Affected packages</h3>
         {% for repo_name, pkg in pkg_list.items() %}
         <h4 style="padding-bottom:0.3rem;font-weight:400;">{{ repo_name }}</h4>
         <bx-ordered-list>