132 lines
5.5 KiB
JavaScript
132 lines
5.5 KiB
JavaScript
// SearXNG theme injector - matches home page theme
|
|
(function() {
|
|
'use strict';
|
|
|
|
function getThemeFromCookie() {
|
|
const cookies = document.cookie.split(';');
|
|
for (let cookie of cookies) {
|
|
const [name, value] = cookie.trim().split('=');
|
|
if (name === 'simple_style') {
|
|
return value === 'dark' ? 'dark' : 'light';
|
|
}
|
|
}
|
|
// Check HTML class as fallback
|
|
if (document.documentElement.classList.contains('theme-dark') ||
|
|
document.documentElement.classList.contains('theme-black')) {
|
|
return 'dark';
|
|
}
|
|
return 'light';
|
|
}
|
|
|
|
function applyTheme(theme) {
|
|
const isDark = theme === 'dark';
|
|
|
|
const colors = isDark ? {
|
|
bg: '#0C1012',
|
|
bgBody: '#1F282E',
|
|
textPrimary: '#59C99C',
|
|
textSecondary: '#A5A9AB',
|
|
border: '#326B78',
|
|
hover: '#326B78',
|
|
shadow: 'rgba(53, 62, 67, 0.27)'
|
|
} : {
|
|
bg: '#f7f8f7',
|
|
bgBody: '#f7f8f7',
|
|
textPrimary: '#2a3826',
|
|
textSecondary: '#62696D',
|
|
border: '#904b59',
|
|
hover: '#7d9b8f',
|
|
shadow: 'rgba(42, 56, 38, 0.27)'
|
|
};
|
|
|
|
const styleId = 'fraggle-searxng-theme';
|
|
let style = document.getElementById(styleId);
|
|
if (!style) {
|
|
style = document.createElement('style');
|
|
style.id = styleId;
|
|
document.head.appendChild(style);
|
|
}
|
|
|
|
style.textContent = `
|
|
body, html { background-color: ${colors.bgBody} !important; color: ${colors.textPrimary} !important; }
|
|
#main_results, #main_index { background-color: ${colors.bgBody} !important; }
|
|
#q, input[type="text"], input[type="search"] {
|
|
background-color: ${colors.bg} !important;
|
|
color: ${colors.textPrimary} !important;
|
|
border: 4px solid ${colors.border} !important;
|
|
box-shadow: 5px 5px 1px 2px ${colors.shadow} !important;
|
|
border-radius: 8px !important;
|
|
}
|
|
#q:focus, input[type="text"]:focus, input[type="search"]:focus {
|
|
border-color: ${colors.border} !important;
|
|
outline: none !important;
|
|
}
|
|
button, input[type="submit"], .btn {
|
|
background-color: ${colors.bg} !important;
|
|
color: ${colors.textPrimary} !important;
|
|
border: 4px solid ${colors.border} !important;
|
|
box-shadow: 5px 5px 1px 2px ${colors.shadow} !important;
|
|
border-radius: 8px !important;
|
|
}
|
|
button:hover, input[type="submit"]:hover, .btn:hover {
|
|
color: ${colors.hover} !important;
|
|
border-color: ${colors.hover} !important;
|
|
}
|
|
a { color: ${colors.textPrimary} !important; }
|
|
a:hover { color: ${colors.hover} !important; }
|
|
a:visited { color: ${colors.textPrimary} !important; }
|
|
.result, .result-default {
|
|
background-color: ${colors.bg} !important;
|
|
border: 4px solid ${colors.border} !important;
|
|
box-shadow: 5px 5px 1px 2px ${colors.shadow} !important;
|
|
border-radius: 8px !important;
|
|
color: ${colors.textPrimary} !important;
|
|
}
|
|
.result:hover { box-shadow: 7px 7px 2px 3px ${colors.shadow} !important; }
|
|
.result h3 a { color: ${colors.textPrimary} !important; }
|
|
.result h3 a:hover { color: ${colors.hover} !important; }
|
|
.result .content { color: ${colors.textPrimary} !important; }
|
|
.result .url { color: ${colors.textSecondary} !important; }
|
|
nav, #links_on_top { background-color: transparent !important; }
|
|
nav a, #links_on_top a { color: ${colors.textPrimary} !important; }
|
|
nav a:hover, #links_on_top a:hover { color: ${colors.hover} !important; }
|
|
fieldset {
|
|
border: 2px solid ${colors.border} !important;
|
|
border-radius: 8px !important;
|
|
background-color: ${colors.bg} !important;
|
|
}
|
|
legend { color: ${colors.textPrimary} !important; }
|
|
select, input[type="checkbox"] {
|
|
background-color: ${colors.bg} !important;
|
|
color: ${colors.textPrimary} !important;
|
|
border: 2px solid ${colors.border} !important;
|
|
border-radius: 4px !important;
|
|
}
|
|
h1, h2, h3, h4, h5, h6, p { color: ${colors.textPrimary} !important; }
|
|
.category, .tab {
|
|
background-color: ${colors.bg} !important;
|
|
color: ${colors.textPrimary} !important;
|
|
border: 2px solid ${colors.border} !important;
|
|
border-radius: 8px !important;
|
|
}
|
|
.category:hover, .tab:hover, .category.selected, .tab.selected {
|
|
background-color: ${colors.hover} !important;
|
|
color: ${colors.bg} !important;
|
|
border-color: ${colors.hover} !important;
|
|
}
|
|
`;
|
|
}
|
|
|
|
// Apply theme immediately
|
|
const theme = getThemeFromCookie();
|
|
applyTheme(theme);
|
|
|
|
// Watch for cookie changes (when user toggles theme on home page)
|
|
setInterval(function() {
|
|
const newTheme = getThemeFromCookie();
|
|
if (newTheme !== theme) {
|
|
applyTheme(newTheme);
|
|
}
|
|
}, 500);
|
|
})();
|