designslife/Outcut
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: base CSS theme with density, hiding, and readability overrides

Browse Source
This commit is contained in:
Joel Brock
2026-04-23 08:55:09 -07:00
parent e50b11450f
commit 631e68cb63
2 changed files with 338 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
content/content.js
View File

@@ -5,24 +5,38 @@
const OR = window.OutlookRelook;
async function init() {
const settings = await OR.loadSettings();
console.log('[Outlook Relook] Loaded settings:', settings);
// Map setting keys to data attributes on <html>
const SETTING_TO_ATTR = {
compactTopBar: 'data-or-compact-topbar',
compactCommandBar: 'data-or-compact-commandbar',
compactMessageList: 'data-or-compact-messagelist',
compactReadingPane: 'data-or-compact-readingpane',
compactFolderPane: 'data-or-compact-folderpane',
narrowDateColumn: 'data-or-narrow-datecol',
compressComposeToolbar:'data-or-compact-compose',
readingPaneMaxWidth: 'data-or-reading-maxwidth',
hideCopilot: 'data-or-hide-copilot',
hideSuggestedReplies: 'data-or-hide-suggestedreplies',
hidePromoBanners: 'data-or-hide-promos',
hideFocusedOtherTabs: 'data-or-hide-focusedtabs',
hideSidebarAppIcons: 'data-or-hide-sidebaricons',
hideGroupsSection: 'data-or-hide-groups',
hideMyDayButtons: 'data-or-hide-myday',
hideSenderAvatars: 'data-or-hide-avatars',
hideFeatureDiscovery: 'data-or-hide-discovery',
hideVivaInsights: 'data-or-hide-viva',
hideUnreadOtherBanner: 'data-or-hide-unreadother',
hideActivityFeed: 'data-or-hide-activity',
unreadDistinction: 'data-or-unread-distinction',
previewOwnLine: 'data-or-preview-own-line',
normalizeFontWeight: 'data-or-normalize-font',
darkModeEmailFix: 'data-or-darkmode-fix',
};
// Apply color scheme attribute
applyColorScheme(settings.colorScheme);
// Listen for setting changes from popup
chrome.storage.onChanged.addListener((changes, area) => {
if (area !== 'sync') return;
console.log('[Outlook Relook] Settings changed:', changes);
// Re-apply color scheme if it changed
if (changes.colorScheme) {
applyColorScheme(changes.colorScheme.newValue);
}
});
}
// Non-boolean attributes
const SETTING_TO_ATTR_VALUE = {
messageListFontSize: 'data-or-fontsize',
};
function applyColorScheme(scheme) {
let resolved = scheme;
@@ -30,10 +44,68 @@
resolved = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
document.documentElement.setAttribute('data-outlook-relook-scheme', resolved);
console.log('[Outlook Relook] Color scheme:', resolved);
}
// Listen for system theme changes when scheme is 'system'
function applySettingsToDOM(settings) {
// Boolean toggles -> data attributes
for (const [key, attr] of Object.entries(SETTING_TO_ATTR)) {
document.documentElement.setAttribute(attr, String(!!settings[key]));
}
// Value-based attributes
for (const [key, attr] of Object.entries(SETTING_TO_ATTR_VALUE)) {
document.documentElement.setAttribute(attr, settings[key] || '');
}
// Color scheme
applyColorScheme(settings.colorScheme);
// Accent color
if (settings.accentColor) {
document.documentElement.style.setProperty('--or-accent', settings.accentColor);
}
console.log('[Outlook Relook] Settings applied to DOM');
}
function injectThemeCSS(theme) {
// Remove existing theme stylesheet
const existing = document.getElementById('outlook-relook-theme');
if (existing) existing.remove();
// Inject the theme CSS
const link = document.createElement('link');
link.id = 'outlook-relook-theme';
link.rel = 'stylesheet';
link.href = chrome.runtime.getURL('themes/' + theme + '.css');
document.head.appendChild(link);
console.log('[Outlook Relook] Theme loaded: ' + theme);
}
async function init() {
const settings = await OR.loadSettings();
console.log('[Outlook Relook] Loaded settings:', settings);
applySettingsToDOM(settings);
injectThemeCSS(settings.theme);
// Listen for setting changes from popup
chrome.storage.onChanged.addListener((changes, area) => {
if (area !== 'sync') return;
// Build updated settings object
OR.loadSettings().then((updated) => {
applySettingsToDOM(updated);
// Swap theme CSS if theme changed
if (changes.theme) {
injectThemeCSS(changes.theme.newValue);
}
});
});
}
// Listen for system theme changes
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', async () => {
const settings = await OR.loadSettings();
if (settings.colorScheme === 'system') {