Projets/ObsiGate
1
1
Fork 0
Code Issues 24 Pull Requests Actions Packages Projects Releases 24 Wiki Activity

[Theme] Nouveau theme Spark (dark/light, identique a la Console Spark) et defaut = Spark dark #28

Merged
bruno merged 4 commits from feat/theme-spark into main 2026-10-27 23:25:11 -04:00
Conversation 0 Commits 4 Files Changed 4
+117 -52
4 changed files with 117 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/admin.html
+4 -4
View File
@@ -19,8 +19,8 @@
var mode = localStorage.getItem("obsigate-theme-mode") || "dark";
root.setAttribute("data-theme", mode);
var light = mode === "light" || mode === "sepia";
root.style.setProperty("--bg-primary", light ? "#ffffff" : "#0f1117");
root.style.setProperty("--text-primary", light ? "#1a1a1a" : "#e6edf3");
root.style.setProperty("--bg-primary", light ? "#fbfbfa" : "#17181a");
root.style.setProperty("--text-primary", light ? "#242624" : "#eceeeb");
} catch (e) { root.setAttribute("data-theme", "dark"); }
})();
</script>
@@ -41,8 +41,8 @@
min-height: 100vh;
overflow: auto; /* override SPA style.css: body{overflow:hidden} */
height: auto; /* override SPA style.css: body{height:100vh} */
background: var(--bg-primary, #0f1117);
color: var(--text-primary, #e6edf3);
background: var(--bg-primary, #17181a);
color: var(--text-primary, #eceeeb);
font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}
frontend/index.html
+4 -4
View File
@@ -10,7 +10,7 @@
name="description"
content="Porte d'entrée web pour vos vaults Obsidian - Accédez, naviguez et recherchez dans toutes vos notes"
/>
<meta name="theme-color" content="#2563eb" />
<meta name="theme-color" content="#7c5cd6" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta
@@ -54,14 +54,14 @@
#boot-splash {
position: fixed; inset: 0; z-index: 2147483647;
display: flex; align-items: center; justify-content: center;
background: radial-gradient(1200px 600px at 50% -10%, #1b2030 0%, #0e1117 60%);
color: #e6e8ee; font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
background: radial-gradient(1200px 600px at 50% -10%, #26272b 0%, #17181a 60%);
color: #eceeeb; font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}
body.app-booted #boot-splash { display: none; }
.bs-card { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.bs-logo {
width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;
font-size: 38px; background: #171c26; border: 1px solid #2a3242; border-radius: 18px;
font-size: 38px; background: #1f2023; border: 1px solid #33353a; border-radius: 18px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}
.bs-title { font-size: 22px; font-weight: 600; letter-spacing: 0.3px; }
frontend/js/themes.js
+67 -2
View File
@@ -1,5 +1,5 @@
/* ObsiGate — Theme System
* 15 themes x 2 modes (dark/light)
* 16 themes x 2 modes (dark/light)
* Persisted in localStorage as 'obsigate-theme'
* Usage: import { initThemes, applyTheme, getCurrentTheme, THEMES } from './themes.js'
*/
@@ -45,6 +45,71 @@ var THEMES = {
}
},
// ── Thème Spark ──────────────────────────────────────────────────────
// Palette source : console Spark (agent.dracodev.net), app/console/console.css
// (variables --p-*). Mapping Spark -> ObsiGate, identique en structure pour
// dark et light ; seules les valeurs changent (sauf accent/ok/warn/err).
// Fidèle (valeur Spark directe) :
// fond -> --bg-primary, --surface2 ; surface -> --surface ;
// chip -> --bg-secondary, --tag-bg ; chip-survol -> --bg-hover ;
// bord -> --border ; chip-bord -> --border-md, --scrollbar, --resize-handle ;
// texte -> --text-primary, --text ; doux -> --text-secondary, --text-2 ;
// faint -> --text-muted, --text-3 ; champ -> --search-bg ;
// code -> --code-bg ; accent -> --accent, --accent-card, --purple, --ai ;
// lien -> --accent-text (variante lisible de l'accent sur fond teinté) ;
// ok -> --accent-green, --success, --green ;
// danger -> --danger ; danger-fond -> --danger-bg ;
// pastilles ok (fond) -> --success-bg, --green-bg ;
// pastilles ok (texte) -> --ok ; ambre -> --warn ; rouge -> --err.
// Approximations documentées (ObsiGate a plus de variables que Spark,
// ce ne sont PAS des valeurs Spark) :
// --bg-sidebar <- fond (Spark n'a pas de token sidebar dédié) ;
// --accent-bg <- agent (surface teintée de Spark, pas de teinte lavande) ;
// --surface3 <- agent ; --purple-bg <- appro-fond (fond teinté le plus
// proche, la palette Spark n'a pas de teinte lavande) ;
// --overlay-bg <- convention ObsiGate (rgba noir 0.3 clair / 0.5 sombre,
// aucun token voile dans la palette Spark).
// Non reportés (aucune variable ObsiGate correspondante dans les 39) :
// bulle utilisateur/envoi #2f6fed, titres approbation #9a6a1c / #e8bc7a.
// Une seule entrée 'spark' : dark et light sont ses deux modes, jamais
// deux thèmes séparés. Modes high-contrast/sepia générés comme pour les
// autres thèmes (à partir de dark/light).
'spark': {
name: 'Spark', desc: 'Palette de la console Spark',
modes: {
dark: {
'--bg-primary': '#17181a', '--bg-secondary': '#26272b', '--bg-sidebar': '#17181a',
'--bg-hover': '#2e3036', '--border': '#33353a', '--text-primary': '#eceeeb',
'--text-secondary': '#a6aba0', '--text-muted': '#83887e', '--accent': '#7c5cd6',
'--accent-green': '#2ea36b', '--tag-bg': '#26272b', '--tag-text': '#7c5cd6',
'--code-bg': '#2c2e33', '--search-bg': '#1f2023', '--scrollbar': '#3a3c41',
'--resize-handle': '#3a3c41', '--overlay-bg': 'rgba(0,0,0,0.5)', '--danger': '#e8a08d',
'--danger-bg': '#40241f', '--success': '#2ea36b', '--success-bg': '#173d29',
'--accent-card': '#7c5cd6', '--accent-bg': '#26272b', '--accent-text': '#b39df5',
'--green': '#2ea36b', '--green-bg': '#173d29', '--purple': '#7c5cd6',
'--purple-bg': '#2a2118', '--surface': '#1f2023', '--surface2': '#17181a',
'--surface3': '#26272b', '--border-md': '#3a3c41', '--text': '#eceeeb',
'--text-2': '#a6aba0', '--text-3': '#83887e', '--ok': '#7fd6a8',
'--warn': '#e8a13c', '--ai': '#7c5cd6', '--err': '#cf4b32'
},
light: {
'--bg-primary': '#fbfbfa', '--bg-secondary': '#f4f5f1', '--bg-sidebar': '#fbfbfa',
'--bg-hover': '#e9ebe4', '--border': '#e4e5e0', '--text-primary': '#242624',
'--text-secondary': '#6c7268', '--text-muted': '#8a8f84', '--accent': '#7c5cd6',
'--accent-green': '#2ea36b', '--tag-bg': '#f4f5f1', '--tag-text': '#7c5cd6',
'--code-bg': '#e8eae3', '--search-bg': '#ffffff', '--scrollbar': '#d6d8d1',
'--resize-handle': '#d6d8d1', '--overlay-bg': 'rgba(0,0,0,0.3)', '--danger': '#a03a28',
'--danger-bg': '#f6e3de', '--success': '#2ea36b', '--success-bg': '#dff2e7',
'--accent-card': '#7c5cd6', '--accent-bg': '#eef0ea', '--accent-text': '#5b3df0',
'--green': '#2ea36b', '--green-bg': '#dff2e7', '--purple': '#7c5cd6',
'--purple-bg': '#fdf6ec', '--surface': '#ffffff', '--surface2': '#fbfbfa',
'--surface3': '#eef0ea', '--border-md': '#d6d8d1', '--text': '#242624',
'--text-2': '#6c7268', '--text-3': '#8a8f84', '--ok': '#1d7a4c',
'--warn': '#e8a13c', '--ai': '#7c5cd6', '--err': '#cf4b32'
}
}
},
'github': {
name: 'GitHub', desc: 'Contraste doux',
modes: {
@@ -523,7 +588,7 @@ var THEMES = {
};
// ── Theme Engine ─────────────────────────────────────────────────────
var _currentTheme = 'defaut-obsigate';
var _currentTheme = 'spark';
var _currentMode = 'dark';
var AVAILABLE_MODES = ['dark', 'light', 'high-contrast', 'sepia'];
frontend/style.css
+42 -42
View File
@@ -11,58 +11,58 @@
/* ── Editor save dot state colors ── */
:root {
--ok: #34d399;
--warn: #fbbf24;
--ai: #8b5cf6;
--err: #f87171;
--ok: #7fd6a8;
--warn: #e8a13c;
--ai: #7c5cd6;
--err: #cf4b32;
}
/* ===== THEME — DARK (fallback default, no data-theme) ===== */
:root {
--bg-primary: #0f1117;
--bg-secondary: #161b22;
--bg-sidebar: #13161d;
--bg-hover: #1f2430;
--border: #21262d;
--text-primary: #e6edf3;
--text-secondary: #8b949e;
--text-muted: #484f58;
--accent: #58a6ff;
--accent-green: #3fb950;
--tag-bg: #1f2a3a;
--tag-text: #79c0ff;
--code-bg: #161b22;
--search-bg: #21262d;
--scrollbar: #30363d;
--resize-handle: #30363d;
--bg-primary: #17181a;
--bg-secondary: #26272b;
--bg-sidebar: #17181a;
--bg-hover: #2e3036;
--border: #33353a;
--text-primary: #eceeeb;
--text-secondary: #a6aba0;
--text-muted: #83887e;
--accent: #7c5cd6;
--accent-green: #2ea36b;
--tag-bg: #26272b;
--tag-text: #7c5cd6;
--code-bg: #2c2e33;
--search-bg: #1f2023;
--scrollbar: #3a3c41;
--resize-handle: #3a3c41;
--overlay-bg: rgba(0, 0, 0, 0.5);
--danger: #ff7b72;
--danger-bg: #3d1a18;
--success: #3fb950;
--success-bg: #1a3d1f;
--accent-card: #58a6ff;
--accent-bg: #1f2a3a;
--accent-text: #79c0ff;
--green: #3fb950;
--green-bg: #1a3d1f;
--purple: #a371f7;
--purple-bg: #2d1b4e;
--surface: #161b22;
--surface2: #0f1117;
--surface3: #0d0f14;
--border-md: #30363d;
--text: #e6edf3;
--text-2: #8b949e;
--text-3: #484f58;
--danger: #e8a08d;
--danger-bg: #40241f;
--success: #2ea36b;
--success-bg: #173d29;
--accent-card: #7c5cd6;
--accent-bg: #26272b;
--accent-text: #b39df5;
--green: #2ea36b;
--green-bg: #173d29;
--purple: #7c5cd6;
--purple-bg: #2a2118;
--surface: #1f2023;
--surface2: #17181a;
--surface3: #26272b;
--border-md: #3a3c41;
--text: #eceeeb;
--text-2: #a6aba0;
--text-3: #83887e;
--mono: "JetBrains Mono", monospace;
--radius: 6px;
--radius-lg: 10px;
/* #154-A1 — data-grid tokens: the sheet reads slightly lighter than the
chrome (toolbar/panels), headers are clearly distinct from cells. */
--grid-bg: #161b22;
--grid-header-bg: #1f2430;
--grid-header-text: #e6edf3;
--grid-border: #3d444d;
--grid-bg: #1f2023;
--grid-header-bg: #2e3036;
--grid-header-text: #eceeeb;
--grid-border: #33353a;
--grid-zebra: rgba(255, 255, 255, 0.025);
}