Skip to content

06_theme_management_.md

Latest commit

 

History

History
240 lines (181 loc) · 14.4 KB

06_theme_management_.md

File metadata and controls

240 lines (181 loc) · 14.4 KB

Chapter 6: Theme Management

Welcome back to the Rushi-Bashfolio tutorial! In the last chapter, Output Rendering Engine, we saw how the website takes the text content for command responses and displays it on the screen, line by line, with cool typing effects.

But what about the look of that text? The background color? The color of the prompt? The font style? That's all controlled by the Theme Management system.

What is Theme Management?

Think about changing the wallpaper or the color scheme on your computer or phone. Theme Management in Rushi-Bashfolio is just like that! It's the system that lets you change the entire visual style of the web terminal with a single click.

Its main jobs are:

  1. Defining Different Styles: Having separate sets of rules (called themes) for how everything should look (colors, fonts, spacing).
  2. Applying a Chosen Style: Loading and activating the CSS rules for the theme you select.
  3. Providing a Way to Switch: Offering a user interface element (like the floating boxes you see) that lets you easily pick a theme.
  4. Remembering Your Choice: Saving your preferred theme so it loads automatically next time you visit.

It's like having a "Display Settings" menu specifically for the terminal's appearance.

The Core Task: Changing the Look and Feel

The main goal of Theme Management is simple: allow the user to instantly change the appearance of the terminal.

Here's the central use case:

  1. The user sees the terminal with the current theme applied.
  2. They interact with a visual element (the theme switcher).
  3. They select a different theme.
  4. The website instantly changes colors, fonts, and other styles to match the new theme.
  5. The website remembers this choice for their next visit.

Defining Themes: Separate CSS Files

In web development, the visual style of a page is controlled by CSS (Cascading Style Sheets). A theme is essentially just a collection of CSS rules that define the look of different elements.

In Rushi-Bashfolio, each theme has its own dedicated CSS file in the css/ folder. You can see files like aurora.css, espresso.css, green.css, pink.css, b&w.css, academia.css, and default.css.

Let's look at how just the body element (the main background and text color container from Terminal Core UI) is styled differently in two themes:

From css/aurora.css:

