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

Resolves #918
This commit is contained in:
Cotes Chung 2023-03-17 01:17:06 +08:00
parent 3c7934abf0
commit 820ba62e9e
No known key found for this signature in database
GPG key ID: 0D9E54843167A808
4 changed files with 23 additions and 22 deletions

View file

@ -1,13 +1,17 @@
<!-- <!-- The Head -->
The Head
-->
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <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 page.layout == 'home' or page.layout == 'post' %}
{% if site.google_analytics.pv.proxy_endpoint %} {% if site.google_analytics.pv.proxy_endpoint %}
<meta name="pv-proxy-endpoint" content="{{ site.google_analytics.pv.proxy_endpoint }}"> <meta name="pv-proxy-endpoint" content="{{ site.google_analytics.pv.proxy_endpoint }}">
{% endif %} {% endif %}
@ -15,7 +19,6 @@
{% if site.google_analytics.pv.cache_path %} {% if site.google_analytics.pv.cache_path %}
<meta name="pv-cache-path" content="{{ site.google_analytics.pv.cache_path | relative_url }}"> <meta name="pv-cache-path" content="{{ site.google_analytics.pv.cache_path | relative_url }}">
{% endif %} {% endif %}
{% endif %} {% endif %}
{% capture seo_tags %} {% capture seo_tags %}
@ -40,40 +43,34 @@
{% endif %} {% endif %}
{% assign seo_tags = seo_tags | replace: target, replacement %} {% assign seo_tags = seo_tags | replace: target, replacement %}
{% endunless %} {% endunless %}
{% endif %} {% endif %}
{{ seo_tags }} {{ seo_tags }}
<title> <title>
{%- unless page.layout == "home" -%} {%- unless page.layout == 'home' -%}
{{ page.title | append: " | "}} {{ page.title | append: ' | ' }}
{%- endunless -%} {%- endunless -%}
{{ site.title }} {{ site.title }}
</title> </title>
{% include favicons.html %} {% include favicons.html %}
{% if site.resources.ignore_env != jekyll.environment and site.resources.self_hosted %} {% if site.resources.ignore_env != jekyll.environment and site.resources.self_hosted %}
<link href="{{ site.data.assets[origin].webfonts | relative_url }}" rel="stylesheet"> <link href="{{ site.data.assets[origin].webfonts | relative_url }}" rel="stylesheet">
{% else %} {% else %}
{% for cdn in site.data.assets[origin].cdns %} {% for cdn in site.data.assets[origin].cdns %}
<link rel="preconnect" href="{{ cdn.url }}" {{ cdn.args }}> <link rel="preconnect" href="{{ cdn.url }}" {{ cdn.args }}>
<link rel="dns-prefetch" href="{{ cdn.url }}" {{ cdn.args }}> <link rel="dns-prefetch" href="{{ cdn.url }}" {{ cdn.args }}>
{% endfor %} {% endfor %}
<link rel="stylesheet" href="{{ site.data.assets[origin].webfonts | relative_url }}"> <link rel="stylesheet" href="{{ site.data.assets[origin].webfonts | relative_url }}">
{% endif %} {% endif %}
<!-- GA --> <!-- GA -->
{% if jekyll.environment == 'production' {% if jekyll.environment == 'production' and site.google_analytics.id != empty and site.google_analytics.id %}
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="preconnect" href="https://www.google-analytics.com" crossorigin="use-credentials">
<link rel="dns-prefetch" href="https://www.google-analytics.com"> <link rel="dns-prefetch" href="https://www.google-analytics.com">
@ -82,7 +79,11 @@
{% if site.google_analytics.pv.proxy_endpoint %} {% if site.google_analytics.pv.proxy_endpoint %}
{% assign proxy_url = 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="preconnect" href="{{ proxy_url }}" crossorigin="use-credentials">
<link rel="dns-prefetch" href="{{ proxy_url }}"> <link rel="dns-prefetch" href="{{ proxy_url }}">
{% endif %} {% endif %}

View file

@ -29,7 +29,9 @@ html {
} }
body { 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); color: var(--text-color);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
font-family: 'Source Sans Pro', 'Microsoft Yahei', sans-serif; font-family: 'Source Sans Pro', 'Microsoft Yahei', sans-serif;

View file

@ -4,9 +4,8 @@
@mixin dark-scheme { @mixin dark-scheme {
/* Framework color */ /* Framework color */
--body-bg: var(--main-bg);
--mask-bg: rgb(68, 69, 70);
--main-bg: rgb(27, 27, 30); --main-bg: rgb(27, 27, 30);
--mask-bg: rgb(68, 69, 70);
--main-border-color: rgb(44, 45, 45); --main-border-color: rgb(44, 45, 45);
/* Common color */ /* Common color */

View file

@ -4,9 +4,8 @@
@mixin light-scheme { @mixin light-scheme {
/* Framework color */ /* Framework color */
--body-bg: #fafafa;
--mask-bg: #c1c3c5;
--main-bg: white; --main-bg: white;
--mask-bg: #c1c3c5;
--main-border-color: #f3f3f3; --main-border-color: #f3f3f3;
/* Common color */ /* Common color */