Partial Implementation of Dark Mode

Cargo.toml

@@ -3,8 +3,8 @@ name = "zine"
 version = "0.14.0"
 description = "A simple and opinionated tool to build your own magazine."
 authors = ["Folyd"]
-homepage = "https://github.com/zineland/zine"
-repository = "https://github.com/zineland/zine"
+homepage = "https://github.com/JOSHMT0744/zine.git" # This here will need to be changed back to original repo rather than fork
+repository = "https://github.com/JOSHMT0744/zine.git" # And here
 license = "Apache-2.0"
 edition = "2021"
 exclude = ["tailwind.config.js", "tailwindcss.html", "zine-entry.css"]

build.rs

@@ -1,5 +1,5 @@
 use std::io::{Error, ErrorKind};
-use std::process::Command;
+use std::process::Command; // A process builder, controlling how a new process should be spawned
 
 fn main() {
     // Obtain build infomation from Git.
@@ -10,8 +10,9 @@ fn main() {
 }
 
 fn run(args: &[&str]) -> Result<String, std::io::Error> {
-    let out = Command::new(args[0]).args(&args[1..]).output()?;
+    let out = Command::new(args[0]).args(&args[1..]).output()?; // Output() executes command as child process
     match out.status.success() {
+        // Collecting status (child process) and checking for success
         true => Ok(String::from_utf8(out.stdout).unwrap().trim().to_string()),
         false => Err(Error::new(ErrorKind::Other, "Command not successful.")),
     }

content/issue-1/1-first.md

@@ -0,0 +1 @@
+Hello Zine

content/issue-1/zine.toml

@@ -0,0 +1,13 @@
+
+slug = "issue-1"
+number = 1
+title = "Issue 1"
+
+[[article]]
+file = "1-first.md"
+title = "First article"
+author = "josh_thompson"
+cover = ""
+pub_date = "2023-03-01"
+publish = true
+featured = true

src/engine.rs

@@ -237,7 +237,7 @@ impl ZineEngine {
         let instant = std::time::Instant::now();
 
         if reload {
-            self.zine = Zine::parse_from_toml(&self.source)?;
+            self.zine = Zine::parse_from_toml(&self.source)?; // Converting toml file into text
         }
 
         self.zine.parse(&self.source)?;

src/entity/theme.rs

@@ -8,6 +8,8 @@ use super::Entity;
 #[derive(Clone, Serialize, Deserialize)]
 #[serde(rename_all(deserialize = "snake_case"))]
 pub struct Theme {
+    //whether dark mode is enabled (boolean)
+    pub dark_mode: Option<bool>,
     // The primary color.
     #[serde(default = "Theme::default_primary_color")]
     pub primary_color: String,
@@ -20,6 +22,9 @@ pub struct Theme {
     // The background color.
     #[serde(default = "Theme::default_secondary_color")]
     pub secondary_color: String,
+    // The page color.
+    #[serde(default = "Theme::default_page_color")]
+    pub page_color: String,
     // The background image url.
     #[serde(default)]
     pub background_image: Option<String>,
@@ -39,10 +44,12 @@ pub struct Theme {
 impl Default for Theme {
     fn default() -> Self {
         Self {
+            dark_mode: Some(false),
             primary_color: Self::default_primary_color(),
             main_color: Self::default_main_color(),
             link_color: Self::default_link_color(),
             secondary_color: Self::default_secondary_color(),
+            page_color: Self::default_page_color(),
             background_image: None,
             head_template: None,
             footer_template: None,
@@ -56,10 +63,12 @@ impl Default for Theme {
 impl std::fmt::Debug for Theme {
     fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
         f.debug_struct("Theme")
+            .field("dark_mode", &self.dark_mode)
             .field("primary_color", &self.primary_color)
             .field("main_color", &self.main_color)
             .field("link_color", &self.link_color)
             .field("secondary_color", &self.secondary_color)
+            .field("page_color", &self.page_color)
             .field("background_image", &self.background_image)
             .field("head_template", &self.head_template.is_some())
             .field("footer_template", &self.footer_template.is_some())
@@ -74,30 +83,69 @@ impl std::fmt::Debug for Theme {
 }
 
 impl Theme {
-    const DEFAULT_PRIMARY_COLOR: &'static str = "#2563eb";
-    const DEFAULT_MAIN_COLOR: &'static str = "#ffffff";
-    const DEFAULT_LINK_COLOR: &'static str = "#2563eb";
-    const DEFAULT_SECONDARY_COLOR: &'static str = "#eff3f7";
+    const DEFAULT_PRIMARY_COLOR_LIGHT: &'static str = "#2563eb";
+    const DEFAULT_MAIN_COLOR_LIGHT: &'static str = "#ffffff";
+    const DEFAULT_LINK_COLOR_LIGHT: &'static str = "#2563eb";
+    const DEFAULT_SECONDARY_COLOR_LIGHT: &'static str = "#eff3f7";
+    const DEFAULT_PAGE_COLOR_LIGHT: &'static str = "#ffffff";
+
+    const DEFAULT_PRIMARY_COLOR_DARK: &'static str = "#0d0d0d";
+    // const DEFAULT_MAIN_COLOR_DARK: &'static str = "#ffffff";
+    // const DEFAULT_LINK_COLOR_DARK: &'static str = "#2563eb";
+    const DEFAULT_SECONDARY_COLOR_DARK: &'static str = "#303030";
+    const DEFAULT_PAGE_COLOR_DARK: &'static str = "#505050";
 
     fn default_primary_color() -> String {
-        Self::DEFAULT_PRIMARY_COLOR.to_string()
+        Self::DEFAULT_PRIMARY_COLOR_LIGHT.to_string()
     }
 
     fn default_main_color() -> String {
-        Self::DEFAULT_MAIN_COLOR.to_string()
+        Self::DEFAULT_MAIN_COLOR_LIGHT.to_string()
     }
 
     fn default_link_color() -> String {
-        Self::DEFAULT_LINK_COLOR.to_string()
+        Self::DEFAULT_LINK_COLOR_LIGHT.to_string()
     }
 
     fn default_secondary_color() -> String {
-        Self::DEFAULT_SECONDARY_COLOR.to_string()
+        Self::DEFAULT_SECONDARY_COLOR_LIGHT.to_string()
+    }
+
+    fn default_page_color() -> String {
+        Self::DEFAULT_PAGE_COLOR_LIGHT.to_string()
+    }
+
+    fn default_page_color_dark() -> String {
+        Self::DEFAULT_PAGE_COLOR_DARK.to_string()
+    }
+
+    fn default_primary_color_dark() -> String {
+        Self::DEFAULT_PRIMARY_COLOR_DARK.to_string()
+    }
+
+    fn default_secondary_color_dark() -> String {
+        Self::DEFAULT_SECONDARY_COLOR_DARK.to_string()
+    }
+
+    fn change_defaults(&mut self) {
+        if self.dark_mode.unwrap_or(false) {
+            if self.page_color == Self::default_page_color() {
+                self.page_color = Self::default_page_color_dark(); // Changing page colour, if dark theme is enabled
+            }
+            if self.primary_color == Self::default_primary_color() {
+                self.primary_color = Self::default_primary_color_dark(); // Changing primary colour, if dark theme is enabled
+            }
+            if self.secondary_color == Self::default_secondary_color() {
+                self.secondary_color = Self::default_secondary_color_dark(); // Changing secondary colour, if dark theme is enabled
+            }
+        }
     }
 }
 
 impl Entity for Theme {
     fn parse(&mut self, source: &Path) -> Result<()> {
+        self.change_defaults(); // Change default colors if dark mode is enabled.
+
         if self.default_cover.is_none() {
             self.default_cover = Some(String::from("/static/zine-placeholder.svg"));
         }

src/entity/zine.rs

@@ -70,8 +70,9 @@ impl Zine {
     /// Parse Zine instance from the root zine.toml file.
     pub fn parse_from_toml<P: AsRef<Path>>(source: P) -> Result<Zine> {
         let source = source.as_ref().join(crate::ZINE_FILE);
-        let content = fs::read_to_string(&source)
-            .with_context(|| format!("Failed to read `{}`", source.display()))?;
+        let content =
+            fs::read_to_string(&source) // Content holds information of toml file
+                .with_context(|| format!("Failed to read `{}`", source.display()))?;
 
         Ok(toml::from_str::<Zine>(&content).map_err(|err| {
             let value = toml::from_str::<toml::Value>(&content)

src/main.rs

@@ -58,7 +58,7 @@ enum Commands {
     /// Prints the app version.
     Version,
 }
-
+// 'match' is used to distinguish what type of action 'Commands' is to do
 #[tokio::main]
 async fn main() -> Result<()> {
     match Cli::parse().command {

tailwind.config.js

@@ -16,6 +16,7 @@ module.exports = {
                 main: 'var(--main-color)',
                 secondary: 'var(--secondary-color)',
                 link: 'var(--link-color)',
+                page: 'var(--page-color)'
             },
             typography: {
                 DEFAULT: {

templates/_article_ref.jinja

@@ -1,21 +1,21 @@
-<div>
+<div class="dark_mode_text">
     {% for item in articles -%}
     {% set article = item.article -%}
-    <div class="py-6 sm:px-8 hover:bg-gray-100">
+    <div class="py-6 sm:px-8 hover:bg-gray-100 dark_mode_text">
         {% if article.path -%}
-        <a href="{{ article.path }}">
+        <a class="dark_mode_text" href="{{ article.path }}">
         {% else -%}
-        <a href="/{{ item.issue_slug }}/{{ article.slug }}">
+        <a class="dark_mode_text" href="/{{ item.issue_slug }}/{{ article.slug }}">
         {% endif -%}
-        <div class="flex">
+        <div class="flex dark_mode_text">
             <img class="zine-thumbnail w-28 h-18 sm:w-40 sm:h-28 object-cover" src="{{ article.cover }}"
                 alt="{{ article.title }}" loading="lazy">
             <div class="flex flex-col justify-between ml-4 sm:ml-8 text-base sm:text-lg text-black grow">
                 <div class="zine-card-title my-2 font-bold line-clamp-2">{{ article.title }}</div>
-                <div class="relative text-base text-gray-500 flex justify-between items-center">
-                    <span class="zine-card-date">{{ article.pub_date }}</span>
+                <div class="relative text-base text-gray-500 flex justify-between items-center dark_mode_text">
+                    <span class="zine-card-date dark_mode_text">{{ article.pub_date }}</span>
                     <span
-                        class="zine-diamond mx-4 my-2 before:block before:absolute before:-inset-1 before:-skew-x-6 before:bg-primary relative inline-block">
+                        class="zine-diamond mx-4 my-2 before:block before:absolute before:-inset-1 before:-skew-x-6 before:bg-primary relative inline-block dark_mode_text">
                         <span class="relative text-main text-xs">{{ item.issue_title }}</span>
                     </span>
                 </div>

templates/_macros.jinja

@@ -4,11 +4,11 @@
 {% else -%}
 {% set author_ids = [author] -%}
 {% endif -%}
-<div class="flex items-center">
+<div class="flex items-center dark_mode_text">
     {% for author_id in author_ids -%}
     {% set author = get_author(author_id) -%}
     {% if author -%}
-    <a class="inline-flex items-center px-2 py-1 !text-gray-500 rounded hover:bg-gray-200 hover:!no-underline"
+    <a class="inline-flex items-center px-2 py-1 !text-gray-500 rounded hover:bg-gray-200 hover:!no-underline dark_mode_text"
         href="/@{{ author.id | lower }}">
         <img class="!m-0 !p-1 w-7 h-7 rounded-full object-cover" src="{{ author.avatar }}" alt="avatar" loading="lazy">
         <span>

templates/article.jinja

@@ -1,16 +1,16 @@
 {% extends "base.jinja" -%}
 {% import "_macros.jinja" as macros -%}
 {% block content -%}
-<div class="px-4 pb-10 md:px-8 md:pb-14 mx-4 my-6 bg-white shadow-xl shadow-slate-700/10 ring-1 ring-gray-900/5">
+<div class="px-4 pb-10 md:px-8 md:pb-14 mx-4 my-6 bg-page shadow-xl shadow-slate-700/10 ring-1 ring-gray-900/5 dark_mode_text">
     <div
-        class="sticky z-10 py-4 top-32 lg:top-36 xl:top-44 2xl:top-56 bg-white border-dashed border-b border-slate-300">
+        class="sticky z-10 py-4 top-32 lg:top-36 xl:top-44 2xl:top-56 bg-page border-dashed border-b border-slate-300 dark_mode_text">
         <div class="ml-1 md:ml-2 flex justify-between items-center">
             <div class="zine-breadcrumb">
-                <a class="zine-diamond before:block before:absolute before:-inset-1 before:-skew-x-6 before:bg-primary relative inline-block transition sm:hover:scale-110 duration-500"
+                <a class="zine-diamond before:block before:absolute before:-inset-1 before:-skew-x-6 before:bg-primary relative inline-block transition sm:hover:scale-110 duration-500 dark_mode_text"
                     href="/{{ issue.slug }}">
-                    <div class="relative text-main px-4">{{ issue.title }}</div>
+                    <div class="relative text-main px-4 dark_mode_text">{{ issue.title }}</div>
                 </a>
-                <span class="ml-2 text-gray-700">/ {{ fluent("article-number", number) }}</span>
+                <span class="ml-2 text-gray-700 dark_mode_text">/ {{ fluent("article-number", number) }}</span>
             </div>
             <div>
                 {% set common_style = "py-1 my-1 rounded hover:bg-gray-100" -%}
@@ -21,13 +21,13 @@
                     </div>
                     {% endif -%}
                     {% if site.edit_url -%}
-                    <a class="ml-1 md:ml-2 p-2 rounded hover:bg-gray-200"
+                    <a class="ml-1 md:ml-2 p-2 rounded hover:bg-gray-200 dark_mode_text"
                        href="{{ site.edit_url }}/content/{{ issue.dir }}/{{ article.file }}">
                         <img src="/static/edit.svg" alt="edit">
                     </a>
                     {% endif -%}
                     {% if toc -%}
-                    <div id="toc-menu" class="ml-1 md:ml-2 p-2 cursor-pointer rounded hover:bg-gray-200">
+                    <div id="toc-menu" class="ml-1 md:ml-2 p-2 cursor-pointer rounded hover:bg-gray-200 ">
                        <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16"
                             data-view-component="true">
                             <path fill-rule="evenodd"
@@ -39,12 +39,12 @@
                 </div>
                 {% if i18n -%}
                 <div id="i18n-list"
-                    class="absolute hidden right-5 px-2 flex flex-col py-2 my-4 border bg-white rounded z-[99999] shadow-xl">
+                    class="absolute hidden right-5 px-2 flex flex-col py-2 my-4 border bg-page rounded z-[99999] shadow-xl">
                     {% for translation in i18n -%}
                     {% if translation.path -%}
-                    <a class="{{ common_style }} px-8" href="{{ translation.path }}">
+                    <a class="{{ common_style }} px-8 dark_mode_text" href="{{ translation.path }}">
                         {% else -%}
-                        <a class="{{ common_style }} px-8" href="/{{ issue.slug }}/{{ translation.slug }}">
+                        <a class="{{ common_style }} px-8 dark_mode_text" href="/{{ issue.slug }}/{{ translation.slug }}">
                             {% endif -%}
                             {{ translation.name }}
                         </a>
@@ -53,10 +53,10 @@
                 {% endif -%}
                 {% if toc -%}
                 <div id="toc-list"
-                    class="absolute hidden right-0 flex flex-col max-w-screen-sm max-h-96 w-60 py-2 my-4 border bg-white rounded z-[99999] shadow-xl">
+                    class="absolute hidden right-0 flex flex-col max-w-screen-sm max-h-96 w-60 py-2 my-4 border bg-page rounded z-[99999] shadow-xl">
                     <div class="px-2 overflow-y-auto">
                         {% for item in toc -%}
-                        <a href="#{{ item.id }}">
+                        <a href="#{{ item.id }} dark_mode_text">
                             {% if item.depth == 1 -%}
                             {% set variant_style = "pl-2 text-gray-800 font-bold text-sm" -%}
                             {% elif item.depth == 2 -%}
@@ -75,12 +75,12 @@
             </div>
         </div>
     </div>
-    <div class="pt-10">
+    <div class="pt-10 dark_mode_text">
         <div class="prose mx-auto">
             <div class="zine-article-title text-2xl md:text-4xl font-extrabold leading-tight mb-8 text-center">
                 {{ article.title }}
             </div>
-            <div class="flex items-center justify-between text-gray-500">
+            <div class="flex items-center justify-between text-gray-500 dark_mode_text">
                 <span>{{ article.pub_date }}</span>
                 {{ macros.author_link(article.author) }}
             </div>
@@ -106,7 +106,7 @@
             {% else -%}
             {% set href = "/" ~ issue.slug ~ "/" ~ article.slug -%}
             {% endif -%}
-            <a class="inline my-1 py-2 px-4 font-bold text-slate-700 hover:underline" href="{{ href }}">
+            <a class="inline my-1 py-2 px-4 font-bold text-slate-700 hover:underline dark_mode_text" href="{{ href }}">
                 {% if loop.index0 == 0 -%}
                 {{ fluent("previous") }}
                 {% else -%}
@@ -121,7 +121,7 @@
     </div>
 </div>
 <div
-    class="inline-link-card absolute hidden border rounded bg-white shadow-xl mx-2 w-96 transition ease-in-out sm:hover:scale-105 duration-500">
+    class="inline-link-card absolute hidden border rounded bg-page shadow-xl mx-2 w-96 transition ease-in-out sm:hover:scale-105 duration-500 dark_mode_text">
     <a class="inline-link-url">
         <div class="">
             <img class="inline-link-image w-full h-52 object-cover rounded-t">

templates/author-list.jinja

@@ -1,6 +1,6 @@
 {% extends "base.jinja" -%}
 {% block content -%}
-<div class="p-4 md:p-8 mx-4 my-6 bg-white shadow-xl shadow-slate-700/10 ring-1 ring-gray-900/5">
+<div class="p-4 md:p-8 mx-4 my-6 bg-page shadow-xl shadow-slate-700/10 ring-1 ring-gray-900/5 dark_mode_text">
     <div class="max-w-prose mx-auto">
         <div class="text-4xl text-center font-extrabold my-8">{{ fluent("author-list") }}</div>
         <div class="flex flex-wrap flex-col sm:flex-row justify-center">
@@ -16,7 +16,7 @@
                         {{ author.id | capitalize }}
                         {% endif -%}
                     </div>
-                    <div class="p-2 text-sm text-gray-500">
+                    <div class="p-2 text-sm text-gray-500 dark_mode_text">
                         {{ fluent("article-count", author.article_count) }}
                     </div>
                     {% if author.editor -%}
@@ -61,7 +61,7 @@
                         {{ team.id | capitalize }}
                         {% endif -%}
                     </div>
-                    <div class="p-2 text-sm text-gray-500">
+                    <div class="p-2 text-sm text-gray-500 dark_mode_text">
                         {{ fluent("article-count", team.article_count) }}
                     </div>
                 </div>