fix theme toggle icons and add section for creating custom themes

Author: youzarsiph

.gitignore

@@ -61,6 +61,7 @@ local_settings.py
 db.sqlite3
 db.sqlite3-journal
 core/
+app/
 manage.py
 
 # Flask stuff:

README.md

@@ -12,21 +12,32 @@
 
 ## Overview
 
-Welcome to `drf-restwind`, a modern re-imagining of the Django REST Framework. This project utilizes TailwindCSS and DaisyUI to provide flexible and customizable UI solutions with minimal coding effort.
+Welcome to `drf-restwind`, a modern re-imagining of the Django REST Framework.
+This project utilizes TailwindCSS and DaisyUI to provide flexible and
+customizable UI solutions with minimal coding effort.
 
 ## Key Features
 
-- **Modern UI**: Crafted with TailwindCSS and DaisyUI for an appealing and contemporary design.
-- **Diverse Themes**: Offers a selection of visually appealing themes to choose from.
-- **Responsive Design**: Adapts seamlessly to various screen sizes for optimal user experience.
+- **Modern UI**: Crafted with TailwindCSS and DaisyUI for an appealing and
+  contemporary design.
+- **Diverse Themes**: Offers a selection of visually appealing themes to choose
+  from.
+- **Responsive Design**: Adapts seamlessly to various screen sizes for optimal
+  user experience.
 - **Accessibility**: Built with accessibility as a priority.
 - **Code Highlighting**: Integrates Highlight.js for enhanced code visibility.
-- **CI/CD Automation**: Utilizes GitHub Actions for automated deployment and integration, ensuring reliability and consistency.
-- **Efficient Dependency Management**: Employs Poetry for meticulous project dependency management.
-- **Consistent Code Formatting**: Uses Black for automatic code formatting, enhancing code readability.
-- **Thorough Code Linting**: Implements Ruff to proactively identify and resolve potential code issues, boosting code quality and maintainability.
-- **Comprehensive Testing**: Leverages Django’s testing framework for effective test management.
-- **Essential Configuration Files**: Includes necessary files such as `.gitignore` and `pyproject.toml` for streamlined project setup.
+- **CI/CD Automation**: Utilizes GitHub Actions for automated deployment and
+  integration, ensuring reliability and consistency.
+- **Efficient Dependency Management**: Employs Poetry for meticulous project
+  dependency management.
+- **Consistent Code Formatting**: Uses Black for automatic code formatting,
+  enhancing code readability.
+- **Thorough Code Linting**: Implements Ruff to proactively identify and resolve
+  potential code issues, boosting code quality and maintainability.
+- **Comprehensive Testing**: Leverages Django’s testing framework for effective
+  test management.
+- **Essential Configuration Files**: Includes necessary files such as
+  `.gitignore` and `pyproject.toml` for streamlined project setup.
 
 ## Screenshots
 
@@ -66,7 +77,8 @@ To customize `drf-restwind`, follow these steps:
 
 1. **Add Required Templates**:
 
-   In your app's templates directory, create a folder named `rest_framework` and add a file called `api.html`:
+   In your app's templates directory, create a folder named `rest_framework` and
+   add a file called `api.html`:
 
    ```bash
    mkdir app/templates/rest_framework
@@ -100,7 +112,8 @@ Now you can proceed with the following customization guides.
 
 ### Changing the Theme
 
-To modify the theme, update your `api.html`:
+You can view all available themes on [daisyUI](https://daisyui.com/) website. To
+modify the theme, update your `api.html`:
 
 ```html
 {% extends 'rest_framework/base.html' %}
