docs: make sample_deployment themable with a select button (#79)

danihodovic · Jun 25, 2024 · 2c0682a · 2c0682a
1 parent 3f5d396
commit 2c0682a
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 5 deletions.
diff --git a/sample_deployment/poetry.lock b/sample_deployment/poetry.lock
diff --git a/sample_deployment/pyproject.toml b/sample_deployment/pyproject.toml
@@ -7,7 +7,7 @@ readme = "README.md"
 
 [tool.poetry.dependencies]
 python = "^3.11"
-django-allauth-ui = {version = "1.0.0b1", allow-prereleases = true}
+django-allauth-ui = "^1.1.1"
 gunicorn = "^22.0.0"
 django-allauth = "^0.63.3"
 django-widget-tweaks = "^1.5.0"

diff --git a/sample_deployment/sample_deployment/settings.py b/sample_deployment/sample_deployment/settings.py
@@ -149,6 +149,7 @@
 # Static files (CSS, JavaScript, Images)
 # https://docs.djangoproject.com/en/4.2/howto/static-files/
 
+STATICFILES_DIRS = [str(BASE_DIR / "sample_deployment" / "static")]
 STATIC_URL = "static/"
 STATIC_ROOT = "staticfiles"
 

diff --git a/sample_deployment/sample_deployment/static/theme.js b/sample_deployment/sample_deployment/static/theme.js
@@ -0,0 +1,18 @@
+document.addEventListener('DOMContentLoaded', function() {
+  const theme = window.localStorage.getItem("allauth-theme") || "emerald";
+  setTheme(theme);
+  const select = document.getElementById("select-theme");
+  select.value = theme;
+}, false);
+
+function onSelectChange() {
+  const select = document.getElementById("select-theme");
+  const theme = select.value;
+  setTheme(theme);
+}
+
+function setTheme(theme) {
+  const html = document.querySelector("html");
+  html.dataset.theme = theme;
+  window.localStorage.setItem("allauth-theme", theme);
+}
diff --git a/sample_deployment/sample_deployment/templates/allauth/layouts/base.html b/sample_deployment/sample_deployment/templates/allauth/layouts/base.html
@@ -0,0 +1,50 @@
+{% extends "allauth/layouts/base.html" %}
+{% load static %}
+{% load tailwind_tags %}
+{% block extra_head %}
+    {{ block.super }}
+    {% tailwind_css %}
+{% endblock %}
+{% block body %}
+    <div class="fixed hidden top-5 right-5 md:block w-28">
+        <select id="select-theme"
+                class="w-full px-5 py-1 text-sm text-primary"
+                onchange="onSelectChange()">
+            <option disabled selected>Theme</option>
+            <option>light</option>
+            <option>dark</option>
+            <option>cupcake</option>
+            <option>bumblebee</option>
+            <option>emerald</option>
+            <option>corporate</option>
+            <option>synthwave</option>
+            <option>retro</option>
+            <option>cyberpunk</option>
+            <option>valentine</option>
+            <option>halloween</option>
+            <option>garden</option>
+            <option>forest</option>
+            <option>aqua</option>
+            <option>lofi</option>
+            <option>pastel</option>
+            <option>fantasy</option>
+            <option>wireframe</option>
+            <option>black</option>
+            <option>luxury</option>
+            <option>dracula</option>
+            <option>cmyk</option>
+            <option>autumn</option>
+            <option>business</option>
+            <option>acid</option>
+            <option>lemonade</option>
+            <option>night</option>
+            <option>coffee</option>
+            <option>winter</option>
+            <option>dim</option>
+            <option>nord</option>
+            <option>sunset</option>
+        </select>
+    </div>
+    {{ block.super }}
+    <script src="{% static "theme.js" %}"></script>
+{% endblock body %}
diff --git a/sample_deployment/sample_deployment/theme/static_src/src/styles.css b/sample_deployment/sample_deployment/theme/static_src/src/styles.css
@@ -1,3 +1,27 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer components {
+  .social-github {
+    @apply bg-stone-900 hover:bg-black
+  }
+  .social-facebook {
+    @apply bg-blue-700 hover:bg-blue-800
+  }
+  .social-google {
+    @apply bg-red-700 hover:bg-red-800
+  }
+  .social-linkedin {
+    @apply bg-cyan-600 hover:bg-cyan-700
+  }
+  .social-strava {
+    @apply bg-orange-400 hover:bg-orange-500
+  }
+  .social-exist {
+    @apply bg-gray-500 hover:bg-gray-600
+  }
+  .social-wahoo {
+    @apply bg-cyan-500 hover:bg-cyan-700
+  }
+}
diff --git a/sample_deployment/sample_deployment/theme/static_src/tailwind.config.js b/sample_deployment/sample_deployment/theme/static_src/tailwind.config.js
@@ -26,6 +26,11 @@ module.exports = {
 		 */
 		'../../**/templates/**/*.html',
 
+		/*
+		 * Templates from allauth_ui
+		 */
+		'../../../../allauth_ui/templates/**/*.html',
+
 		/**
 		 * JS: If you use Tailwind CSS in JavaScript, uncomment the following lines and make sure
 		 * patterns match your project structure.