Dark theme prep

Author: x1y

content/_index.md

@@ -31,7 +31,7 @@ We are available on Discord, IRC, Matrix and Telegram, in the Forum and on Reddi
 ![Multiple PinePhones with different operating systems.](/img/Pinephone_revisions.jpg)
 {{</ box >}}
 
-{{< box style="full themevlblue pad" >}}
+{{< box style="full bg_palecyan pad" >}}
   {{< box_news title="News" type="blog" amount="2" style="rows" >}}
 {{</ box >}}
 
@@ -50,7 +50,7 @@ To achieve this, we actively work with the development community and champion en
   {{</ box >}}
 {{</ box >}}
 
-{{< box style="themewhite pad" >}}
+{{< box style="pad" >}}
   {{< box style="f50 rows" title="Innovation meets collaboration" content="markdown" >}}
 The PINE64 community is large, vibrant and diverse. Independent and partner-project developers, hackers and hardware enthusiasts, privacy advocates and FOSS geeks - you name it, we’ve got 'em all. 
 
@@ -66,7 +66,7 @@ They all contribute to the project thereby shaping it and determining its course
     {{< box style="pad" type="image" link="/img/pinenotebg1.png" width="400" >}}{{</ box >}}
 {{</ box >}}
 
-{{< box style="themegrey full" >}}
+{{< box style="bg_lightblue full" >}}
 {{< box style="pad" >}}
   {{< box_news title="Latest contest" type="contests" amount="1" style="rows" >}}
 {{</ box >}}

content/community/_index.md

@@ -7,7 +7,7 @@ aliases:
   - /web-irc/ # from pine64.com
 ---
 
-{{< box style="themewhite pad" >}}
+{{< box style="pad" >}}
   {{< box style="pad_s blueshadow" type="image" link="/img/slider_index_1.jpg" width="380" >}}{{</ box >}}
   {{< box style="pad f50 rows" title="" content="markdown" >}}
 ***Welcome to the PINE64 community!***
@@ -75,7 +75,7 @@ PINE64 community is not some always responding, restless commercial customer ser
 
 ## Vision
 
-{{< box style="themewhite pad" >}}
+{{< box style="pad" >}}
   {{< box style="pad f50 rows" title="" content="markdown" >}}
 _PINE64_ is a community-driven company focused on creating high-quality, low-cost ARM devices and, more recently, RISC-V devices for individuals and businesses around the globe. PINE64 made its debut with the [PINE A64](/documentation/Pine_A64) single-board computer, which successfully launched on Kickstarter in 2015. PINE64 has since released a multitude of other devices, including both development boards and end-user devices.
 

themes/pinetheme/assets/css/documentation.css

@@ -3,7 +3,7 @@ body {
     overflow-y: scroll;
 }
 #header {
-    box-shadow: 0 1px 2px #ddd;
+    box-shadow: 0 1px 2px var(--grey);
 }
 #content {
     display: block;
@@ -40,7 +40,7 @@ body {
     border-left: 1px solid #bbdcff;
 }
 #doc-toc a {
-    color: #363636;
+    color: var(--fg);
     font-size: 15px;
     font-weight: unset !important;
 }

themes/pinetheme/assets/css/slider.css

@@ -1,7 +1,7 @@
 /* Carousel */
 .cr {
     position: relative;
-    background-color: #F3F6F9;
+    background-color: var(--lightblue);
 }
 .cr-inner {
     position: relative;

themes/pinetheme/assets/css/style.css

@@ -3,16 +3,50 @@
     margin: 0;
 }
 
