GNOME: Themeable: Accent/Primary Colors, Dark/Light Modes, and SourceView Schemes #18
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Add strict TypeScript configuration with noImplicitAny and strictNullChecks - Extract ADDRESSING_MODES and INSTRUCTION_LENGTH constants to separate file - Fix simulator type issues and improve key access patterns - Update assembler to use extracted constants
- Update GSettings schema to use integer-based color-scheme instead of string theme - Remove CSS provider initialization from application startup - Update theme service initialization in application - Update common theme service interface
- Rename application.css to main.css for consistency - Rename service files to use kebab-case: file.service.ts, notification.service.ts, theme.service.ts - Create new main.window.css with view-specific styles - Update theme selector widget with improved styling - Update main window layout and Blueprint templates - Update service index to use new file names
- Change notifyListeners() to notifyThemeChanged() for consistent naming - Update theme change notification handling in system appearance mode
- Add new theme-event-map.ts for theme-related event types - Update types index to export new theme event map - Remove deprecated theme-change-listener.ts type definition
- Update Adwaita styling guide with latest CSS variables and style classes - Add links to new Adwaita documentation sections (Breakpoints, StyleManager) - Enhance Blueprint templates guide with improved structure and examples - Add accessibility and best practices sections to Blueprint guide
- Add consistent newlines at end of all translation JSON files - Ensure uniform formatting across de.json, en.default.json, es.json, fr.json, ia.json - Minor formatting improvements for better consistency
- Remove old application.css (renamed to main.css) - Remove old service files (renamed with kebab-case) - Remove deprecated theme-change-listener.ts type definition - All files have been properly renamed/moved in previous commits
…ptive tone by mode; modern CSS vars; docs
- Deleted Android-specific FileService, NotificationService, and ThemeService implementations. - Removed common UI services including ButtonStateService, DebuggerStateService, GameConsoleInputService, GameConsoleStateService, LearnStateService, and NotificationService. - These files were removed as part of a reorganization effort to streamline the codebase and eliminate unused services.
- Updated the stop method to check if executeId is defined before calling clearInterval. - Made similar changes in the program completion logic to prevent potential errors when executeId is undefined.
…ies section - Moved primary technologies to a dedicated section for clarity. - Updated technologies list to include TypeScript, GJS, GTK 4, and links to Adwaita styling and Blueprint templates. - Improved overall structure for better readability and accessibility.
- Introduced two new style scheme files: learn6502-style.xml and learn6502-style-dark.xml for light and dark themes respectively. - Updated resource registration to include the new style schemes. - Enhanced CSS for source view to utilize the new styles. - Refactored theme service to manage primary CSS providers more efficiently.
- Removed the ThemeSelector from the popover menu and integrated it into the preferences dialog for a more cohesive user experience. - Updated the preferences dialog to include a dedicated section for theme selection, allowing users to choose the app theme and primary color. - Cleaned up CSS and TypeScript files related to theme management, ensuring better organization and maintainability. - Updated translation files to reflect changes in UI text and structure.
- Added a new primary color preference to the GSettings schema, allowing users to select from predefined color options or no override. - Updated the ThemeService to handle primary color settings, including loading and saving preferences. - Refactored the ThemeSelector to reflect changes in primary color state and synchronize with the theme service. - Introduced a new TypeScript type for primary color keys to improve type safety and maintainability.
- Added APPLICATION_ID constant to constants.ts for better clarity. - Introduced new variables.css file to manage primary color theming based on light and dark modes. - Refactored theme.service.ts to utilize APPLICATION_ID instead of SCHEMA_ID for GSettings. - Removed outdated main.window.css and updated theme-selector.blp to improve layout and alignment of theme options. - Enhanced theme-selector.css to streamline swatch styles and improve visual consistency.
- Replaced the ThemeSelector with ThemeModeSelector and PrimaryColorSelector in the preferences dialog for improved user experience. - Updated CSS imports to reflect new widget names and added styles for the new selectors. - Created new TypeScript and Blueprint files for the ThemeModeSelector and PrimaryColorSelector, enabling users to choose between light/dark modes and primary color options. - Updated translation files to align with the new UI text and structure.
…dernize CSS - Introduced a new option for using a custom primary color in the preferences dialog. - Refactored the PrimaryColorSelector to manage the enabled state and ensure at least one color is selected when enabled. - Updated CSS styles for the preferences dialog and primary color selector to enhance visual consistency. - Removed outdated translation entries and added new translations for the custom primary color option across multiple languages.
…rate into PreferencesDialog - Introduced a new option for users to select a custom accent color in the preferences dialog. - Added AccentColorSelector widget to manage accent color choices and synchronize with theme settings. - Updated ThemeService to handle accent color changes and persist user preferences. - Enhanced CSS styles for the preferences dialog and accent color selector for improved visual consistency. - Updated translation files to include new accent color options across multiple languages.
…tyling - Enhanced variables.css to include new text color variables and adjusted color mixing for dark mode. - Refactored ThemeService to streamline theme loading and management, replacing deprecated methods with updated ones. - Updated preferences dialog and associated CSS to use a unified custom color group for primary and accent color settings. - Improved overall CSS structure for better visual consistency across the application.
…or styling - Introduced a new CSS variable for view foreground color, linking it to the window foreground color for consistency. - Updated accent color styles to apply the custom accent color to links, enhancing visual coherence across the application.
- Changed light and dark swatch variables in theme-mode-selector.css for improved color consistency. - Adjusted margins and dimensions of gamepad buttons in gamepad.blp to enhance layout and usability.
- Replaced multiple widget CSS imports with a single index.css import for better organization. - Created index.css to aggregate widget styles, improving maintainability. - Updated the CssName for RunMenuButton to follow a consistent naming convention.
JumpLink
changed the title
- Removed the buttonWindowMenu and associated menu items from main.window.blp and main.window.ts for cleaner code. - Renamed RunMenuButton to menuButton for consistency in main.window.blp. - Updated run-menu-button.blp to include essential menu items directly, enhancing usability and organization.
JumpLink
changed the title
- Deleted "Menu" and "Run menu" entries from German, English, and various other language translation files to clean up unused translations. - Updated related translation files to ensure consistency across languages.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR introduces a themeable appearance for the Learn-Platform across the GNOME app, while keeping shared logic clean in the monorepo. The goal is to make the UI more playful and customizable without sacrificing maintainability.
Why
Key Changes
Theme architecture
ThemeServicewith:Adw.StyleManagerGio.Settingswith new keys for color scheme, primary family, and accent familyThemeEventMapUI widgets and styling
ThemeModeSelector,PrimaryColorSelector,AccentColorSelectorSourceView(source-view.css)utils.css,variables.css, and per-widget CSS inmain.cssandviews/index.cssGtkSourceView schemes
learn6502-style.xml(light) andlearn6502-style-dark.xml(dark)Settings and resources
eu.jumplink.Learn6502.gschema.xmlwith color scheme, primary color, accent colorgresourcefor style schemessettings.tsto usenew Gio.Settings({ schema_id, path })Code quality and consistency
file.service.ts,theme.service.ts,notification.service.ts(and across common-ui)strict,noImplicitAny, etc.)constantsand imported inassembler.ts, added small safety/typing fixesTranslations
Docs and guidance
Developer Notes
app-gnome, shared types/events live incommon-ui, core emulator logic in6502.app-weborapp-androidin this PR; can adopt the same theming concepts later.How to Use