From 0e645cba5a32374bc5d514c191281b970bd0f4c2 Mon Sep 17 00:00:00 2001 From: Kuinox Date: Wed, 15 Nov 2023 13:38:32 +0100 Subject: [PATCH] Fixed light theme. (#21) --- generateAssets.js | 10 ++++ src/app/LandingSegment.css | 2 +- src/app/SecondSegment.css | 8 ++- src/app/blog/[articleName]/CommentScript.tsx | 14 ++++- src/app/blog/page.css | 24 +++++++- src/app/community/page.css | 12 +++- src/app/layout.css | 63 ++++++++++++++------ src/app/layout.tsx | 9 ++- src/components/Article.css | 53 ++++++++++++++-- src/components/CodeViewer/CodeTab.css | 8 ++- src/components/CodeViewer/CodeViewer.css | 8 ++- src/components/CodeViewer/Highlight.css | 10 +++- src/components/CodeViewer/Highlight.tsx | 1 - src/components/DiscordWidget.css | 22 ++++++- src/components/DracoButton.css | 14 ++++- 15 files changed, 213 insertions(+), 45 deletions(-) diff --git a/generateAssets.js b/generateAssets.js index ab32426..a207197 100644 --- a/generateAssets.js +++ b/generateAssets.js @@ -64,6 +64,16 @@ async function main() { "src/generated/emojiTypes.ts", `export type EmojiName = ${emojis.map((s) => `"${s}"`).join(" | ")};` ); + + // copy hljs themes to public folder + await fs.promises.copyFile( + "node_modules/highlight.js/styles/atom-one-light.css", + "public/generated/atom-one-light.css" + ); + await fs.promises.copyFile( + "node_modules/highlight.js/styles/atom-one-dark.css", + "public/generated/atom-one-dark.css" + ); } main(); diff --git a/src/app/LandingSegment.css b/src/app/LandingSegment.css index fc32d01..783608a 100644 --- a/src/app/LandingSegment.css +++ b/src/app/LandingSegment.css @@ -20,7 +20,7 @@ .getstarted { background-color: #009a94; - color: white; + color: white !important; border: none; } diff --git a/src/app/SecondSegment.css b/src/app/SecondSegment.css index 43f939c..800f2ce 100644 --- a/src/app/SecondSegment.css +++ b/src/app/SecondSegment.css @@ -1,5 +1,5 @@ .second-segment { - background-color: #1c1f26; + background-color: #eceef1; padding-top: 2em; border-top: 1px solid #e5e7eb28; display: flex; @@ -8,6 +8,12 @@ padding-bottom: 6em; } +@media (prefers-color-scheme: dark) { + .second-segment { + background-color: #1c1f26; + } +} + .splash-code-viewer { width: 70%; } diff --git a/src/app/blog/[articleName]/CommentScript.tsx b/src/app/blog/[articleName]/CommentScript.tsx index c61bba5..5d61836 100644 --- a/src/app/blog/[articleName]/CommentScript.tsx +++ b/src/app/blog/[articleName]/CommentScript.tsx @@ -1,12 +1,19 @@ "use client"; -import { useEffect, useRef } from "react"; +import { useEffect, useRef, useState } from "react"; export default function CommentScript() { // this is an "hack" because react doesn't like custom attribute in script tag. // So we gotta build the script tag manually. const commentBox = useRef(null); + const [isDarkMode, setIsDarkMode] = useState(false); useEffect(() => { + const matcher = window.matchMedia("(prefers-color-scheme: dark)"); + const onChange = ({ matches }: { matches: boolean }) => setIsDarkMode(matches); + matcher.addEventListener("change", onChange); + + const isDarkMode = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches; + const theme = isDarkMode ? "dark_dimmed" : "light"; const scriptEl = document.createElement("script"); scriptEl.src = "https://giscus.app/client.js"; scriptEl.setAttribute("data-repo", "Draco-lang/draco-lang.org"); @@ -18,7 +25,7 @@ export default function CommentScript() { scriptEl.setAttribute("data-reactions-enabled", "1"); scriptEl.setAttribute("data-emit-metadata", "0"); scriptEl.setAttribute("data-input-position", "top"); - scriptEl.setAttribute("data-theme", "dark_dimmed"); + scriptEl.setAttribute("data-theme", theme); scriptEl.setAttribute("data-lang", "en"); scriptEl.setAttribute("crossorigin", "anonymous"); scriptEl.async = true; @@ -28,8 +35,9 @@ export default function CommentScript() { return () => { current.innerHTML = ""; + matcher.removeEventListener("change", onChange); }; - }, []); + }, [isDarkMode]); return
; } diff --git a/src/app/blog/page.css b/src/app/blog/page.css index f18b963..a16ae6b 100644 --- a/src/app/blog/page.css +++ b/src/app/blog/page.css @@ -8,13 +8,12 @@ } .blog-entries > a { - background-color: #1c1f26; - border: 1px solid #e5e7eb28; + background-color: #eceef1; + border: 1px solid rgba(0, 0, 0, 10%); border-radius: 5px; display: flex; flex-direction: row; height: 10.75rem; - color: white; text-decoration: none; margin-left: 1em; margin-right: 1em; @@ -32,10 +31,27 @@ margin-top: 0; margin-bottom: 0.5rem; font-size: 1.25rem; + color: rgb(42, 42, 42); } .article-preview-left-part { padding: 1.75rem 1.75rem 1.25rem; + color: rgb(117, 117, 117); +} + +@media (prefers-color-scheme: dark) { + .blog-entries > a { + background-color: #1c1f26; + border-color: #e5e7eb28; + } + + .article-preview-left-part { + color: white; + } + + .blog-entries > a h1 { + color: white; + } } /* stylelint-disable-next-line media-feature-range-notation */ @@ -45,6 +61,7 @@ } } +/* stylelint-disable-next-line media-feature-range-notation */ @media (max-width: 650px) { .blog-entries > a { flex-direction: column-reverse; @@ -52,6 +69,7 @@ align-items: center; height: 20rem; } + .blog-entries > a img { max-width: 100%; min-height: 30%; diff --git a/src/app/community/page.css b/src/app/community/page.css index e45b746..6b6206b 100644 --- a/src/app/community/page.css +++ b/src/app/community/page.css @@ -11,8 +11,8 @@ flex-direction: column; justify-content: left; height: 500px; - border: 1px solid #e5e7eb28; - background-color: #333740; + border: 1px solid rgba(0, 0, 0, 10%); + background-color: rgb(246, 247, 249); border-radius: 5px; margin: 10px; padding: 0 30px 0 30px; @@ -22,6 +22,13 @@ flex-shrink: 1; } +@media (prefers-color-scheme: dark) { + .community-content > div { + background-color: #333740; + border-color: #e5e7eb28; + } +} + .community-content p { display: flex; align-items: flex-start; @@ -53,6 +60,7 @@ margin-bottom: 1em; } +/* stylelint-disable-next-line media-feature-range-notation */ @media (max-width: 650px) { .community-content { margin: 0 1em 2em 1em; diff --git a/src/app/layout.css b/src/app/layout.css index dfe7f80..aaa1b20 100644 --- a/src/app/layout.css +++ b/src/app/layout.css @@ -1,5 +1,4 @@ body { - background-color: #282c34; min-height: 100vh; display: flex; flex-direction: column; @@ -10,17 +9,6 @@ body { "Droid Sans", "Helvetica Neue", sans-serif; } -@media (prefers-color-scheme: dark) { - body { - font-weight: 350; - color: white; - } - - button { - color: white; - } -} - a { color: #00c8bd; } @@ -40,10 +28,10 @@ code { align-items: center; justify-content: space-between; position: fixed; - width: 100vw; + width: 100%; box-sizing: border-box; - background-color: rgba(40, 44, 52, 95%); backdrop-filter: blur(16px) saturate(2); + background-color: rgba(255, 255, 255); border-bottom: 0 solid #e5e7eb; flex-grow: 1; z-index: 100; @@ -125,19 +113,37 @@ code { } body:has(.page-docs) .active-on-docs { - outline: 1px solid #00c8bd; + outline: 1px solid #00857f; } body:has(.page-specs) .active-on-specs { - outline: 1px solid #00c8bd; + outline: 1px solid #00857f; } body:has(.page-community) .active-on-community { - outline: 1px solid #00c8bd; + outline: 1px solid #00857f; } body:has(.page-blog) .active-on-blog { - outline: 1px solid #00c8bd; + outline: 1px solid #00857f; +} + +@media (prefers-color-scheme: dark) { + body:has(.page-docs) .active-on-docs { + outline: 1px solid #00c8bd; + } + + body:has(.page-specs) .active-on-specs { + outline: 1px solid #00c8bd; + } + + body:has(.page-community) .active-on-community { + outline: 1px solid #00c8bd; + } + + body:has(.page-blog) .active-on-blog { + outline: 1px solid #00c8bd; + } } body:has(.page-docs) .active-on-docs:hover { @@ -206,7 +212,6 @@ h6 { left: 0; top: 64px; width: 100%; - background-color: rgba(40, 44, 52); height: calc(100vh - 64px); align-items: flex-start; justify-content: flex-start; @@ -217,3 +222,23 @@ h6 { display: flex; } } + +@media (prefers-color-scheme: dark) { + button { + color: white; + } + + body { + background-color: #282c34; + font-weight: 350; + color: white; + } + + .links { + background-color: rgba(40, 44, 52); + } + + .top-bar { + background-color: rgba(40, 44, 52, 95%); + } +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 7a26374..a626ca7 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -22,7 +22,8 @@ export default async function RootLayout({ children }: Params) { // Basically next.js prevent default behavior when clicking on a link // So we can't close it with pure html/css // So we add a lightweight script that close it when the user navigate to another page - const scriptHTML = ` + // The css part is to get dynamic theme for the code viewer. + const rawHTML = ` + `; const specs = await getSpecsInfo(); @@ -78,7 +83,7 @@ export default async function RootLayout({ children }: Params) { Blog -
+
pre { @@ -131,12 +165,19 @@ .clipboard-icon { height: 1em; width: 0.8em; - background-color: white; background-repeat: no-repeat; + background-color: #c9c8c8; mask-image: url("/clipboard.svg"); + mask-repeat: no-repeat; cursor: pointer; } +@media (prefers-color-scheme: dark) { + .clipboard-icon { + background-color: white; + } +} + .copy-ok { background-color: transparent; mask-image: none; diff --git a/src/components/CodeViewer/CodeTab.css b/src/components/CodeViewer/CodeTab.css index c0a87cd..90e85e3 100644 --- a/src/components/CodeViewer/CodeTab.css +++ b/src/components/CodeViewer/CodeTab.css @@ -2,7 +2,7 @@ background-color: transparent; font-size: 16px; padding: 0.5em 1em; - outline: 1px solid #e5e7eb28; + outline: 1px solid rgba(0, 0, 0, 10%); display: inline-block; border: 0; /* borders produces doubles borders in tabs */ margin-left: 1px; @@ -27,3 +27,9 @@ input[type="radio"]:checked + div.tab-content > label { background-color: #0000; cursor: default; } + +@media (prefers-color-scheme: dark) { + .tab-buttons { + outline-color: #e5e7eb28; + } +} diff --git a/src/components/CodeViewer/CodeViewer.css b/src/components/CodeViewer/CodeViewer.css index a183c4e..60892be 100644 --- a/src/components/CodeViewer/CodeViewer.css +++ b/src/components/CodeViewer/CodeViewer.css @@ -3,13 +3,19 @@ } .code-container { - border: 1px solid #e5e7eb28; + border: 1px solid rgba(0, 0, 0, 10%); text-align: left; border-radius: 0 5px 5px 5px; min-width: 0; overflow-x: auto; } +@media (prefers-color-scheme: dark) { + .code-container { + border-color: #e5e7eb28; + } +} + .code-container code { border-radius: 0 5px 5px 5px; } diff --git a/src/components/CodeViewer/Highlight.css b/src/components/CodeViewer/Highlight.css index cbab7f3..d682e72 100644 --- a/src/components/CodeViewer/Highlight.css +++ b/src/components/CodeViewer/Highlight.css @@ -2,6 +2,12 @@ display: block; overflow-x: auto; padding: 1em; - background-color: #282c34; - color: #abb2bf; + background-color: #f6f8fa; +} + +@media (prefers-color-scheme: dark) { + .code-viewer { + background-color: #282c34; + color: #abb2bf; + } } diff --git a/src/components/CodeViewer/Highlight.tsx b/src/components/CodeViewer/Highlight.tsx index 56cfc24..c35ea70 100644 --- a/src/components/CodeViewer/Highlight.tsx +++ b/src/components/CodeViewer/Highlight.tsx @@ -1,7 +1,6 @@ import hljs from "highlight.js"; import { HTMLProps } from "react"; import "./Highlight.css"; -import "highlight.js/styles/atom-one-dark.css"; export default function Highlight(prop: HTMLProps & { language: string; children: string }) { const { children, language, ...restProps } = prop; diff --git a/src/components/DiscordWidget.css b/src/components/DiscordWidget.css index 75e99f0..578ab94 100644 --- a/src/components/DiscordWidget.css +++ b/src/components/DiscordWidget.css @@ -7,9 +7,10 @@ border-radius: 4px; max-width: 350px; min-width: 200px; - width: auto; + width: 100%; user-select: none; align-items: flex-start; + border: 1px transparent solid; } .discord-widget .content { @@ -106,3 +107,22 @@ flex-direction: row; align-items: center; } + +@media (prefers-color-scheme: light) { + .discord-widget { + background-color: rgb(242, 243, 245); + border-color: rgba(0, 0, 0, 10%); + } + + .discord-widget .server-name { + color: rgb(6, 6, 7); + } + + .discord-widget .status-counts { + color: rgb(78, 80, 88); + } + + .discord-widget .server-icon { + background-color: white; + } +} diff --git a/src/components/DracoButton.css b/src/components/DracoButton.css index 3059142..8e1e06b 100644 --- a/src/components/DracoButton.css +++ b/src/components/DracoButton.css @@ -22,9 +22,19 @@ } a.draco-button { - color: white; + color: #00857f; } a.draco-button:visited { - color: white; + color: #00857f; +} + +@media (prefers-color-scheme: dark) { + a.draco-button { + color: white; + } + + a.draco-button:visited { + color: white; + } }