+:root {
+    --blue: rgb(0, 75, 160);
+    --lightblue: #f3f6f9;
+    --medblue: #e4f0ff;
+    --palecyan: #eff7f9;
+    --white: #ffffff;
+    --grey: #e6e6e6;
+    --fg: #222222;
+    --fg-main-menu: #000000;
+    --bg: #ffffff;
+    --bg-table: #f8f8f8;
+    --bg-table-hl: #ececec;
+    --bg-table-border: #dee2e6;
+}
+
 body {
-    background-color: #fff;
+    background-color: var(--bg);
     font-family: Roboto, sans-serif;
-    color: rgb(34, 34, 34);
+    color: var(--fg);
 }
 
 :root {
-    --blue: rgb(0, 75, 160);
-    --white: #ffffff;
+  color-scheme: light dark;
+}
+
+/***
+TBD: <meta name="color-scheme" content="light dark">
+***/
+/***
+@media (prefers-color-scheme: dark) {
+
+    :root {
+        --blue: rgb(0, 90, 194);
+        --grey: #111111;
+        --fg: #ddd;
+        --fg-main-menu: #d8d8d8;
+        --bg: #181818;
+        --bg-table: #2c2c2c;
+        --bg-table-hl: #404040;
+        --bg-table-border: #6c757d;
+    }
 }
+***/
+
 /* Text styles */
 a {
     color: var(--blue);
@@ -35,7 +69,7 @@ h1 {
     font-size: 40px;
     font-weight: 300;
     padding-bottom: 20px;
-    color: rgb(34, 34, 34);
+    color: var(--fg);
 }
 h2 {
     font-size: 26px;
@@ -48,7 +82,6 @@ h3,
 h4,
 h5,
 h6 {
-    /*padding: 12px 0 12px 0;*/
     font-weight: 300;
 }
 h2 {
@@ -68,7 +101,7 @@ h3 a,
 h4 a,
 h5 a,
 h6 a {
-    color: rgb(34, 34, 34);
+    color: var(--fg);
 }
 .imageblock {
     margin-bottom: 1.6rem;
@@ -198,22 +231,15 @@ div.themeblue {
     background: linear-gradient(90deg, #2868B0 0%, #2F82C6 100%);
     color: white;
 }
-div.themegrey {
-    background-color: #F3F6F9;
-    color: black;
-}
-div.themegrey p { 
-    color: #777;
-}
 div.themewhite {
-    background-color: #FFF;
-    color: black;
+    background-color: var(--bg);
+    color: var(--fg);
 }
 div.themewhite h3 { 
-    color: #333;
+    color: var(--fg);
 }
 div.themewhite p { 
-    color: #222222;
+    color: var(--fg);
 }
 div.themecommunity {
     background-color: #003380;
@@ -254,25 +280,15 @@ div.community_round {
     border-bottom-right-radius: 50%;
 }
 div.themecontest {
-    background-color: rgb(211, 211, 211);
+    background-color: #d3d3d3;
     background-image: url("/img/tria2_i.svg");
     background-repeat: no-repeat;
     background-size: cover;
     color: white;
-    font-weight: 500;
 }
 div.themecontest h1 {
     color: white;
 }
-div.themelightblue {
-    background-color: #e4f0ff;
-}
-div.themelightgrey {
-    background-color: #e6e6e6;
-}
-div.themevlblue {
-    background-color: #eff7f9;
-}
 div.themeblog {
     color: white;
     font-weight: 400;
@@ -329,6 +345,18 @@ div.themedarkgrey {
 div.themedarkgrey h1 {
     color: white;
 }
+div.bg_grey {
+    background-color: var(--grey);
+}
+div.bg_lightblue {
+    background-color: var(--lightblue);
+}
+div.bg_medblue {
+    background-color: var(--medblue);
+}
+div.bg_palecyan {
+    background-color: var(--palecyan);
+}
 
 /* Pagination */
 ul.pagination {
@@ -341,23 +369,25 @@ ul.pagination {
     justify-content: center;
 }
 ul.pagination li {
-    color: #333;
+    color: var(--fg);
     margin: 2px;
     padding: 2px 6px;
     text-align: center;
     font-size: 1.31rem;
     font-weight: 600;
     margin-bottom: 3rem;
-    background-color: #f5f5f5;
+    background-color: var(--bg);
     border-radius: 2px;
+    min-width: 26px;
+    border-radius: 4px;
 }
 ul.pagination li.disabled {
     display: none;
 }
 ul.pagination li a {
     /*padding: 4px 8px;*/
     line-height: 2rem;
-    color: #333;
+    color: var(--fg);
 
 }
 ul.pagination li.active a, ul.pagination li a:hover {
@@ -393,7 +423,6 @@ pre {
     width: 100%;
 }
 #header-container {
-    background-color: white;
     /*border-bottom: 1px solid #ddd;*/
     max-width: 1200px;
     /*margin: auto;*/
@@ -434,7 +463,7 @@ input#hamburger_cb,
     padding: 0 10px;
     border-top-left-radius: 2px;
     border-bottom-left-radius: 2px;
-    background-color: #F3F6F9;
+    background-color: var(--lightblue);
     border: none;
     color: #333;
     height: 38px;
@@ -509,7 +538,7 @@ input#hamburger_cb,
 }
 #main_menu .nav-link {
     padding: 15px;
-    color: black;
+    color: var(--fg-main-menu);
     text-decoration: none;
     font-size: 1.13rem;
     white-space: nowrap;
@@ -632,9 +661,6 @@ div.roundedbutton:hover {
     padding: 2px;
     font-weight: 400;
 }
-.editpage a {
-    color: #003f9e;
-}
 @media screen and (max-width: 750px){
     .editpage {
         visibility: hidden;
@@ -811,7 +837,7 @@ div.credits {
     line-height: 2;
 }
 .devices tbody {
-    background-color: white;
+    background-color: var(--bg);
 }
 .devices td {
     border-top: 1px solid #aaa;
@@ -836,6 +862,7 @@ div.credits {
 }
 /* Device box */
 .device_box {
+    background-color: var(--bg);
     flex: 0 0 100%;
     min-width: 200px;
     width: 280px;
@@ -872,7 +899,7 @@ div.credits {
 }
 .device_box p {
     padding: 0 10px 0 10px !important;
-    color: #555;
+    color: var(--fg);
     font-size: 0.94rem;
     font-weight: 400;
     margin-bottom: 0;
@@ -919,7 +946,7 @@ table {
     max-width: 100%;
     margin-top: 1rem;
     margin-bottom: 1rem;
-    border: 1px solid #dee2e6;
+    border: 1px solid var(--bg-table-border);
     table-layout: fixed;
     width: 100%;
 }
@@ -953,12 +980,12 @@ table th.halign-center {
     text-align: center;
 }
 thead {
-    background-color: #ececec;
+    background-color: var(--bg-table-hl);
     margin-bottom: 0;
 }
 
 tbody {
-    background-color: #f8f8f8;
+    background-color: var(--bg-table);
     margin-bottom: 0;
 }
 
@@ -1206,12 +1233,12 @@ div.podcast:hover {
 
 /* Footer */
 #footer {
-    color: #555;
+    color: var(--fg);
 }
 #footer a {
     text-decoration: none;
     font-weight: 300;
-    color: #555;
+    color: var(--fg);
 }
 #footer ul {
     list-style-type: none;

themes/pinetheme/layouts/partials/footer.html

@@ -1,4 +1,4 @@
-<div id="footer" class="box full themelightgrey">
+<div id="footer" class="box full bg_grey">
     <div class="box rows">
         <div class="box cols">
             <div class="col">
@@ -53,7 +53,7 @@ <h2>Guidelines</h2>
             <hr id="footer-line"> 
         </div>
 
-        <div class="box cols themelightgrey">
+        <div class="box cols bg_grey">
             <img id="footerlogo" src="/img/logo.png" alt="The PINE64 logo">
             <span>&copy; {{ now.Format "2006" }} PINE64</span>
         </div>

themes/pinetheme/layouts/podcast/list.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
 
-<div class="box full themelightblue">
+<div class="box full bg_medblue">
     <div class="box pad">
         <h1>PineTalk</h1>