+++ /dev/null
-/*
- Generic Article Typography.
- Applies container settings and injects scoped CSS for standard HTML tags
- (H1-H6, P, Blockquote) within the article.
-*/
-(function(){
- const RT = window.StyleRT = window.StyleRT || {};
-
- RT.article = function() {
- RT.config = RT.config || {};
-
- // Default Configuration
- RT.config.article = {
- font_family: '"Noto Sans JP", sans-serif'
- ,line_height: "1.75" // Increased slightly for readability
- ,font_size: "16px"
- ,max_width: "800px"
- ,margin: "0 auto"
- };
-
- const conf = RT.config.article;
- const article_seq = document.querySelectorAll("RT-article");
- const theme = (RT.config.theme) ? RT.config.theme : { accent: 'gray', text: 'black' };
-
- // HURDLE
- if (RT.debug) RT.debug.log('selector', `RT.article found ${article_seq.length} elements.`);
- if(article_seq.length === 0) {
- if(RT.debug) RT.debug.error('selector', 'CRITICAL: No <RT-article> tags found.');
- return;
- }
-
- // 1. Apply Container Styles
- article_seq.forEach( (article) =>{
- const style = article.style;
- style.display = "block";
- style.fontFamily = conf.font_family;
- style.fontSize = conf.font_size;
- style.lineHeight = conf.line_height;
- style.maxWidth = conf.max_width;
- style.margin = conf.margin;
- style.backgroundColor = "transparent";
-
- // Ensure the accent color is available as a variable here too
- style.setProperty("--rt-accent", theme.accent);
- });
-
- // 2. Inject Child Typography (The missing piece)
- const style_id = 'rt-article-typography';
- if (!document.getElementById(style_id)) {
- const style_el = document.createElement('style');
- style_el.id = style_id;
-
- // We explicitly scope these to rt-article to avoid breaking the rest of the page
- style_el.textContent = `
- rt-article h1 {
- font-size: 2.2em;
- font-weight: 700;
- margin-top: 1.5em;
- margin-bottom: 0.5em;
- border-bottom: 2px solid var(--rt-accent);
- padding-bottom: 0.2em;
- line-height: 1.2;
- }
-
- rt-article h2 {
- font-size: 1.7em;
- font-weight: 600;
- margin-top: 1.5em;
- margin-bottom: 0.5em;
- color: var(--rt-accent);
- line-height: 1.3;
- }
-
- rt-article h3 { font-size: 1.4em; margin-top: 1.2em; margin-bottom: 0.5em; }
-
- rt-article p {
- margin-bottom: 1.2em;
- text-align: justify;
- hyphens: auto;
- }
-
- rt-article blockquote {
- border-left: 4px solid var(--rt-accent);
- margin: 1.5em 0;
- padding: 0.5em 0 0.5em 1.2em;
- font-style: italic;
- background: rgba(125,125,125, 0.05);
- }
-
- rt-article ul, rt-article ol {
- margin-bottom: 1.2em;
- padding-left: 2em;
- }
-
- rt-article li {
- margin-bottom: 0.3em;
- }
-
- /* Links inside articles */
- rt-article a {
- color: var(--rt-accent);
- text-decoration: none;
- border-bottom: 1px dotted var(--rt-accent);
- }
- rt-article a:hover {
- border-bottom: 1px solid var(--rt-accent);
- }
- `;
- document.head.appendChild(style_el);
- }
- };
-})();
--- /dev/null
+/*
+ Article Layout: Technical Reference
+ Standard: Theme 1.0
+ Description: High-readability layout for technical documentation on screens.
+ Features: Sans-serif, justified text, distinct headers, boxed code.
+*/
+(function(){
+ const RT = window.StyleRT = window.StyleRT || {};
+
+ RT.article = function() {
+ RT.config = RT.config || {};
+
+ // Default Configuration
+ RT.config.article = {
+ font_family: '"Noto Sans", "Segoe UI", "Helvetica Neue", sans-serif'
+ ,line_height: "1.8" // Generous spacing for screen reading
+ ,font_size: "18px" // Large base size for clarity
+ ,max_width: "820px"
+ ,margin: "0 auto"
+ };
+
+ const conf = RT.config.article;
+ const article_seq = document.querySelectorAll("RT-article");
+
+ // HURDLE
+ if(RT.debug && RT.debug.log) RT.debug.log('selector', `RT.article found ${article_seq.length} elements.`);
+ if(article_seq.length === 0) return;
+
+ // 1. Apply Container Styles
+ article_seq.forEach( (article) =>{
+ const style = article.style;
+ style.display = "block";
+ style.fontFamily = conf.font_family;
+ style.fontSize = conf.font_size;
+ style.lineHeight = conf.line_height;
+ style.maxWidth = conf.max_width;
+ style.margin = conf.margin;
+ style.padding = "0 20px"; // Mobile buffer
+
+ // Default text color from Theme 1.0
+ style.color = "var(--rt-content-main)";
+ });
+
+ // 2. Inject Child Typography
+ const style_id = 'rt-article-typography';
+ if (!document.getElementById(style_id)) {
+ const style_el = document.createElement('style');
+ style_el.id = style_id;
+
+ style_el.textContent = `
+ /* --- HEADERS --- */
+ rt-article h1 {
+ color: var(--rt-brand-primary);
+ font-size: 2.4em;
+ font-weight: 700;
+ margin-top: 1.2em;
+ margin-bottom: 0.6em;
+ border-bottom: 2px solid var(--rt-brand-primary);
+ padding-bottom: 0.3em;
+ line-height: 1.2;
+ letter-spacing: -0.02em;
+ }
+
+ rt-article h2 {
+ color: var(--rt-brand-secondary);
+ font-size: 1.8em;
+ font-weight: 600;
+ margin-top: 1.5em;
+ margin-bottom: 0.5em;
+ border-bottom: 1px dotted var(--rt-border-default);
+ }
+
+ rt-article h3 {
+ color: var(--rt-brand-tertiary);
+ font-size: 1.4em;
+ font-weight: 600;
+ margin-top: 1.4em;
+ margin-bottom: 0.5em;
+ font-style: italic;
+ }
+
+ rt-article h4, rt-article h5, rt-article h6 {
+ color: var(--rt-content-main);
+ font-weight: bold;
+ margin-top: 1.2em;
+ }
+
+ /* --- BODY TEXT --- */
+ rt-article p {
+ margin-bottom: 1.4em;
+ text-align: justify;
+ hyphens: auto;
+ color: var(--rt-content-main);
+ }
+
+ /* --- RICH ELEMENTS --- */
+ rt-article blockquote {
+ border-left: 4px solid var(--rt-brand-secondary);
+ margin: 1.5em 0;
+ padding: 0.5em 1em;
+ font-style: italic;
+ color: var(--rt-content-muted);
+ background: var(--rt-surface-1);
+ border-radius: 0 4px 4px 0;
+ }
+
+ rt-article ul, rt-article ol {
+ margin-bottom: 1.4em;
+ padding-left: 2em;
+ }
+ rt-article li {
+ margin-bottom: 0.4em;
+ }
+ rt-article li::marker {
+ color: var(--rt-brand-secondary);
+ font-weight: bold;
+ }
+
+ /* Links */
+ rt-article a {
+ color: var(--rt-brand-link);
+ text-decoration: none;
+ border-bottom: 1px dotted var(--rt-border-default);
+ transition: all 0.2s;
+ }
+ rt-article a:hover {
+ color: var(--rt-brand-primary);
+ border-bottom: 1px solid var(--rt-brand-primary);
+ background: var(--rt-surface-1);
+ }
+
+ /* --- CODE & TECHNICAL --- */
+ /* Inline Code */
+ rt-article code {
+ background-color: var(--rt-surface-code);
+ color: var(--rt-syntax-keyword);
+ padding: 0.2em 0.4em;
+ border-radius: 4px;
+ font-family: "Consolas", "Monaco", monospace;
+ font-size: 0.9em;
+ border: 1px solid var(--rt-border-faint);
+ }
+
+ /* Preformatted Blocks (if not handled by RT_code.js) */
+ rt-article pre {
+ background: var(--rt-surface-code);
+ padding: 1em;
+ border-radius: 4px;
+ overflow-x: auto;
+ border: 1px solid var(--rt-border-default);
+ }
+ `;
+ document.head.appendChild(style_el);
+ }
+ };
+})();
+
+++ /dev/null
-/*
- Defines the appearance of the <RT-PAGE> container.
-*/
-window.StyleRT = window.StyleRT || {};
-
-window.StyleRT.page = function() {
- const RT = window.StyleRT;
-
- // Fallback accent
- const theme_accent = (RT.config && RT.config.theme) ? RT.config.theme.accent : "hsl(42, 100%, 50%)";
-
- RT.config = RT.config || {};
-
- // Fix: Define defaults independently
- const defaults = {
- width: "100%"
- ,height: "1056px"
- ,padding: "3rem"
- ,margin: "4rem auto"
- ,border_color: theme_accent
- ,shadow: "drop-shadow(8px 12px 40px hsl(44, 96%, 47%))"
- };
-
- // Fix: MERGE defaults into existing config.
- // This allows overrides but prevents empty objects from causing "undefined" CSS.
- RT.config.page = Object.assign({}, defaults, RT.config.page || {});
-
- const conf = RT.config.page;
- const style_id = 'rt-page-styles';
-
- if (!document.getElementById(style_id)) {
- const style_el = document.createElement('style');
- style_el.id = style_id;
-
- style_el.textContent = `
- rt-article {
- counter-reset: rt-page-counter;
- }
-
- rt-page {
- display: block;
- width: ${conf.width};
- height: ${conf.height};
- margin: ${conf.margin};
- padding: ${conf.padding};
- box-sizing: border-box;
-
- background-color: black;
-
- /* These should now be populated correctly */
- border: 1px solid ${conf.border_color};
- position: relative;
- filter: ${conf.shadow};
-
- counter-increment: rt-page-counter;
- overflow: hidden;
- }
-
- rt-page::after {
- content: "Page " counter(rt-page-counter);
- position: absolute;
- bottom: 1.5rem;
- right: 3rem;
- font-family: "Noto Sans JP", sans-serif;
- font-size: 0.9rem;
- font-weight: bold;
- color: ${conf.border_color};
- }
- `;
- document.head.appendChild(style_el);
- }
-};
--- /dev/null
+/*
+ Page Layout: Fixed Glow
+ Standard: Theme 1.0
+ Description: A fixed-height container with a glowing border effect that matches the active theme.
+*/
+(function(){
+ const RT = window.StyleRT = window.StyleRT || {};
+
+ // Function name stays generic so the orchestrator can call RT.page() regardless of file choice
+ RT.page = function() {
+ RT.config = RT.config || {};
+
+ // Default Configuration
+ // We use CSS Variables here so the Theme controls the actual colors.
+ const defaults = {
+ width: "100%"
+ ,height: "1056px"
+ ,padding: "3rem"
+ ,margin: "4rem auto"
+
+ // Dynamic Theme Bindings
+ ,bg_color: "var(--rt-surface-0)" // Black (Dark) or Cream (Light)
+ ,border_color: "var(--rt-brand-primary)" // The Main Accent Color
+ ,text_color: "var(--rt-brand-primary)" // Page Number Color
+
+ // The Glow: Uses the primary brand color for the shadow
+ ,shadow: "drop-shadow(0px 0px 15px var(--rt-brand-primary))"
+ };
+
+ // Merge defaults
+ RT.config.page = Object.assign({}, defaults, RT.config.page || {});
+
+ const conf = RT.config.page;
+ const style_id = 'rt-page-fixed-glow';
+
+ if (!document.getElementById(style_id)) {
+ const style_el = document.createElement('style');
+ style_el.id = style_id;
+
+ style_el.textContent = `
+ /* Reset page counter on the article container */
+ rt-article {
+ counter-reset: rt-page-counter;
+ }
+
+ rt-page {
+ display: block;
+ position: relative;
+ box-sizing: border-box;
+ overflow: hidden;
+
+ /* Dimensions */
+ width: ${conf.width};
+ height: ${conf.height};
+ margin: ${conf.margin};
+ padding: ${conf.padding};
+
+ /* Theming */
+ background-color: ${conf.bg_color};
+ border: 1px solid ${conf.border_color};
+
+ /* The "Glow" Effect */
+ filter: ${conf.shadow};
+
+ /* Counter Increment */
+ counter-increment: rt-page-counter;
+ }
+
+ /* Page Numbering */
+ rt-page::after {
+ content: "Page " counter(rt-page-counter);
+ position: absolute;
+ bottom: 1.5rem;
+ right: 3rem;
+
+ font-family: "Noto Sans", sans-serif;
+ font-size: 0.9rem;
+ font-weight: bold;
+
+ color: ${conf.text_color};
+ opacity: 0.8;
+ pointer-events: none; /* Prevent interference with clicks */
+ }
+ `;
+ document.head.appendChild(style_el);
+ }
+ };
+})();
const modules = [
// Theme & Semantics
- 'style/theme.js',
+ 'style/theme_dark_gold.js',
'style/RT_term.js',
'style/RT_math.js',
'style/RT_code.js',
- 'style/article.js', // Renamed from article_generic
+ 'style/article_tech_ref.js', // Renamed from article_generic
'style/RT_TOC.js',
// Layout & Pagination
'style/paginate_by_element.js',
- 'style/page_css_pn.js',
+ 'style/page_fixed_glow.js',
// Visibility
'style/body_visibility_visible.js'
+++ /dev/null
-/*
- Global Theme Definition: "Inverse Wheat"
- A comprehensive color system for the entire application.
-*/
-( function(){
- const RT = window.StyleRT = window.StyleRT || {};
-
- RT.theme = function(){
- RT.config = RT.config || {};
-
- // THE PALETTE DEFINITION
- RT.config.theme = {
- is_dark: true
-
- // --- BACKGROUNDS ---
- ,bg_app: "hsl(0, 0%, 8%)" // Main Window Background (Deep Charcoal)
- ,bg_panel: "hsl(0, 0%, 12%)" // Sidebars / Cards (Slightly lighter)
- ,bg_code: "hsl(0, 0%, 14%)" // Code blocks / Terminals
- ,bg_input: "hsl(0, 0%, 16%)" // Form inputs
- ,bg_select: "hsl(45, 100%, 15%)" // Text Selection Background (Dim Amber)
-
- // --- TYPOGRAPHY ---
- ,text_main: "hsl(36, 30%, 85%)" // Primary Content (Pale Wheat)
- ,text_muted: "hsl(36, 15%, 60%)" // Metadata / Footer / Subtitles
- ,text_faint: "hsl(36, 10%, 40%)" // Placeholders / Disabled text
- ,text_inv: "hsl(0, 0%, 10%)" // Inverted text (for buttons/highlights)
-
- // --- ACCENTS (The "Wheat/Amber" Spectrum) ---
- ,primary: "hsl(45, 100%, 50%)" // P3 Amber (Active states, H1, Key focus)
- ,secondary: "hsl(38, 90%, 65%)" // Warm Gold (H2, distinct UI elements)
- ,tertiary: "hsl(30, 60%, 70%)" // Bronze (H3, subtle highlights)
- ,link: "hsl(48, 100%, 50%)" // High-Vis Yellow (Links)
- ,link_hover: "hsl(48, 100%, 70%)" // Bright Yellow
-
- // --- UI & BORDERS ---
- ,border_main: "hsl(36, 20%, 25%)" // Standard dividers
- ,border_light:"hsl(36, 20%, 35%)" // Hover borders
- ,shadow: "0 4px 6px rgba(0,0,0, 0.5)"
-
- // --- STATUS / SYNTAX (Shifted to Earth Tones) ---
- // These are tuned to look good on the dark background without looking neon.
- ,success: "hsl(100, 50%, 55%)" // Muted Olive Green
- ,warning: "hsl(35, 90%, 60%)" // Burnt Orange
- ,error: "hsl(0, 60%, 65%)" // Brick Red
- ,info: "hsl(200, 40%, 60%)" // Slate Blue (for contrast)
- ,string: "hsl(70, 40%, 65%)" // Sage (for code strings)
- ,keyword: "hsl(35, 100%, 65%)" // Orange (for code keywords)
- };
-
- const palette = RT.config.theme;
- const body = document.body;
- const html = document.documentElement;
-
- // 1. Basic Reset
- html.style.margin = "0"; html.style.padding = "0";
- body.style.margin = "0"; body.style.padding = "0";
- body.style.minHeight = "100vh";
-
- // 2. Apply Base Colors
- html.style.backgroundColor = palette.bg_app;
- body.style.backgroundColor = palette.bg_app;
- body.style.color = palette.text_main;
-
- // 3. Export CSS Variables
- // This loop automatically makes every key above available as var(--rt-key)
- const s = body.style;
- for (const [key, value] of Object.entries(palette)) {
- // e.g. converts "bg_app" to "--rt-bg-app"
- s.setProperty(`--rt-${key.replace('_', '-')}`, value);
- }
-
- // 4. Global Selection Style
- // This ensures even standard text highlighting matches the theme
- const style_id = 'rt-global-overrides';
- if (!document.getElementById(style_id)) {
- const style = document.createElement('style');
- style.id = style_id;
- style.textContent = `
- ::selection { background: var(--rt-bg-select); color: var(--rt-primary); }
- ::-moz-selection { background: var(--rt-bg-select); color: var(--rt-primary); }
-
- /* Scrollbar Styling (Webkit) */
- ::-webkit-scrollbar { width: 10px; }
- ::-webkit-scrollbar-track { background: var(--rt-bg-app); }
- ::-webkit-scrollbar-thumb { background: var(--rt-border-main); border-radius: 5px; }
- ::-webkit-scrollbar-thumb:hover { background: var(--rt-secondary); }
- `;
- document.head.appendChild(style);
- }
- };
-} )();
--- /dev/null
+/*
+ Theme: Inverse Wheat (Dark)
+ Standard: Theme 1.0
+ Description: High contrast Amber on Deep Charcoal.
+*/
+( function(){
+ const RT = window.StyleRT = window.StyleRT || {};
+
+ RT.theme_dark = function(){
+ RT.config = RT.config || {};
+
+ // THEME 1.0 DATA CONTRACT
+ RT.config.theme = {
+ meta_is_dark: true
+ ,meta_name: "Inverse Wheat"
+
+ // --- SURFACES (Depth & Container Hierarchy) ---
+ ,surface_0: "hsl(0, 0%, 5%)" // App Background (Deepest)
+ ,surface_1: "hsl(0, 0%, 10%)" // Sidebar / Nav / Panels
+ ,surface_2: "hsl(0, 0%, 14%)" // Cards / Floating Elements
+ ,surface_3: "hsl(0, 0%, 18%)" // Modals / Dropdowns / Popovers
+ ,surface_input: "hsl(0, 0%, 12%)" // Form Inputs
+ ,surface_code: "hsl(0, 0%, 11%)" // Code Block Background
+ ,surface_select: "hsl(45, 100%, 15%)" // Text Selection Highlight
+
+ // --- CONTENT (Text & Icons) ---
+ ,content_main: "hsl(36, 30%, 85%)" // Primary Reading Text
+ ,content_muted: "hsl(36, 15%, 60%)" // Metadata, subtitles
+ ,content_subtle: "hsl(36, 10%, 40%)" // Placeholders, disabled states
+ ,content_inverse: "hsl(0, 0%, 5%)" // Text on high-contrast buttons
+
+ // --- BRAND & ACTION (The "Wheat" Identity) ---
+ ,brand_primary: "hsl(45, 100%, 50%)" // Main Action / H1 / Focus Ring
+ ,brand_secondary: "hsl(38, 90%, 65%)" // Secondary Buttons / H2
+ ,brand_tertiary: "hsl(30, 60%, 70%)" // Accents / H3
+ ,brand_link: "hsl(48, 100%, 50%)" // Hyperlinks (High Visibility)
+
+ // --- BORDERS & DIVIDERS ---
+ ,border_faint: "hsl(36, 20%, 15%)" // Subtle separation
+ ,border_default: "hsl(36, 20%, 25%)" // Standard Card Borders
+ ,border_strong: "hsl(36, 20%, 40%)" // Active states / Inputs
+
+ // --- STATE & FEEDBACK (Earth Tones) ---
+ ,state_success: "hsl(100, 50%, 45%)" // Olive Green
+ ,state_warning: "hsl(35, 90%, 55%)" // Burnt Orange
+ ,state_error: "hsl(0, 60%, 55%)" // Brick Red
+ ,state_info: "hsl(200, 40%, 55%)" // Slate Blue
+
+ // --- SYNTAX HIGHLIGHTING (For Code) ---
+ ,syntax_keyword: "hsl(35, 100%, 65%)" // Orange
+ ,syntax_string: "hsl(75, 50%, 60%)" // Sage Green
+ ,syntax_func: "hsl(45, 90%, 70%)" // Light Gold
+ ,syntax_comment: "hsl(36, 15%, 45%)" // Brown/Gray
+ };
+
+ // --- APPLY THEME ---
+ const palette = RT.config.theme;
+ const body = document.body;
+ const html = document.documentElement;
+
+ // 1. Paint Base
+ html.style.backgroundColor = palette.surface_0;
+ body.style.backgroundColor = palette.surface_0;
+ body.style.color = palette.content_main;
+
+ // 2. Export Variables (Standardization)
+ const s = body.style;
+ for (const [key, value] of Object.entries(palette)) {
+ s.setProperty(`--rt-${key.replace(/_/g, '-')}`, value);
+ }
+
+ // 3. Global Overrides
+ const style_id = 'rt-global-overrides';
+ if (!document.getElementById(style_id)) {
+ const style = document.createElement('style');
+ style.id = style_id;
+ style.textContent = `
+ ::selection { background: var(--rt-surface-select); color: var(--rt-brand-primary); }
+ ::-moz-selection { background: var(--rt-surface-select); color: var(--rt-brand-primary); }
+
+ ::-webkit-scrollbar { width: 12px; }
+ ::-webkit-scrollbar-track { background: var(--rt-surface-0); }
+ ::-webkit-scrollbar-thumb {
+ background: var(--rt-border-default);
+ border: 2px solid var(--rt-surface-0);
+ border-radius: 8px;
+ }
+ ::-webkit-scrollbar-thumb:hover { background: var(--rt-brand-secondary); }
+ `;
+ document.head.appendChild(style);
+ }
+ };
+
+ // Auto-load for dev
+ RT.theme_dark();
+} )();
--- /dev/null
+/*
+ Theme: Classic Wheat (Light)
+ Standard: Theme 1.0
+ Description: Warm paper tones with Burnt Orange accents.
+*/
+( function(){
+ const RT = window.StyleRT = window.StyleRT || {};
+
+ RT.theme_light = function(){
+ RT.config = RT.config || {};
+
+ // THEME 1.0 DATA CONTRACT
+ RT.config.theme = {
+ meta_is_dark: false
+ ,meta_name: "Classic Wheat"
+
+ // --- SURFACES ---
+ ,surface_0: "hsl(40, 30%, 94%)" // App Background (Cream/Linen)
+ ,surface_1: "hsl(40, 25%, 90%)" // Sidebar (Slightly darker beige)
+ ,surface_2: "hsl(40, 20%, 98%)" // Cards (Lighter, almost white)
+ ,surface_3: "hsl(0, 0%, 100%)" // Modals (Pure White)
+ ,surface_input: "hsl(40, 20%, 98%)" // Form Inputs
+ ,surface_code: "hsl(40, 15%, 90%)" // Code Block Background
+ ,surface_select: "hsl(45, 100%, 85%)" // Text Selection Highlight
+
+ // --- CONTENT ---
+ ,content_main: "hsl(30, 20%, 20%)" // Deep Umber (Not Black)
+ ,content_muted: "hsl(30, 15%, 45%)" // Medium Brown
+ ,content_subtle: "hsl(30, 10%, 65%)" // Light Brown/Gray
+ ,content_inverse: "hsl(40, 30%, 94%)" // Text on dark buttons
+
+ // --- BRAND & ACTION ---
+ ,brand_primary: "hsl(30, 90%, 35%)" // Burnt Orange (Action)
+ ,brand_secondary: "hsl(35, 70%, 45%)" // Rust / Gold
+ ,brand_tertiary: "hsl(25, 60%, 55%)" // Copper
+ ,brand_link: "hsl(30, 100%, 35%)" // Link Color
+
+ // --- BORDERS ---
+ ,border_faint: "hsl(35, 20%, 85%)"
+ ,border_default: "hsl(35, 20%, 75%)"
+ ,border_strong: "hsl(35, 20%, 55%)"
+
+ // --- STATE & FEEDBACK ---
+ ,state_success: "hsl(100, 40%, 40%)" // Forest Green
+ ,state_warning: "hsl(30, 90%, 50%)" // Persimmon
+ ,state_error: "hsl(0, 60%, 45%)" // Crimson
+ ,state_info: "hsl(200, 50%, 45%)" // Navy Blue
+
+ // --- SYNTAX ---
+ ,syntax_keyword: "hsl(20, 90%, 45%)" // Rust
+ ,syntax_string: "hsl(100, 35%, 35%)" // Ivy Green
+ ,syntax_func: "hsl(300, 30%, 40%)" // Muted Purple
+ ,syntax_comment: "hsl(35, 10%, 60%)" // Light Brown
+ };
+
+ // --- APPLY THEME ---
+ const palette = RT.config.theme;
+ const body = document.body;
+ const html = document.documentElement;
+
+ html.style.backgroundColor = palette.surface_0;
+ body.style.backgroundColor = palette.surface_0;
+ body.style.color = palette.content_main;
+
+ const s = body.style;
+ for (const [key, value] of Object.entries(palette)) {
+ s.setProperty(`--rt-${key.replace(/_/g, '-')}`, value);
+ }
+ };
+} )();