Using Sessions to Manage Theme Preference

Welcome back! As we continue to enhance our Flask ToDo application, let's delve into the use of sessions . In web development, a session is a way to store information specific to a user across multiple requests. This is extremely useful for personalizing the user's experience, such as by keeping track of their preferred theme. In this lesson, we'll focus on how to use Flask sessions to allow users to switch between a light and dark theme in our ToDo application. By the end of this lesson, you'll know how to implement a session-based theme management system and understand the practical application of sessions in a real-world scenario.

What Are Sessions?

In web development, a session is like a conversation between your browser and a website. It helps the website remember information about you as you move from one page to another. This is essential for things like staying logged in or remembering your preferences. Key Concepts: Starting a Session : When you visit a website, a session begins. It helps the site keep track of your interactions. Session ID : The browser gets a unique session ID, usually stored as a small file called a cookie. This ID is like your personal ticket, helping the website identify you.

How Do Sessions Work?

Sessions play a key role in making a website feel seamless and personalized for individual users. When a user interacts with a website, a unique session ID is assigned to their browser, usually stored as a cookie. Here's a simplified overview of how sessions function: Data Storage : The website stores user-specific information, such as preferences or progress, securely on its server. The session ID, carried by the user's browser, acts like a key to access this stored data. Continuity and Experience : Each time the user navigates or performs an action on the website, their session ID is sent along with the request. This allows the website to recognize the user and provide a consistent experience, such as keeping them logged in or remembering their preferred theme. The importance of sessions lies in their ability to offer a personalized experience, maintain the state of ongoing activities like filling forms or shopping carts, and enhance security by keeping sensitive data on the server rather than the user's device.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Python

from flask import Blueprint, redirect, url_for, session

theme_controller = Blueprint('theme', __name__)

@theme_controller.route('/set_theme/<string:theme>', methods=['GET'])
def set_theme(theme):
    # Store the theme preference in the session
    session['theme'] = theme
    # Redirect back to the ToDo list to apply the new theme
    return redirect(url_for('todo.list_todos'))

from flask import Blueprint, redirect, url_for, session

theme_controller = Blueprint('theme', __name__)

@theme_controller.route('/set_theme/<string:theme>', methods=['GET'])
def set_theme(theme):
    # Store the theme preference in the session
    session['theme'] = theme
    # Redirect back to the ToDo list to apply the new theme
    return redirect(url_for('todo.list_todos'))

Python

from flask import Flask
from controllers.todo_controller import todo_controller
from controllers.theme_controller import theme_controller
from middlewares.error_handler import setup_error_handler
from models import db
from config import Config

app = Flask(__name__)

app.config.from_object(Config)

# Set a secret key for session management
app.secret_key = 'your_unique_secret_key'

db.init_app(app)

with app.app_context():
    db.create_all()

setup_error_handler(app)

app.register_blueprint(todo_controller)

# Import the new theme controller
app.register_blueprint(theme_controller)

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=3000, debug=True)

from flask import Flask
from controllers.todo_controller import todo_controller
from controllers.theme_controller import theme_controller
from middlewares.error_handler import setup_error_handler
from models import db
from config import Config

app = Flask(__name__)

app.config.from_object(Config)

# Set a secret key for session management
app.secret_key = 'your_unique_secret_key'

db.init_app(app)

with app.app_context():
    db.create_all()

setup_error_handler(app)

app.register_blueprint(todo_controller)

# Import the new theme controller
app.register_blueprint(theme_controller)

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=3000, debug=True)

Python

from flask import Blueprint, render_template, request, redirect, url_for, session
from services.todo_service import TodoService

todo_service = TodoService()

todo_controller = Blueprint('todo', __name__)

@todo_controller.route('/', methods=['GET'])
def list_todos():
    sort_by = request.args.get('sort_by')
    filter_by = request.args.get('filter_by')
    todos = todo_service.get_all(sort_by=sort_by, filter_by=filter_by)
    # Retrieve theme from session or default to 'light'
    theme = session.get('theme', 'light')
    # Pass the theme to template
    return render_template('todo_list.html', todos=todos, theme=theme)
    
@todo_controller.route('/edit/<int:todo_id>', methods=['GET'])
def edit_todo(todo_id):
    todo_item = todo_service.get_by_id(todo_id)
    if not todo_item:
        return redirect(url_for('todo.list_todos'))
    # Retrieve theme from session or default to 'light'
    theme = session.get('theme', 'light')
    # Pass the theme to template
    return render_template('todo_edit.html', todo=todo_item, theme=theme)
    
# Other routes...

from flask import Blueprint, render_template, request, redirect, url_for, session
from services.todo_service import TodoService

todo_service = TodoService()

todo_controller = Blueprint('todo', __name__)

@todo_controller.route('/', methods=['GET'])
def list_todos():
    sort_by = request.args.get('sort_by')
    filter_by = request.args.get('filter_by')
    todos = todo_service.get_all(sort_by=sort_by, filter_by=filter_by)
    # Retrieve theme from session or default to 'light'
    theme = session.get('theme', 'light')
    # Pass the theme to template
    return render_template('todo_list.html', todos=todos, theme=theme)
    
