add dark mode to config

Pushword · Jan 9, 2021 · 19d809b · 19d809b
1 parent bcc2173
commit 19d809b
Show file tree

Hide file tree

Showing 29 changed files with 122 additions and 52 deletions.
diff --git a/docs/architecture.html b/docs/architecture.html
diff --git a/docs/assets/tw.css b/docs/assets/tw.css
diff --git a/docs/configuration.html b/docs/configuration.html
diff --git a/docs/contribute.html b/docs/contribute.html
diff --git a/docs/cookbook.html b/docs/cookbook.html
diff --git a/docs/create-extension.html b/docs/create-extension.html
diff --git a/docs/extension.html b/docs/extension.html
diff --git a/docs/extension/admin.html b/docs/extension/admin.html
diff --git a/docs/extension/conversation.html b/docs/extension/conversation.html
diff --git a/docs/extension/flat.html b/docs/extension/flat.html
diff --git a/docs/extension/page-scanner.html b/docs/extension/page-scanner.html
diff --git a/docs/extension/page-update-notifier.html b/docs/extension/page-update-notifier.html
diff --git a/docs/extension/static-generator.html b/docs/extension/static-generator.html
diff --git a/docs/extension/template-editor.html b/docs/extension/template-editor.html
diff --git a/docs/extensions.html b/docs/extensions.html
diff --git a/docs/index.html b/docs/index.html
diff --git a/docs/installation.html b/docs/installation.html
diff --git a/docs/license.html b/docs/license.html
diff --git a/docs/roadmap.html b/docs/roadmap.html
diff --git a/docs/themes.html b/docs/themes.html
diff --git a/docs/upgrade.html b/docs/upgrade.html
diff --git a/packages/core/src/templates/page/_breadcrumb.html.twig b/packages/core/src/templates/page/_breadcrumb.html.twig
@@ -2,7 +2,7 @@
 
     {% if page.parentPage is defined and page.parentPage is not null %}
         {% if page.parentPage.parentPage is not null %} {#We don't generate a breadcrumb for only one parent Page#}
-            <nav aria-label="breadcrumb" class="p-3 text-sm font-light text-gray-700">
+            <nav aria-label="breadcrumb" class="p-3 text-sm font-light text-gray-700 dark:text-gray-300">
                 <ul>
                     {{ _self.breadcrumbPart(page.parentPage, true) }}
                     <!--<li aria-current="page" class="inline-block"> › {{ page.content.name|raw|striptags }}</li>-->

diff --git a/packages/core/src/templates/page/_footer.html.twig b/packages/core/src/templates/page/_footer.html.twig
@@ -1,4 +1,4 @@
-<footer class="mt-10 text-sm border-t-2 border-gray-200">
+<footer class="mt-10 text-sm border-t border-gray-200 dark:border-gray-700">
     <div class="max-w-screen-md p-3 py-10 mx-auto text-right">
         {% block footer %}
             {% include view('/component/alternate_links.html.twig') %}

diff --git a/packages/docs/assets/tailwind.config.js b/packages/docs/assets/tailwind.config.js
@@ -15,7 +15,11 @@ module.exports = {
       'half-75': '0 1 70%',
     },
     extend: {
-      typography: {
+      screens: {
+        light: { raw: '(prefers-color-scheme: light)' },
+        dark: { raw: '(prefers-color-scheme: dark)' },
+      },
+      typography: (theme) => ({
         DEFAULT: {
           css: {
             color: '#333',
@@ -27,7 +31,68 @@ module.exports = {
             },
           },
         },
-      },
+        light: {
+          css: [
+            {
+              color: theme('colors.gray.100'),
+              '[class~="lead"]': {
+                color: theme('colors.gray.300'),
+              },
+              a: {
+                color: theme('colors.gray.100'),
+              },
+              strong: {
+                color: 'var(--primary-light)',
+              },
+              'ol > li::before': {
+                color: theme('colors.gray.400'),
+              },
+              'ul > li::before': {
+                backgroundColor: theme('colors.gray.600'),
+              },
+              hr: {
+                borderColor: theme('colors.gray.200'),
+              },
+              blockquote: {
+                color: theme('colors.gray.200'),
+                borderLeftColor: theme('colors.gray.600'),
+              },
+              h1: {
+                color: theme('colors.gray.100'),
+              },
+              h2: {
+                color: theme('colors.gray.100'),
+              },
+              h3: {
+                color: theme('colors.gray.100'),
+              },
+              h4: {
+                color: theme('colors.gray.100'),
+              },
+              'figure figcaption': {
+                color: theme('colors.gray.400'),
+              },
+              code: {
+                color: theme('colors.gray.100'),
+              },
+              'a code': {
+                color: theme('colors.gray.100'),
+              },
+              pre: {
+                color: theme('colors.gray.200'),
+                backgroundColor: theme('colors.gray.600'),
+              },
+              thead: {
+                color: theme('colors.gray.100'),
+                borderBottomColor: theme('colors.gray.400'),
+              },
+              'tbody tr': {
+                borderBottomColor: theme('colors.gray.600'),
+              },
+            },
+          ],
+        },
+      }),
       colors: {
         primary: 'var(--primary)',
         'primary-light': 'var(--primary-light)',
@@ -36,6 +101,9 @@ module.exports = {
     },
   },
   variants: {
+    extend: {
+      typography: ['dark'],
+    },
     width: ['responsive', 'hover', 'focus'],
   },
   plugins: [

diff --git a/packages/skeleton/public/assets/tw.css b/packages/skeleton/public/assets/tw.css
diff --git a/packages/skeleton/templates/pushword.piedweb.com/page/_content.html.twig b/packages/skeleton/templates/pushword.piedweb.com/page/_content.html.twig
@@ -1,6 +1,6 @@
 {% extends '@Pushword/page/_content.html.twig' %}
 
-{% set container = 'p-3 prose ' %}
+{% set container = 'p-3 prose dark:prose-light' %}
 
 {% block toc %}{% endblock %}
 
@@ -12,26 +12,28 @@
     <div class="flex flex-wrap">
 
         <div class="order-2 w-full overflow-hidden lg:order-1 lg:w-4/5">
-            <div class="p-3 prose ">
+            <div class="p-3 prose dark:prose-light">
                 <h1>{{ page.content.title(true)|raw }}</h1>
                 {{ page.content.intro|raw }}
             </div>
         </div>
 
+        {% if page.content.toc is not empty %}
         <div class="order-3 w-full overflow-hidden lg:order-2 lg:w-1/5">
-            <div class="max-w-screen-sm p-2 pt-4 m-2 border border-gray-200 rounded lg:max-w-xs lg:absolute">
-                <h3 class="block px-3 mb-3 text-sm font-semibold tracking-wide text-gray-900 uppercase lg:mb-3 lg:text-xs">Contents</h3>
-                <div class="prose-sm">{{ page.content.toc|raw }}</div>
+            <div class="max-w-screen-sm p-2 pt-4 m-2 border border-gray-200 rounded dark:border-gray-700 lg:max-w-xs lg:absolute">
+                <h3 class="block px-3 mb-3 text-sm font-semibold tracking-wide text-gray-900 uppercase dark:text-gray-100 lg:mb-3 lg:text-xs">Contents</h3>
+                <div class="prose-sm dark:prose-light">{{ page.content.toc|raw }}</div>
             </div>
         </div>
+        {% endif %}
 
         <div class="order-4 w-full overflow-hidden lg:w-4/5">
             <div class="{{ container }} ">{{ page.content.content|raw }}</div>
         </div>
 
     </div>
     {% else %}
-            <div class="p-3 prose ">
+            <div class="p-3 prose dark:prose-light">
                 <h1>{{ page.content.title(true)|raw }}</h1>
             </div>
 

diff --git a/packages/skeleton/templates/pushword.piedweb.com/page/_navbar.html.twig b/packages/skeleton/templates/pushword.piedweb.com/page/_navbar.html.twig
@@ -1,13 +1,13 @@
 <header class="fixed top-0 left-0 right-0 z-50 flex flex-col">
-    <div class="flex flex-row items-center justify-between p-4 bg-white border-b border-gray-200">
+    <div class="flex flex-row items-center justify-between p-4 bg-white border-b border-gray-200 dark:bg-gray-900 dark:border-gray-700">
         <span class="block mr-1 font-mono text-4xl">
             <a class="flex font-bold logo text-primary hover:text-primary-light" href="{{ homepage() }}">
                 <span style="background-image:url('/assets/logo.svg')" class="inline-block w-12 h-12 bg-center bg-contain fill-current text-primary-light"></span>
                 <span class="hidden mt-2 ml-2 text-small lg:inline-block">{{ app_name }}</span>
             </a>
         </span>
         <div class="flex flex-row flex-1 mx-3 md:mx-6">
-            <input type="text" id="search" placeholder="Search" class="w-20 px-2 py-1 text-xl border-none rounded md:rounded-r-none md:rounded-l-lg md:w-full focus:w-60 md:focus:w-full focus:shadow-none focus:outline-none focus:border-none bg-gray-50">
+            <input type="text" id="search" placeholder="Search" class="w-20 px-2 py-1 text-xl border-none rounded md:rounded-r-none md:rounded-l-lg md:w-full focus:w-60 md:focus:w-full focus:shadow-none focus:outline-none focus:border-none bg-gray-50 dark:bg-gray-700">
             <button class="hidden px-4 py-4 font-bold text-white rounded-r-lg md:block bg-primary-light hover:bg-primary" onclick="document.querySelector('#search').focus()">
                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                     <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>

diff --git a/packages/skeleton/templates/pushword.piedweb.com/page/_right_column.html.twig b/packages/skeleton/templates/pushword.piedweb.com/page/_right_column.html.twig
@@ -24,19 +24,19 @@
 <div class="h-full">
     <input type="checkbox" id="right-column" class="hidden">
 
-    <label for="right-column" id="right-column-toggler" class="fixed bottom-0 left-0 z-50 block w-12 h-12 p-3 m-2 bg-primary hover:bg-primary-light">
+    <label for="right-column" id="right-column-toggler" class="fixed bottom-0 left-0 z-50 block w-12 h-12 p-3 m-2 cursor-pointer bg-primary hover:bg-primary-light">
         <div class="relative flex flex-wrap content-center w-6 h-6">
             <span class="block w-full h-1 border-b-2 border-gray-100"></span>
             <span class="block w-full h-1 my-1 border-b-2 border-gray-100"></span>
             <span class="block w-full h-1 border-b-2 border-gray-100"></span>
         </div>
     </label>
-    <div id="right-column-nav" class="sticky z-40 h-full px-3 mr-24 overflow-hidden text-sm bg-white border-r border-gray-200 w-60 lg:block lg:top-18 lg:mr-3">
-        {% set heading_class = 'block px-3 mb-3 text-sm font-semibold tracking-wide text-gray-900 uppercase lg:mb-3 lg:text-xs mt-3' %}
-        {% set link_class = 'block px-3 py-2 transition-colors duration-200 relative hover:text-white hover:bg-primary-light text-gray-900 rounded' %}
+    <div id="right-column-nav" class="sticky z-40 h-full px-3 mr-24 overflow-hidden text-sm bg-white border-r border-gray-200 w-60 lg:block lg:top-18 lg:mr-3 dark:bg-gray-900 dark:border-gray-700">
+        {% set heading_class = 'block px-3 mb-3 text-sm font-semibold tracking-wide text-gray-900 dark:text-gray-100 uppercase lg:mb-3 lg:text-xs mt-3' %}
+        {% set link_class = 'block px-3 py-2 transition-colors duration-200 relative hover:text-white hover:bg-primary-light text-gray-900 dark:text-gray-100 rounded' %}
         {% for n in nav %}
             {% set uri = n.1 == '#' ? '#' : page(n.1) %}
-            <a href="{{ uri }}" class="{{ n.2 is defined ? heading_class : link_class }} {{ n.2 is not defined and isCurrentPage(uri, page) ? ' bg-gray-200' : '' }}">
+            <a href="{{ uri }}" class="{{ n.2 is defined ? heading_class : link_class }} {{ n.2 is not defined and isCurrentPage(uri, page) ? ' bg-gray-200 dark:bg-gray-700' : '' }}">
                 {{ n.0 }}</a>
         {% endfor %}
         {{ link('<div style="display:inline-block;margin-bottom: -2px;"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg></div> Source Code', 'https://github.com/Pushword/Pushword', link_class) }}

diff --git a/packages/skeleton/templates/pushword.piedweb.com/page/page_default.html.twig b/packages/skeleton/templates/pushword.piedweb.com/page/page_default.html.twig
@@ -3,7 +3,7 @@
 {% block html_opener %}
 	<html
 		lang="{{ page.locale|default(apps.get().defaultLocale) }}"
-		{{ mergeAttr({'class': 'leading-tight text-gray-900'}, page.htmlOpenerAttr|default({})) }}
+		{{ mergeAttr({'class': 'leading-tight text-gray-900 dark:bg-gray-900 dark:text-gray-100'}, page.htmlOpenerAttr|default({})) }}
 	>
 {% endblock %}