Django Switchable Theme
Step 1: Preparation, Create Django Project, Inital Migration
create virtualenv: virtualenv venv
start virtualenv: venv/Scripts/activate
install Django in virtualenv: pip install django==4.2
Create Django: django-admin startproject myproject
Go to myproject folder: cd myproject
Initial Migration: python manage.py migrate
Step 2: Create Django Apps
Create apps: python manage.py startapp myapp
Step 3: Project Setting: Register Apps, Set Templates Folder, Set Static (myproject/settings.py)
...
INSTALLED_APPS = [
...
'myapp', #updated
]
...
TEMPLATES = [
...
'DIRS': [Path(BASE_DIR, 'templates')], #updated
...
]
...
STATIC_URL = '/static/'
STATICFILES_DIRS= [Path(BASE_DIR,'static'),] #updated
...Step 4: Create CSS Styles in Static Folder
Create static/css/styles.css file
/* styles.css */
:root {
--background-color: #ffffff; /* Default (light) theme */
--text-color: #121212;
--primary-color: #121212; /* Example primary color */
/* Add more variables as needed */
}
body {
background-color: var(--background-color);
color: var(--text-color);
font-family: sans-serif; /* Example font */
}
/* Example element styling */
.container {
background-color: var(--background-color);
padding: 20px;
border-radius: 8px;
}
.btn-primary {
background-color: var(--primary-color);
border-color: var(--primary-color);
color: var(--background-color);
}
/* Dark Theme */
body.dark-theme {
--background-color: #121212;
--text-color: #ffffff;
--primary-color: #ffffff;
}
/* Other themes can be defined similarly */
body.sepia-theme {
--background-color: #f5f0e3;
--text-color: #705e4a;
--primary-color: #a0522d;
}Step 5: Create HTML Files in Templates Folder
Create templates/index.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
</head>
<body>
<div class="container">
<h1>Welcome!</h1>
<p>This is a themed page.</p>
<button class="btn-primary">Sample Button</button>
</div>
<button onclick="setTheme('light')">Light</button>
<button onclick="setTheme('dark')">Dark</button>
<button onclick="setTheme('sepia')">Sepia</button>
<script>
function setTheme(themeName) {
document.body.classList = []; // Clear other classes
if (themeName !== 'light') { // Only add class if not default
document.body.classList.add(themeName + '-theme');
}
// Store the theme preference in localStorage
localStorage.setItem('theme', themeName);
}
// Check for saved theme on page load
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
setTheme(savedTheme);
}
</script>
</body>
</html>Step 6: Create Function Views myapp/views.py
from django.shortcuts import render
# Create your views here.
def index(request):
return render(request, "index.html")Step 7: Setup URLS
Create myapp/urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', view=views.index, name="index"),
]Update myproject/urls.py
from django.contrib import admin
from django.urls import path, include #updated
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('myapp.urls')), #updated
]Step 8: Run Server and Testing
Run Server: python manage.py runserver
Testing :
Open http://127.0.0.1:8000/
Note: Theme data is stored in local storage, can be viewed in web developer tools.
