};
-window.RT.theme_preference = function(author_pref, default_color = "#FF00FF") {
- const reader_pref = localStorage.getItem('RT-Style·theme_preference');
- const theme_to_load = reader_pref ? reader_pref : author_pref;
-
- window.RT.theme('load', theme_to_load, default_color);
-};
-
window.RT.load = function(module_path) {
if (window.RT.Module.has(module_path)) {
-// 1. Establish the Generic Theme Dictionary
-// e.g. RT.theme( 'read', 'content_main')
-// Establish the global theme library
-window.RT.theme_library = window.RT.theme_library || {};
+// see Theme/manifest, all themes are registered in the library by name
+RT.theme_library = RT.theme_library || {};
-window.RT.theme = (function() {
+// 'read' or 'write' the active theme fields, or 'load' a new theme
+RT.theme = (function() {
const dictionary = {
meta: { is_dark: false, name: "" },
}
function apply_and_validate_theme(new_theme, fallback_color) {
- const debug = window.RT.Debug || { error: function(){} };
+ const debug = RT.Debug || { error: function(){} };
// Pass 1: Walk the structure of the active dictionary
function walk_current(curr, source, path) {
const theme_name = args[0];
const fallback = args[1] || "#FF00FF";
- if (!window.RT.theme_library.hasOwnProperty(theme_name)) {
- window.RT.Debug.error('theme', `Load aborted: Theme '${theme_name}' is not in the theme_library.`);
+ if (!RT.theme_library.hasOwnProperty(theme_name)) {
+ RT.Debug.error('theme', `Load aborted: Theme '${theme_name}' is not in the theme_library.`);
return false;
}
- apply_and_validate_theme(window.RT.theme_library[theme_name], fallback);
+ apply_and_validate_theme(RT.theme_library[theme_name], fallback);
// --- CSS Fallback for Pseudo-Elements and External Libraries ---
let style_el = document.getElementById('rt-theme-custom-css');
return true;
}
- window.RT.Debug.error('theme', 'Invalid command passed to theme dictionary: ' + command);
+ RT.Debug.error('theme', 'Invalid command passed to theme dictionary: ' + command);
};
})();
+
+RT.theme_preference = function(author_pref, default_color = "#FF00FF") {
+ const reader_pref = localStorage.getItem('RT-Style·theme_preference');
+ const theme_to_load = reader_pref ? reader_pref : author_pref;
+
+ RT.theme('load', theme_to_load, default_color);
+};
+
<title>RT Style System: Reference Manual</title>
<script src="RT-Style_locator.js"></script>
<script>
- window.RT.theme_preference('inverse_wheat_DS');
+ window.RT.theme_preference('inverse_wheat');
window.RT.load('Layout/article_tech_ref');
+ window.RT.load('Element/theme_selector');
</script>
</head>
<body>
document.querySelectorAll('rt·theme-selector').forEach((el) => {
- const active_theme = window.RT.theme('read', 'meta', 'name');
- const available_themes = Object.keys(window.RT.theme_library || {});
+ // This holds the display name, e.g., "Inverse Wheat"
+ const active_theme_name = window.RT.theme('read', 'meta', 'name');
+ const available_theme_keys = Object.keys(window.RT.theme_library || {});
const container = document.createElement('div');
container.style.position = 'fixed';
let html_content = `<b>Theme Selection</b><br>`;
- if (available_themes.length === 0) {
+ if (available_theme_keys.length === 0) {
html_content += `<small>No themes found in library.</small>`;
} else {
- available_themes.forEach(theme_name => {
- const is_checked = active_theme === theme_name ? 'checked' : '';
+ available_theme_keys.forEach(theme_key => {
+ // Extract the display name from the library, fallback to key if missing
+ const theme_def = window.RT.theme_library[theme_key];
+ const display_name = (theme_def.meta && theme_def.meta.name) ? theme_def.meta.name : theme_key;
+
+ // Compare display name to display name
+ const is_checked = active_theme_name === display_name ? 'checked' : '';
+
+ // Store the registry key in the value, but show the display name to the user
html_content += `
<label>
- <input type="radio" name="RT·theme" value="${theme_name}" ${is_checked}> ${theme_name}
+ <input type="radio" name="RT·theme" value="${theme_key}" ${is_checked}> ${display_name}
</label><br>
`;
});
container.addEventListener('change', (e) => {
if(e.target.name === 'RT·theme') {
+ // Saves 'inverse_wheat' to local storage
localStorage.setItem('RT-Style·theme_preference', e.target.value);
- // Reloading applies the new preference via theme_preference() in the <head>
location.reload();
}
});
window.RT.theme_library['golden_wheat'] = {
meta: {
is_dark: false,
- name: "Golden Wheat (Yellow)"
+ name: "golden_wheat"
},
surface: {
0: "oklch(0.95 0.02 90)",
window.RT.theme_library['inverse_wheat'] = {
meta: {
is_dark: true,
- name: "Inverse Wheat"
+ name: "inverse_wheat"
},
surface: {
0: "oklch(0.15 0 0)",
window.RT.theme_library['inverse_wheat_DS'] = {
meta: {
is_dark: true,
- name: "Inverse Wheat"
+ name: "inverse_wheat_DS"
},
surface: {
0: "oklch(0.157 0 0)",
window.RT.theme_library['wheat'] = {
meta: {
is_dark: false,
- name: "Classic Wheat"
+ name: "wheat"
},
surface: {
0: "oklch(0.95 0.02 80)",
--- /dev/null
+
+2026-06-28 17:14:07 Z
+
+The theme meta name field, must match the key the manifest uses to write the theme into the library. There is a third name, the file name. We should simplify this. If the names don't match then the theme selector, which accesses the 'read meta name' will fail to color in the selected theme.
+
+The RT = RT || {}, etc, should be replaced with checks and error messes, already done in some places. Things being missing is a problem.
projects / RT-Style / commitdiff