Styling and Theming

Relevant source files

The following files were used as context for generating this wiki page:

• src/App.css
• index.html
• src/App.jsx
• src/components/TopBar.jsx
• vite.config.js
• package.json
• src/components/Form/Form.jsx

The Scripty application employs a hybrid styling approach, combining the utility-first framework Tailwind CSS for component-level styling with a custom CSS variable-driven system for global theming. This allows for both rapid development of UI components and easy customization of the application's overall look and feel.

Styling is primarily managed through a central App.css file, which defines theme variables, imports Tailwind CSS, and sets global styles. The theming is dynamic, allowing the user to change themes at runtime, with the selected theme persisted in the browser's localStorage.

Core Technologies

The styling architecture is built upon several key technologies configured within the project.

• Tailwind CSS: A utility-first CSS framework used for styling most of the UI components. It is included as a dependency and integrated into the Vite build process.
  • Sources: package.json:20, vite.config.js:3,9
• CSS Custom Properties (Variables): Used to define a palette of themeable values (colors, fonts, etc.). These variables are then consumed by both custom CSS and Tailwind's theme configuration.
  • Sources: src/App.css:10-29
• Vite: The build tool that processes and bundles the CSS, including the Tailwind CSS integration.
  • Sources: vite.config.js

This diagram shows the relationship between the styling technologies and the application code.

Theming System

The application features a dynamic theming system that allows for runtime changes to the visual appearance. This is achieved by defining CSS variables and manipulating a data-theme attribute on the root <html> element.

Theme Definition

Themes are defined in src/App.css using CSS custom properties. A default set of variables is defined within the :root selector, establishing the default theme. Alternative themes can be created by overriding these variables within an attribute selector, such as [data-theme="brat"].

The core theme properties are:

Variable	Default Value	Description
--main	#677397	Primary UI color.
--main2	#5a6380	Secondary UI color.
--back	#515a77	Background color.
--acc	#857cbf	Accent color for interactive elements.
--form	#363c4e	Background color for forms.
--text	#ffffff	Primary text color.
--radius	15px 15px 15px 15px	Default border radius for elements.

Sources: src/App.css:21-28

Tailwind CSS is configured to use these variables for its color palette via the @theme directive. This allows utility classes like bg-main, text-text, and bg-acc to be used throughout the application, which automatically adapt to the current theme.

/* src/App.css:10-17 */
@theme {
    --color-main: var(--main);
    --color-main2: var(--main2);
    --color-background: var(--back);
    --color-acc: var(--acc);
    --color-text: var(--text);
    --color-form: var(--form);
}

Sources: src/App.css:10-17

Theme Application and Persistence

The theme is applied and persisted through a combination of JavaScript logic in the App.jsx and TopBar.jsx components.

1. Initial Load: On application startup, App.jsx retrieves the saved theme name from localStorage. If no theme is saved, it defaults to "default". It then sets the data-theme attribute on the <html> element.
2. Theme Change: The TopBar.jsx component (though it does not currently render a theme switcher UI) contains the handleThemeChange function. This function updates the data-theme attribute and saves the new theme name to localStorage.

The following sequence diagram illustrates the theme loading process:

The theme change logic, while present, is not currently connected to any UI element in the provided TopBar.jsx code. The function exists but is not called.

// src/components/TopBar.jsx:19-22
  const handleThemeChange = (event) => {
    changeTheme(event.target.value);
    localStorage.setItem("theme", event.target.value);
  };

Sources: src/components/TopBar.jsx:19-22

Global and Component Styling

Global Styles

src/App.css defines several global styles that apply to the entire application:

• Font Imports: Imports @fontsource-variable/doto.
• Body and HTML: Sets overflow: hidden and a fixed 100vw/100vh size, along with a default font-family.
• Scrollbar: Custom styles for ::-webkit-scrollbar, ::-webkit-scrollbar-track, and ::-webkit-scrollbar-thumb.
• Custom Component Class: A .rad class is defined in a @layer components block to apply the var(--radius).

Sources: src/App.css:2, 5-8, 31-49

Component-Level Styling

Components are styled using Tailwind CSS utility classes. This provides a consistent and maintainable way to apply styles directly in the JSX markup.

For example, the main layout in App.jsx uses Flexbox utilities (flex, w-full, h-full) and theme-aware background colors (bg-background).

// src/App.jsx:55-56
<main className="flex w-full h-full bg-background">
  <div className="h-screen w-10.5 bg-main flex flex-row justify-center">

Sources: src/App.jsx:55-56

Similarly, the form elements in Form.jsx use theme colors, border-radius, and spacing utilities. The .rad class is used for applying the consistent border-radius from the theme.

// src/components/Form/Form.jsx:90-96
<input
  type="text"
  name="sp"
  maxLength={12}
  placeholder="IP Config"
  required
  className="bg-main2 text-text outline-none w-2/3 h-10 rad  p-2 "
/>

Sources: src/components/Form/Form.jsx:90-96

The window control buttons in TopBar.jsx use a combination of size, color, and transition utilities.

// src/components/TopBar.jsx:30-33
<button
  onClick={handleClose}
  className="w-4 h-4 rounded-full bg-red-400 hover:bg-red-300 transition"
/>

Sources: src/components/TopBar.jsx:30-33

Window Decorations

The main application window has custom decorations disabled, and a custom top bar is implemented in the TopBar.jsx component.

• Tauri Configuration: Window decorations are turned off in tauri.conf.json.

  // src-tauri/tauri.conf.json:23-26
  "decorations": false,
  "transparent": true
  

• Custom Top Bar: The TopBar.jsx component creates a draggable region (data-tauri-drag-region) and implements custom window control buttons (close, minimize, maximize) using the @tauri-apps/api/window API.
  • Sources: src-tauri/tauri.conf.json:23-26, src/components/TopBar.jsx:26-28, 30-39

Summary

Scripty's styling and theming system is a well-structured combination of modern web technologies. It leverages Tailwind CSS for efficient component styling and CSS Custom Properties for a flexible, persistent theming engine. This architecture makes it straightforward to maintain the existing UI while also allowing for easy extension with new themes or style adjustments. The core of this system is centralized in src/App.css, with theme state management handled by React components and localStorage.