/* From css/aurora.css */
body {
    /* ... other properties ... */
    color: #d0e7f9; /* Light bluish text */
    background: linear-gradient(180deg, #0b0c10 0%, #232946 100%); /* Dark gradient background */
    /* ... other properties ... */
}

From css/espresso.css:

/* From css/espresso.css */
* {
    /* ... different font size ... */
    font-size: 13px;
    /* ... other properties ... */
}

body {
    /* ... other properties ... */
    color: #f8f8f2; /* Cream white text */
    background: #1e1e1e; /* Espresso black solid background */
    /* ... different box shadow ... */
    box-shadow: inset 0 0 20px 0 #000000cc;
    /* ... other properties ... */
}

You can see how just by changing the color, background, and maybe font-size properties for the body, the basic look changes completely between themes. Each theme file contains different styles for the prompt (#liner), the cursor (.cursor), command output lines (p, .command, .error), links (a), and so on.

Applying Themes: The CSS Link Tag

The web browser knows which CSS file to use based on the <link> tag in the <head> section of the index.html file.

Look at the <head> in index.html:

<!-- From index.html <head> (simplified) -->
<head>
    <!-- ... meta tags, title ... -->
    <link rel="stylesheet" type="text/css" media="screen" href="css/aurora.css">
    <link rel="stylesheet" type="text/css" media="screen" href="css/set_theme.css">
    <!-- ... other theme links might be commented out ... -->
    <!-- <link rel="stylesheet" type="text/css" media="screen" href="css/espresso.css"> -->
    <!-- ... -->
</head>

The line <link rel="stylesheet" ... href="css/aurora.css"> tells the browser to load and apply the styles from the aurora.css file. The other theme links are commented out, meaning they are ignored by the browser.

To switch themes, the website needs to change the href attribute of this <link> tag to point to a different CSS file (e.g., change "css/aurora.css" to "css/espresso.css").

The Theme Switcher UI: HTML and CSS

How do you select a theme? The project has a floating panel with colored boxes. This panel is defined in the HTML structure near the end of the index.html body:

<!-- From index.html (simplified) -->
<body>
    <!-- ... terminal content ... -->

    <!-- Theme Switcher -->
    <div id="theme-switcher">
        <div class="theme-box" data-theme="aurora.css" style="background:#232946" title="Aurora"><span>Aurora</span></div>
        <div class="theme-box" data-theme="espresso.css" style="background:#1e1e1e" title="Espresso"><span>Espresso</span></div>
        <!-- ... other theme-box divs ... -->
    </div>

    <!-- ... scripts ... -->
</body>

Explanation:

  1. <div id="theme-switcher">: This is the main container for the theme switcher.
  2. <div class="theme-box" ...>: Each of these divs represents a single theme option.
    • data-theme="aurora.css": This custom data- attribute is important! It stores the filename of the CSS file for this theme. JavaScript will read this when the box is clicked.
    • style="background:#232946": This sets a background color for the box itself, visually representing the theme.
    • title="Aurora": Provides a tooltip when you hover.
    • <span>Aurora</span>: Contains the theme name, which appears when you hover over the box.

The css/set_theme.css file contains all the styling for #theme-switcher and .theme-box to make them float in the corner, have rounded corners, show the name on hover, and hide/show based on whether the main container is hovered.

Making it Interactive: JavaScript

The magic that connects the clicking of a .theme-box to changing the <link> tag's href happens in the <script> block right before the closing </body> tag in index.html.

Here's the core JavaScript logic for theme switching:

// From index.html (script block - simplified)

// 1. Get references to the elements we need
const themeBoxes = document.querySelectorAll('#theme-switcher .theme-box'); // All theme boxes
const themeLink = document.querySelector('link[rel=stylesheet][href^="css/"]'); // The main theme CSS link

// Helper function to mark the currently active theme box
function setActiveThemeBox(theme) {
  themeBoxes.forEach(box => {
    if (box.getAttribute('data-theme') === theme) {
      box.classList.add('active'); // Add 'active' class to the matching box
    } else {
      box.classList.remove('active'); // Remove 'active' from others
    }
  });
}

// 2. Add a click listener to each theme box
themeBoxes.forEach(box => {
  box.addEventListener('click', () => {
    const theme = box.getAttribute('data-theme'); // Get the theme filename from data-theme

    if (themeLink) { // Check if the link tag was found
      themeLink.setAttribute('href', 'css/' + theme); // *** CHANGE THE CSS FILE! ***
      localStorage.setItem('selectedTheme', theme); // *** REMEMBER THE CHOICE! ***
      setActiveThemeBox(theme); // Update which box looks active
    }
  });
});

// 3. On page load, check if a theme was saved
const savedTheme = localStorage.getItem('selectedTheme');
if (savedTheme && themeLink) {
  themeLink.setAttribute('href', 'css/' + savedTheme); // Load saved theme
  setActiveThemeBox(savedTheme); // Mark it active
} else {
  // If no saved theme, figure out which one is initially loaded and mark it active
  const currentTheme = themeLink.getAttribute('href').replace('css/', '');
  setActiveThemeBox(currentTheme);
}

Explanation:

  1. Getting Elements: It finds all the theme box divs and, importantly, the <link> tag that's currently loading a CSS file from the css/ folder.
  2. setActiveThemeBox: This small function is just for updating the appearance of the theme switcher itself, adding an active class to the box corresponding to the currently loaded theme so you can see which one is selected.
  3. Click Listener: It loops through each .theme-box and adds an event listener. When a box is clicked:
    • It reads the data-theme attribute to get the name of the CSS file (e.g., "espresso.css").
    • themeLink.setAttribute('href', 'css/' + theme);: This is the core theme-switching action! It changes the href of the <link> tag. The browser immediately notices this change and loads the new CSS file and applies its styles, changing the entire look of the page.
    • localStorage.setItem('selectedTheme', theme);: This saves the chosen theme's filename (e.g., "espresso.css") into the browser's localStorage. This is a simple way for a website to store small pieces of information persistently in your browser, so it's still there even if you close and reopen the tab or browser.
    • setActiveThemeBox(theme);: Updates the visual state of the theme boxes.
  4. Loading Saved Theme: When the page first loads, the script checks localStorage for a value stored under the key 'selectedTheme'. If it finds one, it means you chose a theme previously. It then updates the <link> tag's href to load that saved theme and marks the corresponding box as active. If no theme is saved, it just identifies the theme already loaded by the initial <link> tag (like aurora.css in the example HTML) and marks that box active.

How it Works: Switching Theme Flow

Here's a simplified sequence diagram showing what happens when you click a theme box:

sequenceDiagram
    participant User
    participant Browser
    participant Theme Box (Clicked)
    participant JS Script
    participant CSS Link Element (<link>)
    participant New CSS File

    User->Theme Box (Clicked): Click theme box
    Theme Box (Clicked)->JS Script: Trigger click event
    JS Script->Theme Box (Clicked): Read data-theme attribute (e.g., "espresso.css")
    JS Script->CSS Link Element (<link>): Update href attribute to "css/espresso.css"
    JS Script->JS Script: Save "espresso.css" to localStorage
    JS Script->Theme Box (Clicked): Call setActiveThemeBox("espresso.css")<br/>(Adds 'active' class)
    Browser->CSS Link Element (<link>): Detect href change
    Browser->New CSS File: Request css/espresso.css
    New CSS File-->Browser: Receive CSS rules
    Browser->Browser: Apply new CSS rules to the page
    Note over Browser: Page appearance changes instantly (colors, fonts, etc.)
Loading

This flow illustrates how a simple click triggers a JavaScript function that modifies the HTML <link> element, prompting the browser to load and apply a new set of styles, thereby changing the theme.

Key Components of Theme Management

Here's a summary of the pieces involved in managing themes:

Component Role in Theme Management Location
Separate CSS Files (.css) Define the visual rules for each distinct theme. css/ folder
<link rel="stylesheet"> Links the HTML page to the currently active theme CSS file. index.html <head>
<div id="theme-switcher"> Container for the theme selection UI panel. index.html <body>
<div class="theme-box"> Represents a single theme option in the UI. index.html <body>
data-theme attribute Stores the filename of the CSS file for a specific theme box. index.html .theme-box
css/set_theme.css Styles the floating theme switcher UI panel and boxes. css/ folder
JavaScript in <script> Handles click events, changes the <link> href, manages localStorage. index.html <body>
localStorage Remembers the user's selected theme between visits. Browser Feature
setActiveThemeBox function Updates which theme box in the UI appears selected. index.html <script>

These components work together to give the user control over the terminal's appearance and make their preference persistent.

Conclusion

In this chapter, we've explored Theme Management, the system that allows you to customize the look and feel of your Rushi-Bashfolio web terminal. We learned that themes are defined in separate CSS files, and the active theme is applied by linking to the correct CSS file in the HTML <head>. We saw how the floating theme switcher UI is built with HTML and styled with CSS, and most importantly, how a JavaScript script handles clicks on the theme boxes, changes the CSS link's href to switch themes, and uses localStorage to remember your preferred theme for future visits.

You now understand how all the major visible and interactive parts of the Rushi-Bashfolio project work together – from the basic UI and handling your typing, to interpreting commands, finding the right data, displaying output, and finally, changing the entire visual style with themes!

Generated by AI Codebase Knowledge Builder. References: [1], [2], [3], [4], [5], [6], [7], [8], [9]