Skip to content

Commit 99a087f

Browse files
raymondkneippraymondkneipp
committed
add css ligth-dark function
Signed-off-by: Raymond Kneipp <[email protected]>
1 parent 5526b9a commit 99a087f

File tree

2 files changed

+39
-22
lines changed

2 files changed

+39
-22
lines changed

‎layouts/partials/header.html‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,19 @@
3838
<body class="{{ .Scratch.Get "body_class" }}">
3939
<header id="header">
4040
<div class="header-logo">
41-
<a href="/"><img src="/img/AsahiLinux_logo.svg?{{ slicestr (readFile "static/img/AsahiLinux_logo.svg" | md5) 0 8 }}" class="logo" alt=""></a>
41+
<a href="/">
42+
<picture>
43+
<!-- User prefers light mode -->
44+
<source srcset="/img/AsahiLinux_logo.svg?{{ slicestr (readFile "static/img/AsahiLinux_logo.svg" | md5) 0 8 }}"
45+
media="(prefers-color-scheme: light)" />
46+
<!-- User prefers dark mode -->
47+
<source srcset="/img/AsahiLinux_logo_darkbg.svg?{{ slicestr (readFile "static/img/AsahiLinux_logo_darkbg.svg" | md5) 0 8 }}"
48+
media="(prefers-color-scheme: dark)" />
49+
<!-- Fallback for no preference -->
50+
<img src="/img/AsahiLinux_logo.svg?{{ slicestr (readFile "static/img/AsahiLinux_logo.svg" | md5) 0 8 }}"
51+
class="logo" alt="Asahi Linux Logo" />
52+
</picture>
53+
</a>
4254
</div>
4355
<div class="header-menu">
4456
<ul class="menu-container flex-container">

‎static/css/main.css‎

Lines changed: 26 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -489,8 +489,13 @@ template {
489489
}
490490
/* CSS Reset End */
491491

492+
:root {
493+
color-scheme: light dark;
494+
}
495+
492496
body {
493497
font-family: 'Noto Sans JP', sans-serif;
498+
background-color: light-dark(#fff, #171717);
494499
}
495500

496501
h1 {
@@ -541,7 +546,7 @@ body {
541546
display: flex;
542547
flex-direction: column;
543548
min-height: 100vh;
544-
color: #2C2C2C;
549+
color: light-dark(#2C2C2C, #E5E5E5);
545550
}
546551

547552
body.landing h1 {
@@ -580,7 +585,7 @@ div.header-menu {
580585
justify-content: center;
581586
margin-top: 15px;
582587
padding: 20px 0px;
583-
border-top: solid 1px #2C2C2C;
588+
border-top: solid 1px light-dark(#2C2C2C, #E5E5E5);
584589
}
585590

586591
.menu-container li {
@@ -590,11 +595,11 @@ div.header-menu {
590595
}
591596

592597
header {
593-
border-bottom: solid 1px #B8E1FF;
598+
border-bottom: solid 1px light-dark(#B8E1FF, #002a47);
594599
}
595600

596601
#eye-catch {
597-
background-color: #EFEFEF;
602+
background-color: light-dark(#EFEFEF, #151515);
598603
}
599604

600605
#eye-catch > div {
@@ -627,7 +632,7 @@ to {
627632

628633
#eye-catch > div > div:nth-of-type(2) {
629634
padding: 50px 0px 50px 60px;
630-
border-left: solid 1px #6D6D6D;
635+
border-left: solid 1px light-dark(#6D6D6D, #2C2C2C);
631636
}
632637

633638
#eye-catch > div > div > img {
@@ -688,7 +693,7 @@ h3 .more i {
688693
}
689694

690695
#eye-catch .more {
691-
color: #A61200;
696+
color: light-dark(#A61200, #d11800);
692697
}
693698

694699
#eye-catch h3 {
@@ -703,7 +708,7 @@ h3 .more i {
703708
}
704709

705710
body.landing #community {
706-
background-color: #9D2D48;
711+
background-color: light-dark(#9D2D48, #5f1b2b);
707712
}
708713

709714
div.center-title {
@@ -715,7 +720,7 @@ div.center-title h1, div.center-title h2 {
715720
}
716721

717722
.community-links {
718-
background-color: #7A162E;
723+
background-color: light-dark(#7A162E, #3f121d);
719724
}
720725

721726
.community-links div {
@@ -815,30 +820,30 @@ div.chat-button a {
815820

816821
/* Download */
817822
body.landing #download {
818-
background-color: #4ecbaa;
823+
background-color: light-dark(#4ecbaa, #1d6350);
819824
}
820825

821826
.download-card {
822-
background-color: #057f5f;
827+
background-color: light-dark(#057f5f, #034533);
823828
}
824829

825830
/* Contribute */
826831
body.landing #contribute {
827-
background-color: #FFF;
832+
background-color: inherit;
828833
}
829834

830835
.contribute-card {
831-
background-color: #848484;
836+
background-color: light-dark(#848484, #101010);
832837
}
833838

834839
/* Documentation */
835840

836841
body.landing #documentation {
837-
background-color: #D7EAFF;
842+
background-color: light-dark(#D7EAFF, #00408a);
838843
}
839844

840845
.documentation-card {
841-
background-color: #556E8A;
846+
background-color: light-dark(#556E8A, #313f4f);
842847
}
843848

844849
/* Centered cards */
@@ -874,7 +879,7 @@ body.landing #documentation {
874879
/* Single post */
875880

876881
#post-section {
877-
background-color: #EFEFEF;
882+
background-color: light-dark(#EFEFEF, #151515);
878883
min-height: 70vh;
879884
}
880885

@@ -936,12 +941,12 @@ body.landing #documentation {
936941
}
937942

938943
.post a {
939-
color: #E20052;
944+
color: light-dark(#E20052, #ff2977);
940945
text-decoration: underline;
941946
}
942947

943948
code {
944-
color: #0D4F1A;
949+
color: light-dark(#0D4F1A, #20c541);
945950
padding: 0 .4em;
946951
font-weight: normal;
947952
font-size: 85%;
@@ -980,7 +985,7 @@ div.curlsh pre {
980985

981986
blockquote {
982987
border: solid 1px;
983-
background-color: #e2e2e2;
988+
background-color: light-dark(#e2e2e2, #202020);
984989
padding: 15px;
985990
padding-bottom: 5px;
986991
}
@@ -1042,7 +1047,7 @@ ul.blog-nav li {
10421047
list-style: none;
10431048
margin: 0px;
10441049
padding: 5px 15px;
1045-
background-color: #dedede;
1050+
background-color: light-dark(#e0e0e0, #202020);
10461051
}
10471052

10481053
ul.blog-nav li.nav-spacer {
@@ -1066,7 +1071,7 @@ ul.blog-nav > li > a > .fa-arrow-right {
10661071

10671072
div#breadcrumbs, div.post-bottom {
10681073
padding: 10px;
1069-
background-color: #dedede;
1074+
background-color: light-dark(#e0e0e0, #202020);
10701075
}
10711076

10721077
div#breadcrumbs a {
@@ -1084,7 +1089,7 @@ div.post-bottom {
10841089

10851090
/* Post list */
10861091
.post-list ul li {
1087-
background-color: #e0e0e0;
1092+
background-color: light-dark(#e0e0e0, #202020);
10881093
list-style: none;
10891094
margin-left: 0px;
10901095
padding: 15px;

0 commit comments

Comments
 (0)