fix: switch theme

tailwind.config.js

@@ -1,66 +0,0 @@
-/**
- * This is a minimal config.
- *
- * If you need the full config, get it from here:
- * https://unpkg.com/browse/tailwindcss@latest/stubs/defaultConfig.stub.js
- */
-const colors = require('tailwindcss/colors')
-
-
-module.exports = {
-  content: [
-    /**
-     * HTML. Paths to Django template files that will contain Tailwind CSS classes.
-     */
-
-    /*  Templates within theme app (<tailwind_app_name>/templates), e.g. base.html. */
-    '../templates/**/*.html',
-
-    /*
-     * Main templates directory of the project (BASE_DIR/templates).
-     * Adjust the following line to match your project structure.
-     */
-    '../../templates/**/*.html',
-
-    /*
-     * Templates in other django apps (BASE_DIR/<any_app_name>/templates).
-     * Adjust the following line to match your project structure.
-     */
-    '../../**/templates/**/*.html',
-
-    /**
-     * JS: If you use Tailwind CSS in JavaScript, uncomment the following lines and make sure
-     * patterns match your project structure.
-     */
-    /* JS 1: Ignore any JavaScript in node_modules folder. */
-    // '!../../**/node_modules',
-    /* JS 2: Process all JavaScript files in the project. */
-    // '../../**/*.js',
-
-    /**
-     * Python: If you use Tailwind CSS classes in Python, uncomment the following line
-     * and make sure the pattern below matches your project structure.
-     */
-    // '../../**/*.py'
-  ],
-  darkMode: 'class',
-  theme: {
-    extend: {
-      colors: {
-        gray: colors.zinc,
-        accent: colors.teal,
-        primary: colors.rose,
-      }
-    }
-  },
-  plugins: [
-    /**
-     * '@tailwindcss/forms' is the forms plugin that provides a minimal styling
-     * for forms. If you don't like it or have own styling for forms,
-     * comment the line below to disable '@tailwindcss/forms'.
-     */
-    require('@tailwindcss/forms'),
-    require('@tailwindcss/typography'),
-    require('@tailwindcss/aspect-ratio'),
-  ],
-}

theme/static/theme/js/theme.js

@@ -1,13 +1,22 @@
 const currentTheme = localStorage.getItem('theme')
 
+const darkIcon = document.getElementById('theme-toggle-dark-icon')
+const lightIcon = document.getElementById('theme-toggle-light-icon')
+
 if (currentTheme === 'dark') {
   document.documentElement.classList.add('dark')
-  document.getElementById('theme-toggle-dark-icon').classList.add('hidden')
-  document.getElementById('theme-toggle-light-icon').classList.remove('hidden')
+
+  if (darkIcon !== null && lightIcon !== null) {
+    darkIcon.classList.add('hidden')
+    lightIcon.classList.remove('hidden')
+  }
 } else {
   document.documentElement.classList.remove('dark')
-  document.getElementById('theme-toggle-light-icon').classList.add('hidden')
-  document.getElementById('theme-toggle-dark-icon').classList.remove('hidden')
+
+  if (darkIcon !== null && lightIcon !== null) {
+    darkIcon.classList.remove('hidden')
+    lightIcon.classList.add('hidden')
+  }
 }
 
 
@@ -17,12 +26,12 @@ function switchTheme() {
   if (theme === 'dark') {
     document.documentElement.classList.remove('dark')
     localStorage.setItem('theme', 'light')
-    document.getElementById('theme-toggle-dark-icon').classList.remove('hidden')
-    document.getElementById('theme-toggle-light-icon').classList.add('hidden')
+    darkIcon.classList.remove('hidden')
+    lightIcon.classList.add('hidden')
   } else {
     document.documentElement.classList.add('dark')
     localStorage.setItem('theme', 'dark')
-    document.getElementById('theme-toggle-light-icon').classList.remove('hidden')
-    document.getElementById('theme-toggle-dark-icon').classList.add('hidden')
+    lightIcon.classList.remove('hidden')
+    darkIcon.classList.add('hidden')
   }
 }

users/forms/login.py

@@ -6,10 +6,7 @@ from web.mixins import StylingMixin
 
 
 class LoginForm(StylingMixin, AuthenticationForm):
-    styled_fields = [
-        "username",
-        "password",
-    ]
+    styled_fields = []
     placeholder_for_field = {"username": _("pablo@shoppy.com"), "password": "********"}
 
     username = UsernameField(