From 9d42b7be2b2b42416a231e918dffd2bb9a8906ca Mon Sep 17 00:00:00 2001 From: James Panther <4462786+jpanther@users.noreply.github.com> Date: Fri, 29 Oct 2021 11:15:00 +1100 Subject: [PATCH 1/4] =?UTF-8?q?=F0=9F=9A=A7=20Add=20dark=20mode=20toggle?= =?UTF-8?q?=20button?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/compiled/main.css | 679 +++++++++++++++-------------------- assets/icons/moon.svg | 1 + assets/icons/sun.svg | 1 + layouts/partials/footer.html | 64 ++-- layouts/partials/head.html | 18 + tailwind.config.js | 2 +- 6 files changed, 350 insertions(+), 415 deletions(-) create mode 100644 assets/icons/moon.svg create mode 100644 assets/icons/sun.svg diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index d2acda6b..d4b87fe5 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -1057,10 +1057,8 @@ body a, body button { color: var(--color-primary-700); } -@media (prefers-color-scheme: dark) { - .article-pagination a:hover .article-pagination-direction { - color: var(--color-primary-400); - } +.dark .article-pagination a:hover .article-pagination-direction { + color: var(--color-primary-400); } /* -- Chroma Highlight -- */ @@ -1073,14 +1071,9 @@ body a, body button { color: var(--color-neutral-700); } -@media (prefers-color-scheme: dark) { - .prose .chroma { - background-color: var(--color-neutral-700); - } - - .prose .chroma { - color: var(--color-neutral-200); - } +.dark .prose .chroma { + background-color: var(--color-neutral-700); + color: var(--color-neutral-200); } /* Other */ @@ -1129,10 +1122,8 @@ body a, body button { padding-right: 1rem; } -@media (prefers-color-scheme: dark) { - .chroma .hl { - background-color: var(--color-primary-900); - } +.dark .chroma .hl { + background-color: var(--color-primary-900); } .chroma .lntd .hl { @@ -1146,10 +1137,8 @@ body a, body button { color: var(--color-neutral-600); } -@media (prefers-color-scheme: dark) { - .chroma .lnt { - color: var(--color-neutral-300); - } +.dark .chroma .lnt { + color: var(--color-neutral-300); } .chroma .lnt { @@ -1163,10 +1152,8 @@ body a, body button { color: var(--color-neutral-600); } -@media (prefers-color-scheme: dark) { - .chroma .ln { - color: var(--color-neutral-300); - } +.dark .chroma .ln { + color: var(--color-neutral-300); } .chroma .ln { @@ -1180,10 +1167,8 @@ body a, body button { color: var(--color-primary-600); } -@media (prefers-color-scheme: dark) { - .chroma .k { - color: var(--color-primary-300); - } +.dark .chroma .k { + color: var(--color-primary-300); } /* KeywordConstant */ @@ -1193,10 +1178,8 @@ body a, body button { color: var(--color-secondary-400); } -@media (prefers-color-scheme: dark) { - .chroma .kc { - color: var(--color-secondary-500); - } +.dark .chroma .kc { + color: var(--color-secondary-500); } /* KeywordDeclaration */ @@ -1205,10 +1188,8 @@ body a, body button { color: var(--color-primary-600); } -@media (prefers-color-scheme: dark) { - .chroma .kd { - color: var(--color-primary-300); - } +.dark .chroma .kd { + color: var(--color-primary-300); } /* KeywordNamespace */ @@ -1217,10 +1198,8 @@ body a, body button { color: var(--color-primary-600); } -@media (prefers-color-scheme: dark) { - .chroma .kn { - color: var(--color-primary-300); - } +.dark .chroma .kn { + color: var(--color-primary-300); } /* KeywordPseudo */ @@ -1229,10 +1208,8 @@ body a, body button { color: var(--color-primary-600); } -@media (prefers-color-scheme: dark) { - .chroma .kp { - color: var(--color-primary-300); - } +.dark .chroma .kp { + color: var(--color-primary-300); } /* KeywordReserved */ @@ -1241,10 +1218,8 @@ body a, body button { color: var(--color-primary-600); } -@media (prefers-color-scheme: dark) { - .chroma .kr { - color: var(--color-primary-300); - } +.dark .chroma .kr { + color: var(--color-primary-300); } /* KeywordType */ @@ -1253,10 +1228,8 @@ body a, body button { color: var(--color-secondary-400); } -@media (prefers-color-scheme: dark) { - .chroma .kt { - color: var(--color-secondary-600); - } +.dark .chroma .kt { + color: var(--color-secondary-600); } /* Name */ @@ -1265,10 +1238,8 @@ body a, body button { color: var(--color-secondary-900); } -@media (prefers-color-scheme: dark) { - .chroma .n { - color: var(--color-secondary-200); - } +.dark .chroma .n { + color: var(--color-secondary-200); } /* NameAttribute */ @@ -1277,10 +1248,8 @@ body a, body button { color: var(--color-secondary-800); } -@media (prefers-color-scheme: dark) { - .chroma .na { - color: var(--color-secondary-300); - } +.dark .chroma .na { + color: var(--color-secondary-300); } /* NameBuiltin */ @@ -1289,10 +1258,8 @@ body a, body button { color: var(--color-secondary-800); } -@media (prefers-color-scheme: dark) { - .chroma .nb { - color: var(--color-secondary-300); - } +.dark .chroma .nb { + color: var(--color-secondary-300); } /* NameBuiltinPseudo */ @@ -1301,10 +1268,8 @@ body a, body button { color: var(--color-secondary-800); } -@media (prefers-color-scheme: dark) { - .chroma .bp { - color: var(--color-secondary-300); - } +.dark .chroma .bp { + color: var(--color-secondary-300); } /* NameClass */ @@ -1313,10 +1278,8 @@ body a, body button { color: var(--color-primary-600); } -@media (prefers-color-scheme: dark) { - .chroma .nc { - color: var(--color-primary-300); - } +.dark .chroma .nc { + color: var(--color-primary-300); } /* NameConstant */ @@ -1326,10 +1289,8 @@ body a, body button { color: var(--color-secondary-400); } -@media (prefers-color-scheme: dark) { - .chroma .no { - color: var(--color-secondary-500); - } +.dark .chroma .no { + color: var(--color-secondary-500); } /* NameDecorator */ @@ -1338,10 +1299,8 @@ body a, body button { color: var(--color-secondary-900); } -@media (prefers-color-scheme: dark) { - .chroma .nd { - color: var(--color-secondary-200); - } +.dark .chroma .nd { + color: var(--color-secondary-200); } /* NameEntity */ @@ -1350,10 +1309,8 @@ body a, body button { color: var(--color-secondary-900); } -@media (prefers-color-scheme: dark) { - .chroma .ni { - color: var(--color-secondary-200); - } +.dark .chroma .ni { + color: var(--color-secondary-200); } /* NameException */ @@ -1363,10 +1320,8 @@ body a, body button { color: var(--color-secondary-400); } -@media (prefers-color-scheme: dark) { - .chroma .ne { - color: var(--color-secondary-500); - } +.dark .chroma .ne { + color: var(--color-secondary-500); } /* NameFunction */ @@ -1375,10 +1330,8 @@ body a, body button { color: var(--color-secondary-600); } -@media (prefers-color-scheme: dark) { - .chroma .nf { - color: var(--color-secondary-500); - } +.dark .chroma .nf { + color: var(--color-secondary-500); } /* NameFunctionMagic */ @@ -1387,10 +1340,8 @@ body a, body button { color: var(--color-primary-600); } -@media (prefers-color-scheme: dark) { - .chroma .fm { - color: var(--color-primary-300); - } +.dark .chroma .fm { + color: var(--color-primary-300); } /* NameLabel */ @@ -1399,10 +1350,8 @@ body a, body button { color: var(--color-secondary-900); } -@media (prefers-color-scheme: dark) { - .chroma .nl { - color: var(--color-secondary-200); - } +.dark .chroma .nl { + color: var(--color-secondary-200); } /* NameNamespace */ @@ -1411,10 +1360,8 @@ body a, body button { color: var(--color-primary-600); } -@media (prefers-color-scheme: dark) { - .chroma .nn { - color: var(--color-primary-300); - } +.dark .chroma .nn { + color: var(--color-primary-300); } /* NameOther */ @@ -1423,10 +1370,8 @@ body a, body button { color: var(--color-secondary-800); } -@media (prefers-color-scheme: dark) { - .chroma .nx { - color: var(--color-secondary-300); - } +.dark .chroma .nx { + color: var(--color-secondary-300); } /* NameProperty */ @@ -1441,10 +1386,8 @@ body a, body button { color: var(--color-secondary-800); } -@media (prefers-color-scheme: dark) { - .chroma .nt { - color: var(--color-secondary-300); - } +.dark .chroma .nt { + color: var(--color-secondary-300); } /* NameVariable */ @@ -1453,10 +1396,8 @@ body a, body button { color: var(--color-secondary-400); } -@media (prefers-color-scheme: dark) { - .chroma .nv { - color: var(--color-secondary-600); - } +.dark .chroma .nv { + color: var(--color-secondary-600); } /* NameVariableClass */ @@ -1465,10 +1406,8 @@ body a, body button { color: var(--color-primary-600); } -@media (prefers-color-scheme: dark) { - .chroma .vc { - color: var(--color-primary-300); - } +.dark .chroma .vc { + color: var(--color-primary-300); } /* NameVariableGlobal */ @@ -1478,10 +1417,8 @@ body a, body button { color: var(--color-secondary-400); } -@media (prefers-color-scheme: dark) { - .chroma .vg { - color: var(--color-secondary-500); - } +.dark .chroma .vg { + color: var(--color-secondary-500); } /* NameVariableInstance */ @@ -1490,10 +1427,8 @@ body a, body button { color: var(--color-secondary-400); } -@media (prefers-color-scheme: dark) { - .chroma .vi { - color: var(--color-secondary-600); - } +.dark .chroma .vi { + color: var(--color-secondary-600); } /* NameVariableMagic */ @@ -1502,10 +1437,8 @@ body a, body button { color: var(--color-secondary-400); } -@media (prefers-color-scheme: dark) { - .chroma .vm { - color: var(--color-secondary-600); - } +.dark .chroma .vm { + color: var(--color-secondary-600); } /* Literal */ @@ -1514,10 +1447,8 @@ body a, body button { color: var(--color-primary-800); } -@media (prefers-color-scheme: dark) { - .chroma .l { - color: var(--color-primary-400); - } +.dark .chroma .l { + color: var(--color-primary-400); } /* LiteralDate */ @@ -1526,10 +1457,8 @@ body a, body button { color: var(--color-primary-800); } -@media (prefers-color-scheme: dark) { - .chroma .ld { - color: var(--color-primary-400); - } +.dark .chroma .ld { + color: var(--color-primary-400); } /* LiteralString */ @@ -1538,10 +1467,8 @@ body a, body button { color: var(--color-primary-800); } -@media (prefers-color-scheme: dark) { - .chroma .s { - color: var(--color-primary-400); - } +.dark .chroma .s { + color: var(--color-primary-400); } /* LiteralStringAffix */ @@ -1550,10 +1477,8 @@ body a, body button { color: var(--color-primary-800); } -@media (prefers-color-scheme: dark) { - .chroma .sa { - color: var(--color-primary-400); - } +.dark .chroma .sa { + color: var(--color-primary-400); } /* LiteralStringBacktick */ @@ -1562,10 +1487,8 @@ body a, body button { color: var(--color-primary-800); } -@media (prefers-color-scheme: dark) { - .chroma .sb { - color: var(--color-primary-400); - } +.dark .chroma .sb { + color: var(--color-primary-400); } /* LiteralStringChar */ @@ -1574,10 +1497,8 @@ body a, body button { color: var(--color-primary-800); } -@media (prefers-color-scheme: dark) { - .chroma .sc { - color: var(--color-primary-400); - } +.dark .chroma .sc { + color: var(--color-primary-400); } /* LiteralStringDelimiter */ @@ -1586,10 +1507,8 @@ body a, body button { color: var(--color-primary-800); } -@media (prefers-color-scheme: dark) { - .chroma .dl { - color: var(--color-primary-400); - } +.dark .chroma .dl { + color: var(--color-primary-400); } /* LiteralStringDoc */ @@ -1598,10 +1517,8 @@ body a, body button { color: var(--color-primary-800); } -@media (prefers-color-scheme: dark) { - .chroma .sd { - color: var(--color-primary-400); - } +.dark .chroma .sd { + color: var(--color-primary-400); } /* LiteralStringDouble */ @@ -1610,10 +1527,8 @@ body a, body button { color: var(--color-primary-800); } -@media (prefers-color-scheme: dark) { - .chroma .s2 { - color: var(--color-primary-400); - } +.dark .chroma .s2 { + color: var(--color-primary-400); } /* LiteralStringEscape */ @@ -1623,10 +1538,8 @@ body a, body button { color: var(--color-secondary-400); } -@media (prefers-color-scheme: dark) { - .chroma .se { - color: var(--color-secondary-500); - } +.dark .chroma .se { + color: var(--color-secondary-500); } /* LiteralStringHeredoc */ @@ -1635,10 +1548,8 @@ body a, body button { color: var(--color-primary-800); } -@media (prefers-color-scheme: dark) { - .chroma .sh { - color: var(--color-primary-400); - } +.dark .chroma .sh { + color: var(--color-primary-400); } /* LiteralStringInterpol */ @@ -1647,10 +1558,8 @@ body a, body button { color: var(--color-primary-800); } -@media (prefers-color-scheme: dark) { - .chroma .si { - color: var(--color-primary-400); - } +.dark .chroma .si { + color: var(--color-primary-400); } /* LiteralStringOther */ @@ -1659,10 +1568,8 @@ body a, body button { color: var(--color-primary-800); } -@media (prefers-color-scheme: dark) { - .chroma .sx { - color: var(--color-primary-400); - } +.dark .chroma .sx { + color: var(--color-primary-400); } /* LiteralStringRegex */ @@ -1672,10 +1579,8 @@ body a, body button { color: var(--color-primary-800); } -@media (prefers-color-scheme: dark) { - .chroma .sr { - color: var(--color-primary-400); - } +.dark .chroma .sr { + color: var(--color-primary-400); } /* LiteralStringSingle */ @@ -1684,10 +1589,8 @@ body a, body button { color: var(--color-primary-800); } -@media (prefers-color-scheme: dark) { - .chroma .s1 { - color: var(--color-primary-400); - } +.dark .chroma .s1 { + color: var(--color-primary-400); } /* LiteralStringSymbol */ @@ -1697,10 +1600,8 @@ body a, body button { color: var(--color-primary-800); } -@media (prefers-color-scheme: dark) { - .chroma .ss { - color: var(--color-primary-400); - } +.dark .chroma .ss { + color: var(--color-primary-400); } /* LiteralNumber */ @@ -1709,10 +1610,8 @@ body a, body button { color: var(--color-secondary-400); } -@media (prefers-color-scheme: dark) { - .chroma .m { - color: var(--color-secondary-600); - } +.dark .chroma .m { + color: var(--color-secondary-600); } /* LiteralNumberBin */ @@ -1721,10 +1620,8 @@ body a, body button { color: var(--color-secondary-400); } -@media (prefers-color-scheme: dark) { - .chroma .mb { - color: var(--color-secondary-600); - } +.dark .chroma .mb { + color: var(--color-secondary-600); } /* LiteralNumberFloat */ @@ -1733,10 +1630,8 @@ body a, body button { color: var(--color-secondary-400); } -@media (prefers-color-scheme: dark) { - .chroma .mf { - color: var(--color-secondary-600); - } +.dark .chroma .mf { + color: var(--color-secondary-600); } /* LiteralNumberHex */ @@ -1745,10 +1640,8 @@ body a, body button { color: var(--color-secondary-400); } -@media (prefers-color-scheme: dark) { - .chroma .mh { - color: var(--color-secondary-600); - } +.dark .chroma .mh { + color: var(--color-secondary-600); } /* LiteralNumberInteger */ @@ -1757,10 +1650,8 @@ body a, body button { color: var(--color-secondary-400); } -@media (prefers-color-scheme: dark) { - .chroma .mi { - color: var(--color-secondary-600); - } +.dark .chroma .mi { + color: var(--color-secondary-600); } /* LiteralNumberIntegerLong */ @@ -1769,10 +1660,8 @@ body a, body button { color: var(--color-secondary-400); } -@media (prefers-color-scheme: dark) { - .chroma .il { - color: var(--color-secondary-600); - } +.dark .chroma .il { + color: var(--color-secondary-600); } /* LiteralNumberOct */ @@ -1781,10 +1670,8 @@ body a, body button { color: var(--color-secondary-400); } -@media (prefers-color-scheme: dark) { - .chroma .mo { - color: var(--color-secondary-600); - } +.dark .chroma .mo { + color: var(--color-secondary-600); } /* Operator */ @@ -1800,10 +1687,8 @@ body a, body button { color: var(--color-primary-400); } -@media (prefers-color-scheme: dark) { - .chroma .ow { - color: var(--color-primary-600); - } +.dark .chroma .ow { + color: var(--color-primary-600); } /* Punctuation */ @@ -1818,10 +1703,8 @@ body a, body button { color: var(--color-neutral-400); } -@media (prefers-color-scheme: dark) { - .chroma .c { - color: var(--color-neutral-500); - } +.dark .chroma .c { + color: var(--color-neutral-500); } /* CommentHashbang */ @@ -1832,10 +1715,8 @@ body a, body button { color: var(--color-neutral-400); } -@media (prefers-color-scheme: dark) { - .chroma .ch { - color: var(--color-neutral-500); - } +.dark .chroma .ch { + color: var(--color-neutral-500); } /* CommentMultiline */ @@ -1845,10 +1726,8 @@ body a, body button { color: var(--color-neutral-400); } -@media (prefers-color-scheme: dark) { - .chroma .cm { - color: var(--color-neutral-500); - } +.dark .chroma .cm { + color: var(--color-neutral-500); } /* CommentSingle */ @@ -1858,10 +1737,8 @@ body a, body button { color: var(--color-neutral-400); } -@media (prefers-color-scheme: dark) { - .chroma .c1 { - color: var(--color-neutral-500); - } +.dark .chroma .c1 { + color: var(--color-neutral-500); } /* CommentSpecial */ @@ -1871,10 +1748,8 @@ body a, body button { color: var(--color-neutral-400); } -@media (prefers-color-scheme: dark) { - .chroma .cs { - color: var(--color-neutral-500); - } +.dark .chroma .cs { + color: var(--color-neutral-500); } /* CommentPreproc */ @@ -1884,10 +1759,8 @@ body a, body button { color: var(--color-neutral-400); } -@media (prefers-color-scheme: dark) { - .chroma .cp { - color: var(--color-neutral-500); - } +.dark .chroma .cp { + color: var(--color-neutral-500); } /* CommentPreprocFile */ @@ -1897,10 +1770,8 @@ body a, body button { color: var(--color-neutral-400); } -@media (prefers-color-scheme: dark) { - .chroma .cpf { - color: var(--color-neutral-500); - } +.dark .chroma .cpf { + color: var(--color-neutral-500); } /* Generic */ @@ -1937,10 +1808,8 @@ body a, body button { color: var(--color-primary-800); } -@media (prefers-color-scheme: dark) { - .chroma .gi { - color: var(--color-primary-400); - } +.dark .chroma .gi { + color: var(--color-primary-400); } /* GenericOutput */ @@ -1949,10 +1818,8 @@ body a, body button { color: var(--color-primary-800); } -@media (prefers-color-scheme: dark) { - .chroma .go { - color: var(--color-primary-400); - } +.dark .chroma .go { + color: var(--color-primary-400); } /* GenericPrompt */ @@ -1961,10 +1828,8 @@ body a, body button { color: var(--color-primary-800); } -@media (prefers-color-scheme: dark) { - .chroma .gp { - color: var(--color-primary-400); - } +.dark .chroma .gp { + color: var(--color-primary-400); } /* GenericStrong */ @@ -2191,6 +2056,10 @@ body a, body button { cursor: default; } +.cursor-pointer { + cursor: pointer; +} + .list-none { list-style-type: none; } @@ -2263,6 +2132,14 @@ body a, body button { border-color: var(--color-primary-400); } +.border-neutral-200 { + border-color: var(--color-neutral-200); +} + +.border-neutral-700 { + border-color: var(--color-neutral-700); +} + .bg-neutral { background-color: var(--color-neutral); } @@ -2507,6 +2384,14 @@ body a, body button { margin-top: 2rem; } +.hover\:border-primary-400:hover { + border-color: var(--color-primary-400); +} + +.hover\:border-primary-500:hover { + border-color: var(--color-primary-500); +} + .hover\:bg-primary-600:hover { background-color: var(--color-primary-600); } @@ -2527,14 +2412,14 @@ body a, body button { color: var(--color-primary-400); } -.hover\:text-neutral:hover { - color: var(--color-neutral); -} - .hover\:text-primary-500:hover { color: var(--color-primary-500); } +.hover\:text-neutral:hover { + color: var(--color-neutral); +} + .hover\:underline:hover { text-decoration: underline; } @@ -2562,165 +2447,171 @@ body a, body button { text-decoration-thickness: 2px; } -@media (prefers-color-scheme: dark) { - .dark\:prose-light { - color: var(--color-neutral-400); - } +.dark .dark\:prose-light { + color: var(--color-neutral-400); +} - .dark\:prose-light a { - color: var(--color-primary-400); - -webkit-text-decoration-color: var(--color-neutral-500); - text-decoration-color: var(--color-neutral-500); - } +.dark .dark\:prose-light a { + color: var(--color-primary-400); + -webkit-text-decoration-color: var(--color-neutral-500); + text-decoration-color: var(--color-neutral-500); +} - .dark\:prose-light strong { - color: var(--color-neutral); - } +.dark .dark\:prose-light strong { + color: var(--color-neutral); +} - .dark\:prose-light ol > li::before { - color: var(--color-neutral-400); - } +.dark .dark\:prose-light ol > li::before { + color: var(--color-neutral-400); +} - .dark\:prose-light ul > li::before { - background-color: var(--color-neutral-600); - } +.dark .dark\:prose-light ul > li::before { + background-color: var(--color-neutral-600); +} - .dark\:prose-light hr { - border-color: var(--color-neutral-500); - } +.dark .dark\:prose-light hr { + border-color: var(--color-neutral-500); +} - .dark\:prose-light blockquote { - color: var(--color-neutral-200); - border-left-color: var(--color-primary-900); - } +.dark .dark\:prose-light blockquote { + color: var(--color-neutral-200); + border-left-color: var(--color-primary-900); +} - .dark\:prose-light h1 { - color: var(--color-neutral); - } +.dark .dark\:prose-light h1 { + color: var(--color-neutral); +} - .dark\:prose-light h2 { - color: var(--color-neutral); - } +.dark .dark\:prose-light h2 { + color: var(--color-neutral); +} - .dark\:prose-light h3 { - color: var(--color-neutral); - } +.dark .dark\:prose-light h3 { + color: var(--color-neutral); +} - .dark\:prose-light h4 { - color: var(--color-neutral); - } +.dark .dark\:prose-light h4 { + color: var(--color-neutral); +} - .dark\:prose-light figure figcaption { - color: var(--color-neutral-400); - } +.dark .dark\:prose-light figure figcaption { + color: var(--color-neutral-400); +} - .dark\:prose-light code { - color: var(--color-secondary-400); - } +.dark .dark\:prose-light code { + color: var(--color-secondary-400); +} - .dark\:prose-light a code { - color: var(--color-neutral); - } +.dark .dark\:prose-light a code { + color: var(--color-neutral); +} - .dark\:prose-light pre { - color: var(--color-neutral-200); - background-color: var(--color-neutral-700); - } +.dark .dark\:prose-light pre { + color: var(--color-neutral-200); + background-color: var(--color-neutral-700); +} - .dark\:prose-light pre code { - color: var(--color-neutral-200); - } +.dark .dark\:prose-light pre code { + color: var(--color-neutral-200); +} - .dark\:prose-light thead { - color: var(--color-neutral); - border-bottom-color: var(--color-neutral-500); - } +.dark .dark\:prose-light thead { + color: var(--color-neutral); + border-bottom-color: var(--color-neutral-500); +} - .dark\:prose-light tbody tr { - border-bottom-color: var(--color-neutral-700); - } +.dark .dark\:prose-light tbody tr { + border-bottom-color: var(--color-neutral-700); +} - .dark\:prose-light kbd { - background-color: var(--color-neutral-700); - color: var(--color-neutral-300); - } +.dark .dark\:prose-light kbd { + background-color: var(--color-neutral-700); + color: var(--color-neutral-300); +} - .dark\:prose-light mark { - background-color: var(--color-secondary-400); - } +.dark .dark\:prose-light mark { + background-color: var(--color-secondary-400); +} - .dark\:border-neutral-600 { - border-color: var(--color-neutral-600); - } +.dark .dark\:inline { + display: inline; +} - .dark\:border-primary-600 { - border-color: var(--color-primary-600); - } +.dark .dark\:hidden { + display: none; +} - .dark\:bg-neutral-800 { - background-color: var(--color-neutral-800); - } +.dark .dark\:border-neutral-600 { + border-color: var(--color-neutral-600); +} - .dark\:bg-primary-400 { - background-color: var(--color-primary-400); - } +.dark .dark\:border-primary-600 { + border-color: var(--color-primary-600); +} - .dark\:bg-neutral-700 { - background-color: var(--color-neutral-700); - } +.dark .dark\:bg-neutral-800 { + background-color: var(--color-neutral-800); +} - .dark\:bg-primary-900 { - background-color: var(--color-primary-900); - } +.dark .dark\:bg-primary-400 { + background-color: var(--color-primary-400); +} - .dark\:bg-primary-800 { - background-color: var(--color-primary-800); - } +.dark .dark\:bg-neutral-700 { + background-color: var(--color-neutral-700); +} - .dark\:text-neutral-500 { - color: var(--color-neutral-500); - } +.dark .dark\:bg-primary-900 { + background-color: var(--color-primary-900); +} - .dark\:text-neutral { - color: var(--color-neutral); - } +.dark .dark\:bg-primary-800 { + background-color: var(--color-primary-800); +} - .dark\:text-neutral-300 { - color: var(--color-neutral-300); - } +.dark .dark\:text-neutral-500 { + color: var(--color-neutral-500); +} - .dark\:text-primary-400 { - color: var(--color-primary-400); - } +.dark .dark\:text-neutral { + color: var(--color-neutral); +} - .dark\:text-neutral-600 { - color: var(--color-neutral-600); - } +.dark .dark\:text-neutral-300 { + color: var(--color-neutral-300); +} - .dark\:text-neutral-800 { - color: var(--color-neutral-800); - } +.dark .dark\:text-primary-400 { + color: var(--color-primary-400); +} - .dark\:underline-neutral-600 { - -webkit-text-decoration-color: var(--color-neutral-600); - text-decoration-color: var(--color-neutral-600); - } +.dark .dark\:text-neutral-600 { + color: var(--color-neutral-600); +} - .dark\:hover\:bg-primary-400:hover { - background-color: var(--color-primary-400); - } +.dark .dark\:text-neutral-800 { + color: var(--color-neutral-800); +} - .dark\:hover\:\!bg-primary-700:hover { - background-color: var(--color-primary-700) !important; - } +.dark .dark\:underline-neutral-600 { + -webkit-text-decoration-color: var(--color-neutral-600); + text-decoration-color: var(--color-neutral-600); +} - .dark\:hover\:text-primary-400:hover { - color: var(--color-primary-400); - } +.dark .dark\:hover\:bg-primary-400:hover { + background-color: var(--color-primary-400); +} - .dark\:hover\:text-neutral-800:hover { - color: var(--color-neutral-800); - } +.dark .dark\:hover\:\!bg-primary-700:hover { + background-color: var(--color-primary-700) !important; +} + +.dark .dark\:hover\:text-primary-400:hover { + color: var(--color-primary-400); +} + +.dark .dark\:hover\:text-neutral-800:hover { + color: var(--color-neutral-800); } @media (min-width: 640px) { diff --git a/assets/icons/moon.svg b/assets/icons/moon.svg new file mode 100644 index 00000000..9fbb0a34 --- /dev/null +++ b/assets/icons/moon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/sun.svg b/assets/icons/sun.svg new file mode 100644 index 00000000..1a586124 --- /dev/null +++ b/assets/icons/sun.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index d95c02ce..f0122e77 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -16,26 +16,50 @@ {{ end }} - {{/* Copyright */}} -

- {{- with .Site.Copyright }} - {{ . | emojify | markdownify }} - {{- else }} - © - {{ now.Format "2006" }} - {{ .Site.Author.name | markdownify | emojify }} - {{- end }} -

- {{/* Theme attribution */}} - {{ if .Site.Params.attribution | default true }} -

- {{ $hugo := printf `Hugo` - }} - {{ $congo := printf `Congo` }} - {{ i18n "footer.powered_by" (dict "Hugo" $hugo "Congo" $congo) | safeHTML }} -

- {{ end }} +
+
+ {{/* Copyright */}} +

+ {{- with .Site.Copyright }} + {{ . | emojify | markdownify }} + {{- else }} + © + {{ now.Format "2006" }} + {{ .Site.Author.name | markdownify | emojify }} + {{- end }} +

+ {{/* Theme attribution */}} + {{ if .Site.Params.attribution | default true }} +

+ {{ $hugo := printf `Hugo` + }} + {{ $congo := printf `Congo` }} + {{ i18n "footer.powered_by" (dict "Hugo" $hugo "Congo" $congo) | safeHTML }} +

+ {{ end }} +
+
+ + +
+
{{/* Extend footer - eg. for extra scripts, etc. */}} {{ if templates.Exists "partials/extend-footer.html" }} {{ partialCached "extend-footer.html" . }} diff --git a/layouts/partials/head.html b/layouts/partials/head.html index f9eb9534..3ab0bb23 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -62,6 +62,24 @@ integrity="{{ $customStyles.Data.Integrity }}" /> {{ end }} + {{/* Icons */}} {{ if templates.Exists "partials/favicons.html" }} {{ partialCached "favicons.html" .Site }} diff --git a/tailwind.config.js b/tailwind.config.js index 33f31476..5c1de438 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -10,7 +10,7 @@ module.exports = { "./themes/congo/content/**/*.{html,md}", ], }, - darkMode: "media", + darkMode: "class", theme: { colors: { transparent: "transparent", From 81824a1a00d014654fce44b1ffdc854c8307caab Mon Sep 17 00:00:00 2001 From: James Panther <4462786+jpanther@users.noreply.github.com> Date: Fri, 29 Oct 2021 12:07:21 +1100 Subject: [PATCH 2/4] =?UTF-8?q?=F0=9F=9A=A7=20Add=20config=20parameters=20?= =?UTF-8?q?for=20dark=20appearance?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- config/_default/params.toml | 2 ++ exampleSite/content/docs/configuration.md | 2 ++ layouts/_default/baseof.html | 5 ++- layouts/partials/footer.html | 43 ++++++++++++----------- layouts/partials/head.html | 39 +++++++++++--------- 5 files changed, 54 insertions(+), 37 deletions(-) diff --git a/config/_default/params.toml b/config/_default/params.toml index e246751d..875dc423 100644 --- a/config/_default/params.toml +++ b/config/_default/params.toml @@ -6,6 +6,8 @@ # https://jpanther.github.io/congo/docs/configuration/#theme-parameters colorScheme = "congo" +# darkMode = "auto" +# darkToggle = false # logo = "img/logo.jpg" # description = "My awesome website" # mainSections = ["section1", "section2"] diff --git a/exampleSite/content/docs/configuration.md b/exampleSite/content/docs/configuration.md index 402092ad..4303d4e2 100644 --- a/exampleSite/content/docs/configuration.md +++ b/exampleSite/content/docs/configuration.md @@ -56,6 +56,8 @@ Many of the article defaults here can be overridden on a per article basis by sp |Name|Type|Default|Description| | --- | --- | --- | --- | |`colorScheme`|string|`"congo"`|The theme colour scheme to use. Valid values are `congo` (default), `avocado`, `ocean`, `fire` and `slate`. Refer to the [Colour Schemes]({{< ref "getting-started#colour-schemes" >}}) section for more details.| +|`darkMode`|boolean or string|`"auto"`|The preferred theme appearance for dark mode. Set to `true` to force dark appearance or `false` to force light appearance. Using `"auto"` will defer to the user's operating system preference.| +|`darkToggle`|boolean|`false`|When `darkMode` is set to `"auto"`, this parameter determines whether or not to show the appearance toggle in the site footer. The browser's local storage is used to persist the user's preference.| |`logo`|string|_Not set_|The relative path to the site logo file within the `assets/` folder. The logo file should be provided at 2x resolution and supports any image dimensions.| |`description`|string|_Not set_|The description of the website for metadata purposes.| |`mainSections`|array of strings|_Not set_|The sections that should be displayed in the recent articles list. If not provided the section with the greatest number of articles is used.| diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 340e219f..a5b0efa9 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,5 +1,8 @@ - + {{- partial "head.html" . -}} {{ end }} -
- - -
+ {{/* Dark mode toggle */}} + {{ if and (.Site.Params.darkToggle | default false) (eq (.Site.Params.darkMode | default "auto") "auto") }} +
+ + +
+ {{ end }} {{/* Extend footer - eg. for extra scripts, etc. */}} {{ if templates.Exists "partials/extend-footer.html" }} diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 3ab0bb23..3e057eca 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -62,24 +62,31 @@ integrity="{{ $customStyles.Data.Integrity }}" /> {{ end }} - + loadPreferredAppearance(); + window.matchMedia("(prefers-color-scheme: dark)").addListener(loadPreferredAppearance); + + {{ else }} + + {{ end }} {{/* Icons */}} {{ if templates.Exists "partials/favicons.html" }} {{ partialCached "favicons.html" .Site }} From 6f2200f274a5185304c1adaecdb7e1a2efe24944 Mon Sep 17 00:00:00 2001 From: James Panther <4462786+jpanther@users.noreply.github.com> Date: Fri, 29 Oct 2021 12:10:38 +1100 Subject: [PATCH 3/4] =?UTF-8?q?=F0=9F=93=9D=20Update=20readme?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 7608d8e6..8143da7f 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@ Congo is designed to be a simple, lightweight theme for [Hugo](https://gohugo.io - Built with Tailwind CSS JIT for minified stylesheets without any excess code - Fully responsive layout - Multiple colour schemes (or fully customise your own) -- Dark mode (auto-switching based upon browser) +- Dark mode (forced on/off or auto-switching with user toggle) - Highly customisable configuration - Multiple homepage layouts - Flexible with any content types, taxonomies and menus From 210175ba44ddf0e8f3a4c0a348d7171cd271d78f Mon Sep 17 00:00:00 2001 From: James Panther <4462786+jpanther@users.noreply.github.com> Date: Fri, 29 Oct 2021 12:30:42 +1100 Subject: [PATCH 4/4] =?UTF-8?q?=F0=9F=8C=90=20Add=20i18n=20strings=20for?= =?UTF-8?q?=20appearance=20toggle?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- i18n/en.yaml | 2 ++ i18n/fr.yaml | 4 +++- i18n/zh.yaml | 3 +++ layouts/partials/footer.html | 4 ++-- 4 files changed, 10 insertions(+), 3 deletions(-) diff --git a/i18n/en.yaml b/i18n/en.yaml index 323877b4..1c539b3b 100644 --- a/i18n/en.yaml +++ b/i18n/en.yaml @@ -16,6 +16,8 @@ error: 404_description: "It seems that the page you've requested does not exist." footer: + dark_appearance: "Switch to dark appearance" + light_appearance: "Switch to light appearance" powered_by: "Powered by {{ .Hugo }} & {{ .Congo }}" list: diff --git a/i18n/fr.yaml b/i18n/fr.yaml index 014cdf5c..bfe438fd 100644 --- a/i18n/fr.yaml +++ b/i18n/fr.yaml @@ -1,7 +1,7 @@ article: anchor_label: "Ancre" draft: "Brouillon" - edit_title: "Editer" + edit_title: "Editer" reading_time: one: "{{ .Count }} min" other: "{{ .Count }} mins" @@ -16,6 +16,8 @@ error: 404_description: "Il semble que la page que vous cherchiez n'existe pas." footer: + # dark_appearance: "Switch to dark appearance" + # light_appearance: "Switch to light appearance" powered_by: "Propulsé par {{ .Hugo }} & {{ .Congo }}" list: diff --git a/i18n/zh.yaml b/i18n/zh.yaml index 8237c110..18bb1e52 100644 --- a/i18n/zh.yaml +++ b/i18n/zh.yaml @@ -15,6 +15,8 @@ error: 404_description: "您请求的页面似乎不存在。" footer: + # dark_appearance: "Switch to dark appearance" + # light_appearance: "Switch to light appearance" powered_by: "由 {{ .Hugo }} & {{ .Congo }} 强力驱动" list: @@ -25,6 +27,7 @@ sharing: email: "通过电子邮件发送" facebook: "分享到 Facebook" linkedin: "分享到 LinkedIn" + # pinterest: "Pin on Pinterest" reddit: "提交到 Reddit" twitter: "分享到 Twitter" diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 018efad0..33c773ab 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -47,7 +47,7 @@ onclick="setPreferredAppearance('dark');" oncontextmenu="setPreferredAppearance('default'); return false;" class="inline px-2 py-1 border rounded-md border-neutral-200 dark:hidden hover:text-primary-500 hover:border-primary-400" - title="Switch to dark appearance" + title="{{ i18n "footer.dark_appearance" }}" > {{ partial "icon.html" "moon" }} @@ -56,7 +56,7 @@ onclick="setPreferredAppearance('light');" oncontextmenu="setPreferredAppearance('default'); return false;" class="hidden px-2 py-1 border rounded-md cursor-pointer dark:inline border-neutral-700 hover:text-primary-400 hover:border-primary-500" - title="Switch to light appearance" + title="{{ i18n "footer.light_appearance" }}" > {{ partial "icon.html" "sun" }}