oleh/astrolabe-nvc
1
0
Fork 0
mirror of https://github.com/olehomelchenko/astrolabe-nvc.git synced 2025-12-21 21:22:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add UI theme settings and experimental dark theme support

Browse Source 
- Introduced a new "Appearance" settings section in the settings modal to allow users to select between "Light" and "Dark (Experimental)" themes.
- Updated the application initialization to apply the saved UI theme immediately on page load.
- Enhanced the settings UI to load and save the selected theme.
- Implemented CSS variables for the new experimental dark theme, including color adjustments for various UI elements.
- Updated existing styles to support theme switching, ensuring proper color contrast and readability in both light and dark modes.
This commit is contained in:
Oleh Omelchenko
2025-10-17 22:54:42 +03:00
parent 02fcfc1833
commit 97158739cc
4 changed files with 176 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
index.html
View File

@@ -551,10 +551,10 @@
</div>
<section class="help-section">
<p class="help-text" style="text-align: center; font-style: italic; color: var(--win-gray-darker);">
<p class="help-text" style="text-align: center; font-style: italic;">
Thank you for considering this.
</p>
<p class="help-text" style="text-align: center; font-style: italic; color: var(--win-gray-darker);">
<p class="help-text" style="text-align: center; font-style: italic;">
Oleh Omelchenko
</p>
</section>
@@ -572,6 +572,21 @@
</div>
<div class="modal-body">
<div class="settings-content">
<!-- Appearance Settings -->
<section class="settings-section">
<h3 class="settings-heading">Appearance</h3>
<div class="settings-item">
<label class="settings-label" for="setting-ui-theme">Theme</label>
<div class="settings-control">
<select id="setting-ui-theme" class="settings-select">
<option value="light">Light</option>
<option value="experimental">Dark (Experimental)</option>
</select>
</div>
</div>
</section>
<!-- Editor Settings -->
<section class="settings-section">
<h3 class="settings-heading">Editor</h3>
@@ -585,9 +600,9 @@
</div>
<div class="settings-item">
<label class="settings-label" for="setting-theme">Theme</label>
<label class="settings-label" for="setting-editor-theme">Editor Theme</label>
<div class="settings-control">
<select id="setting-theme" class="settings-select">
<select id="setting-editor-theme" class="settings-select">
<option value="vs-light">Light</option>
<option value="vs-dark">Dark</option>
<option value="hc-black">High Contrast</option>