diff --git a/index.html b/index.html
index 89c5d06..4719429 100644
--- a/index.html
+++ b/index.html
@@ -14,8 +14,12 @@
+
+
+
+
diff --git a/src/app/config_menu.rs b/src/app/config_menu.rs
index 13eea85..20474cb 100644
--- a/src/app/config_menu.rs
+++ b/src/app/config_menu.rs
@@ -3,16 +3,20 @@ use reactive_stores::Store;
use wasm_bindgen::JsValue;
use web_sys::{Event, HtmlSelectElement};
-use crate::{
- SQLightError,
- app::{
- GlobalState, GlobalStateStoreFields, Orientation, Theme,
- config_element::Select as SelectConfig, menu_group::MenuGroup,
- },
+use crate::app::{
+ GlobalState, GlobalStateStoreFields, Orientation, Theme,
+ config_element::Select as SelectConfig, menu_group::MenuGroup,
};
const ACE_KEYBOARDS: [&str; 5] = ["ace", "emacs", "sublime", "vim", "vscode"];
-const ACE_THEMES: [&str; 3] = ["github", "github_dark", "gruvbox"];
+const ACE_THEMES: [&str; 6] = [
+ "github",
+ "github_dark",
+ "github_light_default",
+ "gruvbox",
+ "gruvbox_light_hard",
+ "gruvbox_dark_hard",
+];
fn selecet_view(s: &str, selected: &str) -> AnyView {
if s == selected {
@@ -35,32 +39,20 @@ pub fn ConfigMenu() -> impl IntoView {
if let Some(target) = event.target() {
let select = HtmlSelectElement::from(JsValue::from(target));
state.editor_config().write().keyboard = select.value();
- if let Some(Err(err)) = state.editor().read().as_ref().map(|editor| {
- let keyboard = select.value();
- let handler = (keyboard != "ace").then_some(format!("ace/keyboard/{keyboard}"));
- editor.set_keyboard_handler(handler.as_deref())
- }) {
- state
- .last_error()
- .set(Some(SQLightError::new_ace_editor(err)));
- }
}
};
- let ace_theme_change = move |event: Event| {
+ let light_ace_theme_change = move |event: Event| {
if let Some(target) = event.target() {
let select = HtmlSelectElement::from(JsValue::from(target));
- state.editor_config().write().theme = select.value();
- if let Some(Err(err)) = state
- .editor()
- .read()
- .as_ref()
- .map(|editor| editor.set_theme(&format!("ace/theme/{}", select.value())))
- {
- state
- .last_error()
- .set(Some(SQLightError::new_ace_editor(err)));
- }
+ state.editor_config().write().light_theme = select.value();
+ }
+ };
+
+ let dark_ace_theme_change = move |event: Event| {
+ if let Some(target) = event.target() {
+ let select = HtmlSelectElement::from(JsValue::from(target));
+ state.editor_config().write().dark_theme = select.value();
}
};
@@ -90,11 +82,19 @@ pub fn ConfigMenu() -> impl IntoView {
.collect_view()
}}
-
+
{move || {
ACE_THEMES
.into_iter()
- .map(|s| selecet_view(s, &state.editor_config().read().theme))
+ .map(|s| selecet_view(s, &state.editor_config().read().light_theme))
+ .collect_view()
+ }}
+
+
+ {move || {
+ ACE_THEMES
+ .into_iter()
+ .map(|s| selecet_view(s, &state.editor_config().read().dark_theme))
.collect_view()
}}
diff --git a/src/app/editor.rs b/src/app/editor.rs
index 607ac5a..e56eef5 100644
--- a/src/app/editor.rs
+++ b/src/app/editor.rs
@@ -29,7 +29,7 @@ pub fn Editor() -> impl IntoView {
.mode("ace/mode/sql")
.theme(&format!(
"ace/theme/{}",
- state.editor_config().read_untracked().theme
+ state.editor_config().read_untracked().light_theme
))
.keyboard(
{
diff --git a/src/app/playground.rs b/src/app/playground.rs
index 90821aa..82c8a94 100644
--- a/src/app/playground.rs
+++ b/src/app/playground.rs
@@ -10,12 +10,15 @@ use wasm_bindgen::{JsCast, prelude::Closure};
use wasm_bindgen_futures::spawn_local;
use web_sys::wasm_bindgen::JsValue;
-use crate::app::{
- Focus,
- editor::Editor,
- header::Header,
- output::{Output, change_focus},
- state::{GlobalState, GlobalStateStoreFields, Orientation, Theme, Vfs},
+use crate::{
+ SQLightError,
+ app::{
+ Focus,
+ editor::Editor,
+ header::Header,
+ output::{Output, change_focus},
+ state::{GlobalState, GlobalStateStoreFields, Orientation, Theme, Vfs},
+ },
};
use crate::{WorkerHandle, WorkerResponse, handle_state};
@@ -36,8 +39,9 @@ pub fn playground(
handle_system_theme(state);
handle_automic_orientation(state);
handle_connect_db(state);
- hanlde_save_state(state);
+ handle_save_state(state);
handle_import_progress(state);
+ handle_ace_config(state);
spawn_local(handle_state(state, rx));
@@ -51,7 +55,39 @@ pub fn playground(
})
}
-fn hanlde_save_state(state: Store) {
+fn handle_ace_config(state: Store) {
+ Effect::new(move || {
+ let config = state.editor_config().read();
+ let keyboard = &config.keyboard;
+ let theme = match state.theme().read().value() {
+ Theme::SystemLight | Theme::Light => &config.light_theme,
+ Theme::SystemDark | Theme::Dark => &config.dark_theme,
+ Theme::System => unreachable!(),
+ };
+
+ if let Some(Err(err)) = state.editor().read().as_ref().map(|editor| {
+ let handler = (keyboard != "ace").then_some(format!("ace/keyboard/{keyboard}"));
+ editor.set_keyboard_handler(handler.as_deref())
+ }) {
+ state
+ .last_error()
+ .set(Some(SQLightError::new_ace_editor(err)));
+ }
+
+ if let Some(Err(err)) = state
+ .editor()
+ .read()
+ .as_ref()
+ .map(|editor| editor.set_theme(&format!("ace/theme/{theme}")))
+ {
+ state
+ .last_error()
+ .set(Some(SQLightError::new_ace_editor(err)));
+ }
+ });
+}
+
+fn handle_save_state(state: Store) {
Effect::new(move || {
state.vfs().track();
state.editor_config().track();
diff --git a/src/app/state.rs b/src/app/state.rs
index 4849cf5..569a314 100644
--- a/src/app/state.rs
+++ b/src/app/state.rs
@@ -106,14 +106,16 @@ pub struct Exported {
#[derive(Serialize, Deserialize)]
pub struct EditorConfig {
pub keyboard: String,
- pub theme: String,
+ pub light_theme: String,
+ pub dark_theme: String,
}
impl Default for EditorConfig {
fn default() -> Self {
EditorConfig {
keyboard: "ace".into(),
- theme: "github".into(),
+ light_theme: "github".into(),
+ dark_theme: "github_dark".into(),
}
}
}
@@ -186,7 +188,7 @@ impl Theme {
Theme::SystemLight
}
})
- .unwrap_or_else(|| Theme::SystemDark)
+ .unwrap_or_else(|| Theme::SystemLight)
} else {
*self
}