Thèmes de lecture

OntoWave intègre trois thèmes de lecture activables depuis la barre UX ou par code. Le bouton de thème dans la barre en haut de page permet de les parcourir.

Les trois thèmes

Thème	Classe CSS sur `<body>`	Usage
Clair	`ow-theme-light`	Lecture en pleine lumière (défaut)
Sépia	`ow-theme-sepia`	Lumière tamisée, teinte chaleureuse
Sombre	`ow-theme-dark`	Environnement sombre, faible luminosité

Variables CSS exposées

Chaque thème redéfinit les variables CSS suivantes sur body.ow-theme-* ; elles sont ensuite héritées par le contenu :

Variable	Rôle
`--ow-bg`	Couleur de fond principal
`--ow-text`	Couleur du texte courant
`--ow-link`	Couleur des liens hypertexte
`--ow-code-bg`	Fond des blocs de code
`--ow-border`	Couleur des bordures et séparateurs
`--ow-sidebar-bg`	Fond de la barre latérale

Ces variables peuvent être surchargées dans votre CSS pour personnaliser les thèmes.

Persistance

Le thème sélectionné est sauvegardé dans le localStorage sous la clé ow-reading-theme. Il est restauré automatiquement à chaque visite.

// Valeurs possibles
localStorage.getItem('ow-reading-theme'); // 'light' | 'sepia' | 'dark'

Cycle de thèmes

La rotation s’effectue dans cet ordre : clair → sépia → sombre → clair.

API JavaScript

// Appliquer un thème spécifique
ontowave.ux.applyTheme('sepia');

// Lire le thème actif sauvegardé
const theme = ontowave.ux.loadSavedTheme(); // 'light' | 'sepia' | 'dark'

// Passer au thème suivant
const next = ontowave.ux.cycleTheme(); // retourne le nouveau thème

Configuration

{
  "ux": true
}

Ou, pour activer uniquement les thèmes :

{
  "ux": { "themes": true }
}

Personnalisation CSS

/* Surcharger la couleur de fond du thème sombre */
body.ow-theme-dark {
  --ow-bg: #0d0d0d;
  --ow-text: #e0e0e0;
}

Exemple de rendu

Voici du contenu pour observer les différences de thèmes :

Sépia reproduit l’aspect d’une feuille de papier légèrement jaunie. C’est le thème recommandé pour les longues sessions de lecture.

Un exemple de code inline : const color = getComputedStyle(document.body).getPropertyValue('--ow-bg');

// Appliquer un thème puis lire le thème actuellement sauvegardé
ontowave.ux.applyTheme('sepia');

const currentTheme = ontowave.ux.loadSavedTheme();
console.log('Thème actif :', currentTheme);

→ Démonstration suivante : Navigation clavier

Reading Themes

OntoWave provides three reading themes switchable from the UX toolbar or via code. The theme toggle in the top toolbar cycles through them.

The Three Themes

Theme	CSS class on `<body>`	Use case
Light	`ow-theme-light`	Bright environment (default)
Sepia	`ow-theme-sepia`	Dim light, warm tint
Dark	`ow-theme-dark`	Low-light environment

Exposed CSS Variables

Each theme redefines the following CSS variables on body.ow-theme-*, where they are then inherited by the content:

Variable	Purpose
`--ow-bg`	Main background color
`--ow-text`	Body text color
`--ow-link`	Hyperlink color
`--ow-code-bg`	Code block background
`--ow-border`	Border and separator color
`--ow-sidebar-bg`	Sidebar background

These variables can be overridden in your CSS to customize the themes.

Persistence

The selected theme is saved to localStorage under the key ow-reading-theme. It is automatically restored on every visit.

// Possible values
localStorage.getItem('ow-reading-theme'); // 'light' | 'sepia' | 'dark'

Theme Cycle

The rotation order is: light → sepia → dark → light.

JavaScript API

// Apply a specific theme
ontowave.ux.applyTheme('sepia');

// Read the currently saved theme
const theme = ontowave.ux.loadSavedTheme(); // 'light' | 'sepia' | 'dark'

// Move to the next theme
const next = ontowave.ux.cycleTheme(); // returns the new theme

Configuration

{
  "ux": true
}

Or, to enable themes only:

{
  "ux": { "themes": true }
}

CSS Customization

/* Override background color for the dark theme */
body.ow-theme-dark {
  --ow-bg: #0d0d0d;
  --ow-text: #e0e0e0;
}

Sample Content

Here is some content to observe theme differences:

Sepia reproduces the look of a slightly yellowed piece of paper. It is the recommended theme for long reading sessions.

Inline code example: const color = getComputedStyle(document.body).getPropertyValue('--ow-bg');

// Read the current theme from the UX API
const theme = ontowave.ux.loadSavedTheme();
console.log('Current theme:', theme);

// Or inspect the class applied on <body>
const isDark = document.body.classList.contains('ow-theme-dark');
console.log('Dark theme enabled:', isDark);

→ Next demo: Keyboard navigation