From 03ceb64ecb3fb66d235b2e106bcc4099c3d9dda8 Mon Sep 17 00:00:00 2001 From: Pascal Abresch Date: Tue, 2 Nov 2021 20:15:25 +0100 Subject: [PATCH] Userguide CSS: add dark mode Change-Id: I94c308ea22a304f061544a28e1490b9c004191d2 Reviewed-on: https://review.haiku-os.org/c/haiku/+/5329 Reviewed-by: nephele Reviewed-by: waddlesplash --- userguide/Haiku-doc.css | 196 ++++++++++++++++++++++++--------- userguide/images/HaikuDark.svg | 110 ++++++++++++++++++ userguide/images/LeafDark.png | Bin 0 -> 4880 bytes userguide/images/LeafDark.svg | 30 +++++ 4 files changed, 286 insertions(+), 50 deletions(-) create mode 100644 userguide/images/HaikuDark.svg create mode 100644 userguide/images/LeafDark.png create mode 100644 userguide/images/LeafDark.svg diff --git a/userguide/Haiku-doc.css b/userguide/Haiku-doc.css index 8c7051cd..6ed0a436 100644 --- a/userguide/Haiku-doc.css +++ b/userguide/Haiku-doc.css @@ -9,16 +9,105 @@ * Humdinger * Vincent Duvert * Augustin Cavalier + * Pascal R. G. Abresch */ +/* don't use @media (prefers-color-scheme: light) here, so it runs correctly in browsers that don't + understand it and thus expect a light mode as is the default for html */ +:root { + color-scheme: light dark; + + --CanvasBackground: #FFF; + --CanvasText: #333333; + --LinkText: #dc3c01; + --VisitedLinkText: #892601; + --TableBackground: #ff4500; + --TableHeaderBackground: #e0e0e0; + --HeaderColor: #0c3762; + --MenuColor: #24225e; + --ActiveLinkText: #ff4500; + --HeaderText: #0c3762; + --ButtonBackground: #e8e8e8; + --ButtonBorder: #c7c7c7; + --InfoBackground: #e4ffde; + --WarningBackground: #fffbc6; + --StopBackground: #ffeae6; + --SecondaryCanvas: #e0e0e0; + --TertiaryCanvas: #efefef; +} + + +@media (prefers-color-scheme: dark) { + :root { + --CanvasBackground: #000; + --LinkText: #f24000; + --VisitedLinkText: #bf3401; + --ActiveLinkText: #ff4500; + --HeaderText: #1b80e5; + --ButtonBorder: #666; + --InfoBackground: #0d2f3f; + --WarningBackground: #453b07; + --StopBackground: #4d0000; + --MenuColor: #5c57f2; + } + @media (prefers-contrast: no-preference) { + :root { + --CanvasText: #DDD; + --ButtonBackground: #444; + --SecondaryCanvas: #222; + --TertiaryCanvas: #131313; + } + } + @media (prefers-contrast: more) { + :root { + --CanvasText: #EFEFEF; + --ButtonBackground: #222; + --SecondaryCanvas: #111; + --TertiaryCanvas: #080808; + } + } + @media (prefers-contrast: less) { + :root { + --CanvasText: #AAA; + --ButtonBackground: #444; + } + } +} + + +@media (forced-colors: active) { + :root { + /* Userguide specific */ + /* "Normal values" */ + --HeaderText: LinkText; + --CanvasBackground: Canvas; + --CanvasText: CanvasText; + --LinkText: LinkText; + --VisitedLinkText: VisitedText; + --ActiveLinkText: ActiveText; + --ButtonBackground: ButtonFace; + --ButtonBorder: ButtonBorder; + --InputBackground: Field; + --InputText: FieldText; + --HighlightBackground: Highlight; + --HighlightText: HighlightText; + --SelectedBackground: SelectedItem; + --SelectedText: SelectedItemText; + --MarkBackground: Mark; + --MarkText: MarkText; + --DisabledText: GrayText; + } +} + + html { margin: 0; padding: 0; - background: #FFF; + background: var(--CanvasBackground); } body { - color: #333333; + color: var(--CanvasText); line-height: 1.5; margin: 0; padding: 0; @@ -30,35 +119,35 @@ body { a:link { font-weight: bold; text-decoration: none; - color: #dc3c01; + color: var(--LinkText); } a:visited { font-weight: bold; text-decoration: none; - color: #892601; + color: var(--VisitedLinkText) } a:hover, a:active { text-decoration: underline; - color: #ff4500; + color: var(--ActiveLinkText); } /* Some headers act as anchors, don't give them a hover effect */ h2 a:hover, a:active { text-decoration: none; - color: #0c3762; + color: var(--HeaderText); } h3 a:hover, a:active { text-decoration: none; - color: #0c3762; + color: var(--HeaderText); } h4 a:hover, a:active { text-decoration: none; - color: #0c3762; + color: var(--HeaderText); } h5 a:hover, a:active { text-decoration: none; - color: #0c3762; + color: var(--HeaderText); } /* heading and navigation */ @@ -68,7 +157,7 @@ h5 a:hover, a:active { left: 0; top: 0; height: 84px; - background: #eeeeee; + background: var(--SecondaryCanvas); } #banner div { @@ -76,6 +165,13 @@ h5 a:hover, a:active { height: 100%; margin: 0 auto; } + +/* HaikuDark.svg -> Haiku logo - white on black - normal; canvas resize to width 254 */ +@media (prefers-color-scheme: dark) { + #banner div { + background: url(images/HaikuDark.svg) no-repeat scroll 6px 8px, url(images/LeafDark.png) no-repeat scroll 10px 0; + } +} @media (min-width:768px) { #banner { min-width: 59em; @@ -90,7 +186,7 @@ h5 a:hover, a:active { position: relative; top: 51px; left: 272px; - color: #333333; + color: var(--CanvasText); text-transform: uppercase; letter-spacing: 3px; font-family: Myriad Pro,Myriad Web Pro Regular,Lucida Grande,Geneva,Trebuchet MS,sans-serif; @@ -102,7 +198,7 @@ div.nav { position: relative; left: 0; top: 0; - background: #e0e0e0; + background: var(--SecondaryCanvas); padding: 0; } @media (min-width:768px) { @@ -151,7 +247,7 @@ ul.lang-menu img { ul.lang-menu li { margin-left: 10px; - background: #e0e0e0; + background-color: var(--SecondaryCanvas); display: none; } @@ -160,7 +256,7 @@ ul.lang-menu:hover li { } ul.lang-menu li:hover { - background-color: #efefef; + background-color: var(--TertiaryCanvas); } ul.lang-menu li.now { @@ -176,7 +272,7 @@ ul.lang-menu li.now span.dropdown-caret { } ul.lang-menu li a { - color: black; + color: var(--CanvasText); text-decoration: none; font-weight: normal; display: block; @@ -226,13 +322,13 @@ table.index { z-index: 10; } table.index tr.heading { - background-color: #e0e0e0; + background-color: var(--SecondaryCanvas); text-align: center; font-weight: bold; font-size: 1.1em; } table.index tr.index { - background-color: #eeeeee; + background-color: var(--TertiaryCanvas); } table.index td { padding: 5px 20px; @@ -241,11 +337,11 @@ table.index td { table.index a:link, table.index a:visited { font-weight: normal; text-decoration: none; - color: #dc3c01; + color: var(--VisitedLinkText) } table.index a:hover, table.index a:active { text-decoration: underline; - color: #ff4500; + color: var(--ActiveLinkText); } @@ -269,27 +365,27 @@ table.index a:hover, table.index a:active { min-height: 42px; } .box-info { - background: #e4ffde url(images/alert_info_32.png) 15px 15px no-repeat; + background: var(--InfoBackground) url(images/alert_info_32.png) 15px 15px no-repeat; } .box-warning { - background: #fffbc6 url(images/alert_warning_32.png) 15px 15px no-repeat; + background: var(--WarningBackground) url(images/alert_warning_32.png) 15px 15px no-repeat; } .box-stop { - background: #ffeae6 url(images/alert_stop_32.png) 15px 15px no-repeat; + background: var(--StopBackground) url(images/alert_stop_32.png) 15px 15px no-repeat; } /* More layout and styles */ h1 { font-size: 1.3em; font-weight: bold; - color: #0c3762; + color: var(--HeaderText); border-bottom: dotted thin #e0e0e0; margin-bottom: 25px; } h2 { font-size: 1.3em; font-weight: normal; - color: #0c3762; + color: var(--HeaderText); border-bottom: dotted thin #e0e0e0; margin-top: 18px; } @@ -301,20 +397,20 @@ h2 { h3 { font-size: 1.2em; font-weight: normal; - color: #0c3762; + color: var(--HeaderText); border-bottom: dotted thin #e0e0e0; margin-top: 30px; } h4 { font-size: 1.1em; font-weight: normal; - color: #0c3762; + color: var(--HeaderText); margin-top: 30px; } h5 { font-size: 1.0em; font-weight: normal; - color: #0c3762; + color: var(--HeaderText); margin-top: 30px; } p { @@ -337,17 +433,17 @@ td.onelinetop { white-space: nowrap; } tt { - background-color: #e2e2e2; - font-size: 1.0em; - font-family: monospace; + background-color: var(--SecondaryCanvas); + font-size: 1.0em; + font-family: monospace; } pre { - border-color: #0c3762; + border-color: var(--HeaderText); border-style: dotted; border-width: thin; margin: 0em; padding: 1.5em; - background-color: #f0f0f0; + background-color: var(--SecondaryCanvas); } pre.terminal { /* Terminal output*/ border-color: #ffb11f; @@ -359,43 +455,43 @@ pre.terminal { /* Terminal output*/ color: #ffb11f; } .menu { /* Menu */ - font-size: 1.0em; - font-family: serif; - font-style: italic; - color: #24225e; + font-size: 1.0em; + font-family: serif; + font-style: italic; + color: var(--MenuColor); } .button { /* Button */ - font-size: 1.0em; - font-family: serif; - font-style: italic; + font-size: 1.0em; + font-family: serif; + font-style: italic; color: #33583c; } .app { /* GUI Application name */ - font-size: 1.0em; - font-family: serif; - font-style: italic; + font-size: 1.0em; + font-family: serif; + font-style: italic; color: #5e1c1c; } .cli { /* Shell command or file */ - background-color: #e8e8e8; - font-size: 0.9em; - font-family: monospace; + background-color: var(--SecondaryCanvas); + font-size: 0.9em; + font-family: monospace; } .path { /* File path */ - background-color: #e8e8e8; - font-size: 0.9em; - font-family: monospace; + background-color: var(--SecondaryCanvas); + font-size: 0.9em; + font-family: monospace; } .key { /* Shortcut (separate with   */ -webkit-border-radius: 3px; -khtml-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; - border-color: #c7c7c7; + border-color: var(--ButtonBorder); border-style: solid; border-width: 1px; padding: 0px 2px 0px 2px; - background-color: #e8e8e8; + background-color: var(--ButtonBackground); font-family: serif; font-variant: small-caps; font-size: 0.8em; diff --git a/userguide/images/HaikuDark.svg b/userguide/images/HaikuDark.svg new file mode 100644 index 00000000..8f72241a --- /dev/null +++ b/userguide/images/HaikuDark.svg @@ -0,0 +1,110 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/userguide/images/LeafDark.png b/userguide/images/LeafDark.png new file mode 100644 index 0000000000000000000000000000000000000000..713a5f0dc52ecfdf7f5b17b1ccc96556042fe99a GIT binary patch literal 4880 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 Xml7iH6}iCDIo$G!goGK+8i literal 0 HcmV?d00001 diff --git a/userguide/images/LeafDark.svg b/userguide/images/LeafDark.svg new file mode 100644 index 00000000..f22705c1 --- /dev/null +++ b/userguide/images/LeafDark.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + +