fix: notch status bar doesn't match theme color (#918)

cotes2020 · cotes2020 · commit 820ba62e9e93 · 2023-03-17T01:17:06.000+08:00
Resolves #918
diff --git a/_includes/head.html b/_includes/head.html
@@ -1,21 +1,24 @@
-<!--
-  The Head
--->
+<!-- The Head -->
 
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="theme-color" media="(prefers-color-scheme: light)" content="#f7f7f7">
+  <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1b1b1e">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <meta
+    name="viewport"
+    content="width=device-width, user-scalable=no initial-scale=1, shrink-to-fit=no, viewport-fit=cover"
+  >
 
   {% if page.layout == 'home' or page.layout == 'post' %}
-
     {% if site.google_analytics.pv.proxy_endpoint %}
       <meta name="pv-proxy-endpoint" content="{{ site.google_analytics.pv.proxy_endpoint }}">
     {% endif %}
 
     {% if site.google_analytics.pv.cache_path %}
       <meta name="pv-cache-path" content="{{ site.google_analytics.pv.cache_path | relative_url }}">
     {% endif %}
-
   {% endif %}
 
   {% capture seo_tags %}
@@ -40,40 +43,34 @@
       {% endif %}
 
       {% assign seo_tags = seo_tags | replace: target, replacement %}
-
     {% endunless %}
-
   {% endif %}
 
   {{ seo_tags }}
 
   <title>
-  {%- unless page.layout == "home" -%}
-    {{ page.title | append: " | "}}
-  {%- endunless -%}
+    {%- unless page.layout == 'home' -%}
+      {{ page.title | append: ' | ' }}
+    {%- endunless -%}
     {{ site.title }}
   </title>
 
   {% include favicons.html %}
 
   {% if site.resources.ignore_env != jekyll.environment and site.resources.self_hosted %}
-
     <link href="{{ site.data.assets[origin].webfonts | relative_url }}" rel="stylesheet">
 
   {% else %}
-
     {% for cdn in site.data.assets[origin].cdns %}
       <link rel="preconnect" href="{{ cdn.url }}" {{ cdn.args }}>
       <link rel="dns-prefetch" href="{{ cdn.url }}" {{ cdn.args }}>
     {% endfor %}
 
     <link rel="stylesheet" href="{{ site.data.assets[origin].webfonts | relative_url }}">
-
   {% endif %}
 
   <!-- GA -->
-  {% if jekyll.environment == 'production'
-      and site.google_analytics.id != empty and site.google_analytics.id %}
+  {% if jekyll.environment == 'production' and site.google_analytics.id != empty and site.google_analytics.id %}
     <link rel="preconnect" href="https://www.google-analytics.com" crossorigin="use-credentials">
     <link rel="dns-prefetch" href="https://www.google-analytics.com">
 
@@ -82,7 +79,11 @@
 
     {% if site.google_analytics.pv.proxy_endpoint %}
       {% assign proxy_url = site.google_analytics.pv.proxy_endpoint
-          | replace: "https://", "" | split: "/" | first | prepend: "https://" %}
+        | replace: 'https://', ''
+        | split: '/'
+        | first
+        | prepend: 'https://'
+      %}
       <link rel="preconnect" href="{{ proxy_url }}" crossorigin="use-credentials">
       <link rel="dns-prefetch" href="{{ proxy_url }}">
     {% endif %}
diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
@@ -29,7 +29,9 @@ html {
 }
 
 body {
-  background: var(--body-bg);
+  background: var(--main-bg);
+  padding: env(safe-area-inset-top) env(safe-area-inset-right)
+    env(safe-area-inset-bottom) env(safe-area-inset-left);
   color: var(--text-color);
   -webkit-font-smoothing: antialiased;
   font-family: 'Source Sans Pro', 'Microsoft Yahei', sans-serif;
diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss
@@ -4,9 +4,8 @@
 
 @mixin dark-scheme {
   /* Framework color */
-  --body-bg: var(--main-bg);
-  --mask-bg: rgb(68, 69, 70);
   --main-bg: rgb(27, 27, 30);
+  --mask-bg: rgb(68, 69, 70);
   --main-border-color: rgb(44, 45, 45);
 
   /* Common color */
diff --git a/_sass/colors/light-typography.scss b/_sass/colors/light-typography.scss
@@ -4,9 +4,8 @@
 
 @mixin light-scheme {
   /* Framework color */
-  --body-bg: #fafafa;
-  --mask-bg: #c1c3c5;
   --main-bg: white;
+  --mask-bg: #c1c3c5;
   --main-border-color: #f3f3f3;
 
   /* Common color */
