Theming and Fullscreen Mode
Relevant source files
The following files were used as context for generating this wiki page:
The Nextcloud CAD Viewer provides users with flexible viewing environments through integrated Theming and Fullscreen Mode capabilities. These features are designed to enhance the visibility of complex engineering drawings and reduce eye strain by adapting the UI to different lighting conditions and maximizing available screen real estate.
Theming allows users to toggle between Light and Dark modes, while Fullscreen Mode utilizes the browser's capabilities to hide peripheral Nextcloud and browser UI elements, focusing exclusively on the CAD workspace. These functionalities are delivered via a combination of Vue.js reactive components, CSS variables, and the upstream @mlightcad/cad-viewer library.
Sources: README.md:14-15, appinfo/info.xml:13-14, wiki/User-Guide.md:154-155
Theming System
The CAD Viewer implements a dual-theme system (Light and Dark) that controls the background of the drawing area and the appearance of UI elements.
Theme Architecture and Configuration
The application defaults to a "dark" theme during initialization in the Vue component. The theme is passed as a property to the loadCADViewer utility, which then configures the underlying MlCadViewer component. The background color for the dark theme is specifically defined as 0x1e1e1e (hexadecimal integer).
Sources: src/App.vue:71, src/utils/cadLoader.ts:31, css/cad-viewer.css:12
Component-Level Styles
The application uses CSS to ensure consistent theming across Nextcloud UI components. It specifically overrides Element Plus UI variables to match the dark aesthetic when active.
| Theme Option | Background Hex | Description |
|---|---|---|
| Light Theme | White/Default | Traditional background for bright environments. |
| Dark Theme | #1e1e1e | High-contrast background to reduce eye strain. |
Sources: wiki/User-Guide.md:164-167, css/cad-viewer.css:29-32
Theme Initialization Flow
The following diagram illustrates how the theme configuration flows from the application entry point to the CAD engine.
Fullscreen Mode
Fullscreen Mode is a critical feature for detailed technical reviews, allowing the Drawing Area to occupy the entire display.
Activation Methods
Users can trigger Fullscreen Mode through multiple interaction patterns:
- Toolbar Button: A dedicated button in the top toolbar.
- Keyboard Shortcut: Pressing
F11(browser default) orEscto exit. - Double-Click: Interacting directly with the drawing area.
Sources: wiki/User-Guide.md:175-184
Technical Implementation
The system relies on the browser's Fullscreen API. In the viewer interface, the #cad-viewer-container is configured with min-height: 100vh and width: 100% to ensure that when it enters the fullscreen state, the canvas expands to fill the viewport without scrollbars.
UI Adjustments in Fullscreen
When Fullscreen Mode is active, the application manages the visibility of several components:
- Toolbar: Remains accessible for navigation while in fullscreen.
- Status Bar: Continues to display file dimensions and coordinates at the bottom of the screen.
- Nextcloud Navigation: Hidden by the browser's fullscreen overlay.
Sources: wiki/User-Guide.md:68-80, appinfo/info.xml:13-14
Layout and Styling
The layout is governed by a flexbox structure that ensures the canvas remains responsive during theme changes and view mode transitions.
#cad-viewer-container {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
min-height: 100vh;
background: #1e1e1e;
overflow: hidden;
}
Sources: css/cad-viewer.css:7-15
For mobile devices, the layout adjusts via media queries to account for smaller viewports, typically reducing the minimum height to calc(100vh - 50px) to accommodate mobile browser bars.
Sources: css/cad-viewer.css:54-58
Conclusion
Theming and Fullscreen Mode in the Nextcloud CAD Viewer provide a professional-grade viewing experience. By defaulting to a dark theme and offering simple transitions to fullscreen, the app ensures that technical DWG and DXF files are legible and easily inspected within the Nextcloud ecosystem.