@@ -113,11 +126,15 @@ To modify the theme, update your `api.html`:
 
 <!-- Set the highlight_theme accordingly -->
 {% block highlight_theme %}
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/base16/github-dark.min.css">
+<link
+  rel="stylesheet"
+  href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/base16/github-dark.min.css"
+>
 {% endblock %}
 ```
 
-If you want to update code highlight theme for API documentation (written in `Markdown` in `View`'s `docstring`):
+If you want to update code highlight theme for API documentation (written in
+`Markdown` in `View`'s `docstring`):
 
 - Install `markdown` and `pygments`:
 
@@ -145,13 +162,115 @@ If you want to update code highlight theme for API documentation (written in `Ma
 
   <!-- Set the highlight_theme accordingly -->
   {% block highlight_theme %}
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/base16/github-dark.min.css">
+  <link
+    rel="stylesheet"
+    href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/base16/github-dark.min.css"
+  >
 
   <!-- Include styles -->
   <link rel="stylesheet" href="{% static 'app/css/highlight.css' %}">
   {% endblock %}
   ```
 
+### Creating your own theme
+
+Can not find what you are looking for? Create your own theme:
+
+1. Go to daisyUI [theme generator](https://daisyui.com/theme-generator/).
+2. Select a theme or Click the `Random` button to generate a random theme.
+3. Customize the defaults.
+4. After customization click the `CSS` button to copy CSS variables.
+5. Follow the steps:
+   - Create `static` folder in your `app`:
+
+     ```console
+     mkdir -p app/static/app
+     cd app/static/app
+     ```
+
+   - Install dependencies:
+
+     ```console
+     npm install tailwindcss '@tailwindcss/cli'
+     npm install -D daisyui
+     ```
+
+   - Create your `css` folder and `styles`:
+
+     ```console
+     mkdir css
+     touch css/app.css
+     ```
+
+   - Open your `app.css` and add the following lines:
+
+     ```css
+     @import "tailwindcss";
+
+     @plugin "daisyui";
+
+     /* Add your customized theme here */
+     @plugin "daisyui/theme" {
+       name: "lemon";
+       default: false;
+       prefersdark: false;
+       color-scheme: "light";
+       --color-base-100: oklch(98% 0.031 120.757);
+       --color-base-200: oklch(96% 0.067 122.328);
+       --color-base-300: oklch(93% 0.127 124.321);
+       --color-base-content: oklch(40% 0.101 131.063);
+       --color-primary: oklch(0% 0 0);
+       --color-primary-content: oklch(100% 0 0);
+       --color-secondary: oklch(62% 0.265 303.9);
+       --color-secondary-content: oklch(97% 0.014 308.299);
+       --color-accent: oklch(55% 0.013 58.071);
+       --color-accent-content: oklch(98% 0.001 106.423);
+       --color-neutral: oklch(40% 0.101 131.063);
+       --color-neutral-content: oklch(98% 0.031 120.757);
+       --color-info: oklch(78% 0.154 211.53);
+       --color-info-content: oklch(30% 0.056 229.695);
+       --color-success: oklch(84% 0.238 128.85);
+       --color-success-content: oklch(27% 0.072 132.109);
+       --color-warning: oklch(75% 0.183 55.934);
+       --color-warning-content: oklch(26% 0.079 36.259);
+       --color-error: oklch(71% 0.202 349.761);
+       --color-error-content: oklch(28% 0.109 3.907);
+       --radius-selector: 2rem;
+       --radius-field: 0rem;
+       --radius-box: 2rem;
+       --size-selector: 0.25rem;
+       --size-field: 0.25rem;
+       --border: 1.5px;
+       --depth: 1;
+       --noise: 0;
+     }
+     ```
+
+   - Generate your `styles`:
+
+     ```console
+     npx @tailwindcss/cli -i css/app.css -o css/styles.css
+     ```
+
+   - Include your `styles.css` in your templates:
+
+     ```html
+     {% extends 'rest_framework/base.html' %}{% load static %}
+     
+     <!-- Add your styles -->
+     {% block styles %}
+     {{ block.super }}
+     <link rel="stylesheet" href="{% static 'app/css/styles.css' %}">
+     {% endblock %}
+
+     <!-- Your custom theme -->
+     {% block theme %}lemon{% endblock %}
+     ```
+
+   - Run your app to view the result.
+
+Now, you have a theme that matches your brand.
+
 ### Removing theme selector
 
 To remove the theme selector, update your `api.html`:
@@ -190,7 +309,6 @@ To remove theme toggle, update your `api.html`:
 {% extends 'rest_framework/base.html' %}
 
 {% block searchbar_right %}{% endblock %}
-
 {% block sidebar_styles %}lg:h-[calc(100dvh-1rem)] lg:max-h-[calc(100dvh-1rem)]{% endblock %}
 {% block content_styles %}lg:h-[calc(100dvh-1rem)] lg:max-h-[calc(100dvh-1rem)]{% endblock %}
 ```
