feat: colorschemes (#144)

* feat: colorschemes

* allo custom stream title

.github/marmite.yaml

@@ -1,6 +1,6 @@
-name: Marmite SSG
-tagline: Simply create a static blog from markdown files
-url: https://rochacbruno.github.io/marmite/
+name: Marmite
+tagline: Static Site Generator
+url: https://rochacbruno.github.io/marmite
 pagination: 6
 enable_search: true
 menu: 
@@ -14,6 +14,7 @@ card_image: ./media/og_image.jpg
 banner_image: media/og_image.jpg
 default_date_format: "%A, %d %B %Y"
 extra:
+  colorscheme_toggle: true
   comments:
     title: Comments
     source: |

README.md

@@ -58,6 +58,7 @@ It also handles generating or copying `static/` and `media/` to the `output` dir
 - Auto rebuild when content changes.
 - Built-in theme 
   - Light and Dark modes.
+  - Multiple colorschemes
   - Fully responsive
   - Spotlight Search.
   - Easy to replace the index page and add custom CSS/JS

example/content/2024-10-24-getting-started.md

@@ -369,6 +369,84 @@ Hero
   <img src="./media/screenshots/hero.png" width="600">
 </figure>
 
+
+## Colorschemes
+
+Marmite comes with some colorschemes built-in, colorschemes are CSS style files that customizes colors, spacing etc.
+
+To choose a colorscheme add to `marmite.yaml`
+```yaml
+extra:
+  colorscheme: gruvbox
+```
+
+The built-in options are **catppuccin**, **dracula**, **github**, **gruvbox**, **iceberg**, **monokai**, **nord**, **one**, **solarized**, **typewriter**.
+
+To create a custom colorscheme drop a `custom.css` on your input folder (the same where marmite.yaml is located)
+
+<details>
+
+<summary> CLICK HERE to see an example colorscheme on <code>custom.css</code> </summary>
+
+
+```css
+/* Marmite Nord Theme */
+/* picocss.com  */
+:root {
+    --pico-border-radius: 0;
+}
+
+.content-tags a:where(a:not([role=button])),
+[role=link] {
+    --pico-color: revert;
+}
+
+[data-theme=light],
+:root:not([data-theme=dark]) {
+    --pico-background-color: #ECEFF4;
+    --pico-card-background-color: #E5E9F0;
+    --pico-card-sectioning-background-color: var(--pico-background-color);
+    --pico-primary: #5E81AC;
+    --pico-primary-hover: #81A1C1;
+    --pico-color: #2E3440;
+    --pico-tag: #4C566A;
+    --pico-h1-color: var(--pico-primary);
+    --pico-code-background-color: var(--pico-background-color);
+    --pico-table-border-color: var(--pico-card-background-color);
+    --pico-color-azure-550: var(--pico-primary);
+}
+
+[data-theme=light] pre:has(> code.language-mermaid) {
+    background-color: var(--pico-card-background-color);
+}
+
+[data-theme=dark],
+:root:not([data-theme=light]) {
+    --pico-background-color: #2E3440;
+    --pico-card-background-color: #3B4252;
+    --pico-card-sectioning-background-color: var(--pico-background-color);
+    --pico-primary: #81A1C1;
+    --pico-primary-hover: #88C0D0;
+    --pico-color: #D8DEE9;
+    --pico-tag: #4C566A;
+    --pico-h1-color: var(--pico-color);
+    --pico-code-background-color: var(--pico-background-color);
+    --pico-table-border-color: var(--pico-card-background-color);
+    --pico-color-azure-550: var(--pico-primary);
+}
+
+[data-theme=dark] pre:has(> code.language-mermaid) {
+    background-color: var(--pico-code-color);
+}
+```
+
+> [!INFO]  
+> Multiple colorschemes can also be added to `static/colorschemes/{name}.css`
+> and then enable `extra.colorscheme_toggle` on config.
+
+</details>
+<hr>
+
 ## Layout Customization
 
 If you want to keep using the default theme but wants to customize little parts

example/marmite.yaml

@@ -51,6 +51,9 @@ authors:
 # extra:
 #  foo: bar
 
+extra:
+  colorscheme_toggle: true
+
 # Example, to enable comments:
 # Go to: https://giscus.app/ and generate your config and replace below.
 # If you prefer to use a different commenting system just replace accordingly

example/static/colorschemes/catppuccin.css

@@ -0,0 +1,50 @@
+/* Marmite Catppuccin Theme */
+/* picocss.com  */
+:root {
+    --pico-border-radius: 0;
+}
+
+.content-tags a:where(a:not([role=button])),
+[role=link] {
+    --pico-color: revert;
+}
+
+/* Light Mode - Latte */
+[data-theme=light],
+:root:not([data-theme=dark]) {
+    --pico-background-color: #e6e9ef;
+    --pico-card-background-color: #eff1f5;
+    --pico-card-sectioning-background-color: var(--pico-background-color);
+    --pico-primary: #8839ef;
+    --pico-primary-hover: #ea76cb;
+    --pico-color: #4c4f69;
+    --pico-tag: #acb0be;
+    --pico-h1-color: var(--pico-primary);
+    --pico-code-background-color: var(--pico-background-color);
+    --pico-table-border-color: var(--pico-card-background-color);
+    --pico-color-azure-550: var(--pico-primary);
+}
+
+[data-theme=light] pre:has(> code.language-mermaid) {
+    background-color: var(--pico-card-background-color);
+}
+
+/* Dark Mode - Mocha */
+[data-theme=dark],
+:root:not([data-theme=light]) {
+    --pico-background-color: #1e1e2e;
+    --pico-card-background-color: #302d41;
+    --pico-card-sectioning-background-color: var(--pico-background-color);
+    --pico-primary: #cba6f7;
+    --pico-primary-hover: #f5c2e7;
+    --pico-color: #cdd6f4;
+    --pico-tag: #585b70;
+    --pico-h1-color: var(--pico-color);
+    --pico-code-background-color: var(--pico-background-color);
+    --pico-table-border-color: var(--pico-card-background-color);
+    --pico-color-azure-550: var(--pico-primary);
+}
+
+[data-theme=dark] pre:has(> code.language-mermaid) {
+    background-color: var(--pico-code-color);
+}

example/static/colorschemes/dracula.css

@@ -0,0 +1,50 @@
+/* Marmite Dracula Theme */
+/* picocss.com  */
+:root {
+    --pico-border-radius: 0;
+}
+
+.content-tags a:where(a:not([role=button])),
+[role=link] {
+    --pico-color: revert;
+}
+
+/* Light Mode */
+[data-theme=light],
+:root:not([data-theme=dark]) {
+    --pico-background-color: #f8f8f2;
+    --pico-card-background-color: #ffffff;
+    --pico-card-sectioning-background-color: var(--pico-background-color);
+    --pico-primary: #6272a4;
+    --pico-primary-hover: #44475a;
+    --pico-color: #282a36;
+    --pico-tag: #8671a3;
+    --pico-h1-color: #44475a;
+    --pico-code-background-color: var(--pico-background-color);
+    --pico-table-border-color: var(--pico-card-background-color);
+    --pico-color-azure-550: var(--pico-primary);
+}
+
+[data-theme=light] pre:has(> code.language-mermaid) {
+    background-color: var(--pico-card-background-color);
+}
+
+/* Dark Mode */
+[data-theme=dark],
+:root:not([data-theme=light]) {
+    --pico-background-color: #282a36;
+    --pico-card-background-color: #44475a;
+    --pico-card-sectioning-background-color: var(--pico-background-color);
+    --pico-primary: #bd93f9;
+    --pico-primary-hover: #ff79c6;
+    --pico-color: #f8f8f2;
+    --pico-tag: #6272a4;
+    --pico-h1-color: var(--pico-color);
+    --pico-code-background-color: var(--pico-background-color);
+    --pico-table-border-color: var(--pico-card-background-color);
+    --pico-color-azure-550: var(--pico-primary);
+}
+
+[data-theme=dark] pre:has(> code.language-mermaid) {
+    background-color: var(--pico-code-color);
+}

example/static/colorschemes/github.css

@@ -0,0 +1,48 @@
+/* Marmite Github Theme */
+/* picocss.com  */
+:root {
+    --pico-border-radius: 0;
+}
+
+.content-tags a:where(a:not([role=button])),
+[role=link] {
+    --pico-color: revert;
+}
+
+[data-theme=light],
+:root:not([data-theme=dark]) {
+    --pico-background-color: #ffffff;
+    --pico-card-background-color: #f6f8fa;
+    --pico-card-sectioning-background-color: var(--pico-background-color);
+    --pico-primary: #0969da;
+    --pico-primary-hover: #0366d6;
+    --pico-color: #24292f;
+    --pico-tag: #57606a;
+    --pico-h1-color: var(--pico-primary);
+    --pico-code-background-color: var(--pico-background-color);
+    --pico-table-border-color: #d0d7de;
+    --pico-color-azure-550: var(--pico-primary);
+}
+
+[data-theme=light] pre:has(> code.language-mermaid) {
+    background-color: var(--pico-card-background-color);
+}
+
+[data-theme=dark],
+:root:not([data-theme=light]) {
+    --pico-background-color: #0d1117;
+    --pico-card-background-color: #161b22;
+    --pico-card-sectioning-background-color: var(--pico-background-color);
+    --pico-primary: #58a6ff;
+    --pico-primary-hover: #1f6feb;
+    --pico-color: #c9d1d9;
+    --pico-tag: #8b949e;
+    --pico-h1-color: var(--pico-color);
+    --pico-code-background-color: #323d4b;
+    --pico-table-border-color: #30363d;
+    --pico-color-azure-550: var(--pico-primary);
+}
+
+[data-theme=dark] pre:has(> code.language-mermaid) {
+    background-color: var(--pico-code-background-color);
+}

example/static/colorschemes/gruvbox.css

@@ -0,0 +1,48 @@
+/* Marmite Gruvbox Theme */
+/* picocss.com  */
+:root {
+    --pico-border-radius: 0;
+}
+
+.content-tags a:where(a:not([role=button])),
+[role=link] {
+    --pico-color: revert;
+}
+
+[data-theme=light],
+:root:not([data-theme=dark]) {
+    --pico-background-color: #fbf1c7;
+    --pico-card-background-color: #ebdbb2;
+    --pico-card-sectioning-background-color: var(--pico-background-color);
+    --pico-primary: #b57614;
+    --pico-primary-hover: #d79921;
+    --pico-color: #3c3836;
+    --pico-tag: #7c6f64;
+    --pico-h1-color: var(--pico-primary);
+    --pico-code-background-color: var(--pico-background-color);
+    --pico-table-border-color: var(--pico-card-background-color);
+    --pico-color-azure-550: var(--pico-primary);
+}
+
+[data-theme=light] pre:has(> code.language-mermaid) {
+    background-color: var(--pico-card-background-color);
+}
+
+[data-theme=dark],
+:root:not([data-theme=light]) {
+    --pico-background-color: #282828;
+    --pico-card-background-color: #3c3836;
+    --pico-card-sectioning-background-color: var(--pico-background-color);
+    --pico-primary: #d79921;
+    --pico-primary-hover: #fabd2f;
+    --pico-color: #ebdbb2;
+    --pico-tag: #a89984;
+    --pico-h1-color: var(--pico-color);
+    --pico-code-background-color: var(--pico-background-color);
+    --pico-table-border-color: var(--pico-card-background-color);
+    --pico-color-azure-550: var(--pico-primary);
+}
+
+[data-theme=dark] pre:has(> code.language-mermaid) {
+    background-color: var(--pico-code-color);
+}

example/static/colorschemes/iceberg.css

@@ -0,0 +1,48 @@
+/* Marmite Iceberg Theme */
+/* picocss.com  */
+:root {
+    --pico-border-radius: 0;
+}
+
+.content-tags a:where(a:not([role=button])),
+[role=link] {
+    --pico-color: revert;
+}
+
+[data-theme=light],
+:root:not([data-theme=dark]) {
+    --pico-background-color: #E8F3F8;
+    --pico-card-background-color: #DDEAF1;
+    --pico-card-sectioning-background-color: var(--pico-background-color);
+    --pico-primary: #4B6479;
+    --pico-primary-hover: #6B8BA4;
+    --pico-color: #1E272E;
+    --pico-tag: #3A4A58;
+    --pico-h1-color: var(--pico-primary);
+    --pico-code-background-color: var(--pico-background-color);
+    --pico-table-border-color: var(--pico-card-background-color);
+    --pico-color-azure-550: var(--pico-primary);
+}
+
+[data-theme=light] pre:has(> code.language-mermaid) {
+    background-color: var(--pico-card-background-color);
+}
+
+[data-theme=dark],
+:root:not([data-theme=light]) {
+    --pico-background-color: #1B2B34;
+    --pico-card-background-color: #243B4A;
+    --pico-card-sectioning-background-color: var(--pico-background-color);
+    --pico-primary: #4B6479;
+    --pico-primary-hover: #6B8BA4;
+    --pico-color: #C0C5CE;
+    --pico-tag: #3A4A58;
+    --pico-h1-color: var(--pico-color);
+    --pico-code-background-color: var(--pico-background-color);
+    --pico-table-border-color: var(--pico-card-background-color);
+    --pico-color-azure-550: var(--pico-primary);
+}
+
+[data-theme=dark] pre:has(> code.language-mermaid) {
+    background-color: var(--pico-code-color);
+}