From 14a23a072dae97476615c526ff4fa825e6d41215 Mon Sep 17 00:00:00 2001 From: Alexandre Aubin <4533074+alexAubin@users.noreply.github.com> Date: Sun, 12 May 2024 17:37:37 +0200 Subject: [PATCH] store: add dark mode (#2327) --- store/README.md | 3 ++ store/assets/fetch_assets | 7 +++-- store/assets/tailwind-local.css | 4 +-- store/assets/tailwind.config.js | 5 ++-- store/templates/app.html | 4 +-- store/templates/base.html | 51 ++++++++++++++++++++++----------- store/templates/catalog.html | 18 ++++++------ store/templates/charts.html | 10 +++++++ store/templates/dash.html | 4 +-- store/templates/index.html | 8 +++--- store/templates/wishlist.html | 22 +++++++------- 11 files changed, 86 insertions(+), 50 deletions(-) diff --git a/store/README.md b/store/README.md index be1892e8c6..c8a5f75e30 100644 --- a/store/README.md +++ b/store/README.md @@ -32,6 +32,9 @@ And then start the dev server: ```bash source venv/bin/activate FLASK_APP=app.py FLASK_ENV=development flask --debug run + +# In another term, launch the tailwindcss process to autorebuild css: +cd assets; ./tailwindcss-linux-x64 --input tailwind-local.css --output tailwind.css --watch ``` ## Translation diff --git a/store/assets/fetch_assets b/store/assets/fetch_assets index 888f484e44..4a931514b3 100644 --- a/store/assets/fetch_assets +++ b/store/assets/fetch_assets @@ -1,11 +1,14 @@ # Production -> download standalone tailwind to compile only what we need -wget https://github.com/tailwindlabs/tailwindcss/releases/download/v3.3.3/tailwindcss-linux-x64 +wget https://github.com/tailwindlabs/tailwindcss/releases/download/v3.4.3/tailwindcss-linux-x64 chmod +x tailwindcss-linux-x64 ./tailwindcss-linux-x64 --input tailwind-local.css --output tailwind.css --minify # Development -> we use the JS magic thingy -curl -L https://cdn.tailwindcss.com?plugins=forms > tailwind-css.js +#curl -L https://cdn.tailwindcss.com?plugins=forms > tailwind-css.js + +# Dark theme stuff +git clone https://github.com/jjranalli/nightwind # Canvasjs (for the chart page only) curl -L https://cdn.canvasjs.com/ga/canvasjs.min.js > canvasjs.min.js diff --git a/store/assets/tailwind-local.css b/store/assets/tailwind-local.css index 5bc57a7457..e08dab0c9d 100644 --- a/store/assets/tailwind-local.css +++ b/store/assets/tailwind-local.css @@ -3,8 +3,8 @@ @tailwind utilities; @layer utilities { - body { - @apply text-gray-800; + input, textarea, select { + @apply !rounded-md shadow-sm border-gray-200 !bg-neutral-50; } .btn { @apply text-sm font-medium rounded-md px-4 py-2 transition; diff --git a/store/assets/tailwind.config.js b/store/assets/tailwind.config.js index c5b0b2fc06..76d9411d82 100644 --- a/store/assets/tailwind.config.js +++ b/store/assets/tailwind.config.js @@ -1,11 +1,10 @@ /** @type {import('tailwindcss').Config} */ module.exports = { content: ['../templates/*.html'], - theme: { - extend: {}, - }, + darkMode: 'selector', plugins: [ require('@tailwindcss/forms'), + require('./nightwind/src/index.js'), ], safelist: [ 'safelisted', diff --git a/store/templates/app.html b/store/templates/app.html index e07cfcf7b8..a9998238cd 100644 --- a/store/templates/app.html +++ b/store/templates/app.html @@ -82,9 +82,9 @@

12 %}text-2 {{ _("Demo") }} {% endif %} - + Install
with - YunoHost + YunoHost diff --git a/store/templates/base.html b/store/templates/base.html index dba41be7e4..0791df6233 100644 --- a/store/templates/base.html +++ b/store/templates/base.html @@ -12,17 +12,17 @@ - {% if config.DEBUG %} - - - {% else %} - {% endif %} + - +