@@ -206,6 +324,7 @@ To change the brand name and add custom links, modify your `api.html`:
 
 {% block title %}{% trans 'YOUR_BRAND' %}{% endblock %}
 
+<!-- Branding -->
 {% block branding %}
 <li
   class="tooltip tooltip-right tooltip-primary"
@@ -221,15 +340,15 @@ To change the brand name and add custom links, modify your `api.html`:
 </li>
 {% endblock %}
 
+<!-- Add your brand text -->
 {% block branding_text %}
-<!-- Add your brand -->
-<h1 class="hidden text-xl font-semibold text-primary lg:block">{% trans 'YOUR_BRAND' %}</h1>
+<h1 class="hidden text-xl font-semibold text-primary lg:block">
+  {% trans 'YOUR_BRAND' %}
+</h1>
 
 <!-- Or an empty div to center the search bar -->
 <div class="hidden lg:block"></div>
-{% endblock %}
-
-{% block userlinks %}
+{% endblock %} {% block userlinks %}
 <li
   class="tooltip tooltip-right tooltip-secondary"
   data-tip="{% trans 'Home' %}"
@@ -238,7 +357,7 @@ To change the brand name and add custom links, modify your `api.html`:
     href="https://www.django-rest-framework.org/"
     class="btn btn-sm btn-square btn-ghost lg:btn-md"
   >
-    <i data-lucide="house" class="size-4 lg:size-6"></i> 
+    <i data-lucide="house" class="size-4 lg:size-6"></i>
     <span class="sr-only">{% trans 'Home' %}</span>
   </a>
 </li>
@@ -260,7 +379,6 @@ To add menu items to profile menu, modify your `api.html`:
   </a>
 </li>
 {% endblock %}
-
 ```
 
 ### Generating CSS styles
@@ -279,12 +397,19 @@ npx @tailwindcss/cli -i ../static/rest_wind/css/app.css -o ../static/rest_wind/c
 
 ## Contributing
 
-We encourage community contributions! Please check our [CONTRIBUTING](CONTRIBUTING.md) guide for detailed instructions on how to contribute effectively. Your input and support play an essential role in the ongoing enhancement of this project.
+We encourage community contributions! Please check our
+[CONTRIBUTING](CONTRIBUTING.md) guide for detailed instructions on how to
+contribute effectively. Your input and support play an essential role in the
+ongoing enhancement of this project.
 
 ## Support
 
-If you have any questions or require assistance, feel free to open an issue or join our discussions in the [GitHub Discussions](https://github.com/youzarsiph/drf-restwind/discussions) section. We welcome community engagement and cherish your feedback!
+If you have any questions or require assistance, feel free to open an issue or
+join our discussions in the
+[GitHub Discussions](https://github.com/youzarsiph/drf-restwind/discussions)
+section. We welcome community engagement and cherish your feedback!
 
 ## Licensing
 
-This project is licensed under the MIT License. You can find the full terms of the license in the [LICENSE](LICENSE) file.
+This project is licensed under the MIT License. You can find the full terms of
+the license in the [LICENSE](LICENSE) file.

rest_wind/templates/rest_framework/base.html

@@ -235,8 +235,8 @@ <h1 class="hidden text-xl font-semibold text-primary lg:block">
                   class="theme-controller"
                   value="{% block toggle_theme %}light{% endblock %}"
                 />
-                <i data-lucide="sun-icon" class="swap-off size-4 lg:size-6"></i>
-                <i data-lucide="moon-star-icon" class="swap-on size-4 lg:size-6"></i>
+                <i data-lucide="sun" class="swap-off size-4 lg:size-6"></i>
+                <i data-lucide="moon-star" class="swap-on size-4 lg:size-6"></i>
               </label>
             </li>
           </ul>