@todo_controller.route('/edit/<int:todo_id>', methods=['GET'])
def edit_todo(todo_id):
    todo_item = todo_service.get_by_id(todo_id)
    if not todo_item:
        return redirect(url_for('todo.list_todos'))
    # Retrieve theme from session or default to 'light'
    theme = session.get('theme', 'light')
    # Pass the theme to template
    return render_template('todo_edit.html', todo=todo_item, theme=theme)
    
# Other routes...

CSS

body.light-theme {
    font-family: Arial, sans-serif;
    margin: 10px;
    color: #1c1c1c; /* Dark text color for contrast */
    background-color: #f4f4f4; /* Light background for light mode */
}

body.dark-theme {
    font-family: Arial, sans-serif;
    margin: 10px;
    color: #e0e0e0;  /* Light text color for contrast */
    background-color: #1c1c1c;  /* Dark background for dark mode */ 
}

/* Other components without theme... */

body.light-theme {
    font-family: Arial, sans-serif;
    margin: 10px;
    color: #1c1c1c; /* Dark text color for contrast */
    background-color: #f4f4f4; /* Light background for light mode */
}

body.dark-theme {
    font-family: Arial, sans-serif;
    margin: 10px;
    color: #e0e0e0;  /* Light text color for contrast */
    background-color: #1c1c1c;  /* Dark background for dark mode */ 
}

/* Other components without theme... */

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo List</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<!-- Use the given theme in the body -->
<body class="{{ theme }}-theme">
    <h1>Todo List</h1>

    <!-- Option to switch themes -->
    <form action="{{ url_for('theme.set_theme', theme=('dark' if theme == 'light' else 'light')) }}" method="GET" style="display: inline;">
        <button type="submit">Switch Theme</button>
    </form>

    <!-- Other components... -->

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo List</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<!-- Use the given theme in the body -->
<body class="{{ theme }}-theme">
    <h1>Todo List</h1>

    <!-- Option to switch themes -->
    <form action="{{ url_for('theme.set_theme', theme=('dark' if theme == 'light' else 'light')) }}" method="GET" style="display: inline;">
        <button type="submit">Switch Theme</button>
    </form>

    <!-- Other components... -->

</body>
</html>

Python

from flask import Blueprint, redirect, url_for, session

theme_controller = Blueprint('theme', __name__)

@theme_controller.route('/set_theme/<string:theme>', methods=['GET'])
def set_theme(theme):
    # Store the theme preference in the session
    session['theme'] = theme
    # Redirect back to the ToDo list to apply the new theme
    return redirect(url_for('todo.list_todos'))

Python

from flask import Flask
from controllers.todo_controller import todo_controller
from controllers.theme_controller import theme_controller
from middlewares.error_handler import setup_error_handler
from models import db
from config import Config

app = Flask(__name__)

app.config.from_object(Config)

# Set a secret key for session management
app.secret_key = 'your_unique_secret_key'

db.init_app(app)

with app.app_context():
    db.create_all()

setup_error_handler(app)

app.register_blueprint(todo_controller)

# Import the new theme controller
app.register_blueprint(theme_controller)

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=3000, debug=True)

Python

from flask import Blueprint, render_template, request, redirect, url_for, session
from services.todo_service import TodoService

todo_service = TodoService()

todo_controller = Blueprint('todo', __name__)

@todo_controller.route('/', methods=['GET'])
def list_todos():
    sort_by = request.args.get('sort_by')
    filter_by = request.args.get('filter_by')
    todos = todo_service.get_all(sort_by=sort_by, filter_by=filter_by)
    # Retrieve theme from session or default to 'light'
    theme = session.get('theme', 'light')
    # Pass the theme to template
    return render_template('todo_list.html', todos=todos, theme=theme)
    
@todo_controller.route('/edit/<int:todo_id>', methods=['GET'])
def edit_todo(todo_id):
    todo_item = todo_service.get_by_id(todo_id)
    if not todo_item:
        return redirect(url_for('todo.list_todos'))
    # Retrieve theme from session or default to 'light'
    theme = session.get('theme', 'light')
    # Pass the theme to template
    return render_template('todo_edit.html', todo=todo_item, theme=theme)
    
# Other routes...

CSS

body.light-theme {
    font-family: Arial, sans-serif;
    margin: 10px;
    color: #1c1c1c; /* Dark text color for contrast */
    background-color: #f4f4f4; /* Light background for light mode */
}

body.dark-theme {
    font-family: Arial, sans-serif;
    margin: 10px;
    color: #e0e0e0;  /* Light text color for contrast */
    background-color: #1c1c1c;  /* Dark background for dark mode */ 
}

/* Other components without theme... */

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo List</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<!-- Use the given theme in the body -->
<body class="{{ theme }}-theme">
    <h1>Todo List</h1>

    <!-- Option to switch themes -->
    <form action="{{ url_for('theme.set_theme', theme=('dark' if theme == 'light' else 'light')) }}" method="GET" style="display: inline;">
        <button type="submit">Switch Theme</button>
    </form>

    <!-- Other components... -->

</body>
</html>

Using Sessions to Manage Theme Preference

What Are Sessions?

How Do Sessions Work?

Join the 1M+ learners on CodeSignal

Implementing Theme Switching with Sessions

Configuring Flask for Session Management

Importance of the Secret Key

Integrating Themes in ToDo Controller

Styling the Themes in CSS

Applying Dynamic Theme in HTML Template

Summary and Next Steps