Theming and Customization
Relevant source files
The following files were used as context for generating this wiki page:
The Smart Absen application employs a theming system to ensure a consistent "Kafebasabasi" brand identity across its various modules, from the admin dashboard to user-facing pages like QR authentication. The system is built upon a centralized stylesheet, CSS variables for dynamic theming (including a dark mode), and a combination of template composition and page-specific styling.
The core of the theming architecture is theme.css, which provides a set of design tokens (CSS variables) and utility classes for common components. Pages achieve a consistent look by linking this shared stylesheet. Customization for specific layouts is primarily handled through extensive inline <style> blocks within individual HTML template files, which sometimes override or supplement the base theme.
Core Theming Architecture
The foundation of the application's visual identity is defined in static/css/theme.css. This file establishes a system of design tokens using CSS variables, which allows for centralized control over the color palette, fonts, shadows, and other stylistic properties.
CSS Variables (Design Tokens)
The theming system is heavily reliant on CSS variables defined in the :root selector. These variables are organized into categories for colors, shadows, border-radii, and transitions, creating a "single source of truth" for the application's design language.
A separate [data-theme="dark"] selector redefines these variables to implement a dark mode.
The following diagram illustrates how CSS variables are defined and consumed.
Sources: static/css/theme.css:8-73
Color Palette
The color palette is designed around a "Kafebasabasi" coffee theme. The tables below summarize the primary color variables for both light (default) and dark themes.
Light Theme Colors
| Variable | Default Value | Description |
|---|---|---|
--coffee-dark | #3C2415 | Dark brown, used for primary text and headers. |
--coffee-medium | #8B4513 | Medium brown, for secondary elements. |
--coffee-light | #D2691E | Light brown, for accents and borders. |
--cream | #F5DEB3 | Cream color, used in backgrounds. |
--warm-white | #FDF6E3 | Off-white, for main page backgrounds. |
--accent-gold | #DAA520 | Golden accent color for active states and highlights. |
| Sources: static/css/theme.css:10-16 |
Dark Theme Colors
| Variable | Dark Mode Value | Description |
|---|---|---|
--coffee-dark | #1a1a2e | Very dark blue, replaces dark brown. |
--coffee-medium | #16213e | Dark blue, for secondary elements. |
--accent-gold | #e94560 | Bright red/pink, replaces gold for high contrast. |
--text-dark | #EAEAEA | Light gray for primary text. |
--white | #16213e | Dark blue, replaces white for card backgrounds. |
| Sources: static/css/theme.css:54-73 |
Component Utility Classes
theme.css also provides a set of reusable utility classes for styling common UI components like cards, buttons, and alerts. These classes ensure that components look consistent across the application.
| Class Name | Description |
|---|---|
.card-theme | A base class for card components with predefined shadow, border-radius, and background. |
.btn-theme | A base class for buttons, defining padding, font-weight, and transitions. |
.btn-primary-theme | A primary button style with a gradient background. |
.alert-theme | A base class for alert notifications. |
.alert-success-theme | A success-themed alert with a green gradient. |
.form-control-theme | A styled input field with custom focus states. |
| Sources: static/css/theme.css:100-218 |
Layout and Structure
The application uses two different strategies for layout and structure: Jinja2 template inheritance for some standalone pages and an <iframe>-based composition for the main admin dashboard.
Admin Dashboard Composition
The primary admin interface, templates/admin_dashboard.html, functions as a container or "shell" page. It defines the main layout, including the sidebar and top bar, and then uses <iframe> elements to load other admin pages (/admin/employees, /admin/attendance, etc.) into the main content area.
This approach means that each child page (e.g., admin_employees.html) is a full, independent HTML document that must link to the shared theme.css and other assets to maintain visual consistency.
The following diagram shows the <iframe>-based page composition.
Template Inheritance
An alternative structure using Jinja2 template inheritance is present in templates/admin_base.html. This file extends a master base.html template (not provided in context) and defines blocks for content, navigation, and extra CSS. Other templates can then extend admin_base.html to inherit the common admin layout. This pattern promotes code reuse but is not used by the main admin_dashboard.html page.
{% extends "base.html" %}
{% block content %}
<div class="admin-layout">
<div class="sidebar">
<!-- ... sidebar HTML ... -->
</div>
<div class="main-content">
{% block admin_content %}{% endblock %}
</div>
</div>
{% endblock %}
Sources: templates/admin_base.html:1-41
Dark Mode Implementation
The application includes a JavaScript-powered dark mode feature, primarily managed from within admin_dashboard.html.
Toggling Mechanism
- A UI element (e.g., a button) in the sidebar allows the user to toggle the theme.
- An
onclickevent calls theThemeManager.toggle()JavaScript function. - This script toggles the
data-themeattribute on the root<html>element between'light'and'dark'. - The browser automatically applies the CSS rules defined under the
[data-theme="dark"]selector intheme.css, which overrides the default:rootvariables.
The following sequence diagram illustrates the flow:
The JavaScript logic for the theme toggle is included directly within admin_dashboard.html.
// From templates/admin_dashboard.html
<a class="nav-link" href="#" onclick="event.preventDefault(); ThemeManager.toggle();">
<i class="bi bi-moon-stars"></i>
<span id="themeLabel">Dark Mode</span>
</a>
Sources: templates/admin_dashboard.html:718-722
Page-Specific Customization
While theme.css provides a global theme, many pages employ extensive inline <style> blocks for page-specific layouts and component styling. This allows for a high degree of customization per page but can lead to style overrides and potential inconsistencies.
For example, templates/admin_dashboard.html contains over 600 lines of inline CSS that define its unique sidebar, stats cards, and greeting card layout. It even re-defines the :root variables, effectively overriding the values from the external theme.css file for that page.
/* Example of inline style block from admin_dashboard.html */
:root {
--primary: #3C2415;
--secondary: #8B4513;
--accent: #DAA520;
/* ... and so on ... */
}
/* ... */
.sidebar {
position: fixed;
top: 0;
left: 0;
width: 280px;
/* ... more specific styles ... */
}
Sources: templates/admin_dashboard.html:15-626
Similarly, templates/qr_auth.html defines its own coffee-themed variables and layout to create a distinct look for the public-facing QR authentication page, demonstrating how the theming concept is adapted for different contexts.
Sources: templates/qr_auth.html:9-25
Conclusion
The theming and customization strategy in the Smart Absen project is a hybrid approach. It successfully establishes a consistent brand identity through a centralized theme.css file that leverages CSS variables for flexibility and a dark mode. However, it relies heavily on large, page-specific inline style blocks for complex layouts, particularly in the admin dashboard. The use of <iframe> for page composition in the admin area necessitates that each sub-page correctly links shared assets to maintain a unified appearance. This modular but sometimes duplicative approach allows for high customization at the cost of potentially increased maintenance.