Browse Source

add Time Safari color palette file

main
Trent Larson 1 month ago
parent
commit
3cc9fb12cb
  1. 237
      ts-themes-tailwind.html

237
ts-themes-tailwind.html

@ -0,0 +1,237 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Time Safari Theme Switcher</title>
<style>
:root {
--bg: #ffffff;
--text: #000000;
--primary: #dddddd;
--accent: #cccccc;
--highlight: #aaaaaa;
}
body {
margin: 0;
padding: 2rem;
background-color: var(--bg);
color: var(--text);
font-family: system-ui, sans-serif;
transition: all 0.3s ease;
}
h2, h3 {
margin-top: 1.5rem;
}
.theme-buttons {
margin: 1rem 0;
}
button {
margin: 0.3rem;
padding: 0.5rem 1rem;
border: none;
border-radius: 4px;
cursor: pointer;
background: #eee;
transition: background 0.2s;
}
button:hover {
background: #ddd;
}
.swatch-bar {
display: flex;
height: 40px;
margin-bottom: 1.5rem;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.swatch {
flex: 1;
}
.card {
background: var(--primary);
padding: 1rem;
border-radius: 8px;
margin-bottom: 1rem;
}
.highlight {
background: var(--highlight);
padding: 0.5rem;
border-radius: 4px;
display: inline-block;
}
.accent {
color: var(--accent);
}
.color-vars {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.color-tile {
border: 1px solid #ccc;
border-radius: 6px;
padding: 0.5rem;
display: flex;
flex-direction: column;
justify-content: space-between;
font-size: 0.9rem;
background-color: #fff;
}
.tile-preview {
height: 40px;
border-radius: 4px;
margin-bottom: 0.3rem;
}
</style>
</head>
<body>
<h2>🎨 Time Safari Theme Preview</h2>
<!-- Theme Switch Buttons -->
<div class="theme-buttons">
<button onclick="setTheme('op-calm')">🌼🧠 Optimistic Calm</button>
<!--
<button onclick="setTheme('pastel')">🌸 Warm Pastels</button>
<button onclick="setTheme('earth')">🌼 Optimistic Earth</button>
<button onclick="setTheme('bright')">✨ Bright Uplift</button>
<button onclick="setTheme('calm')">🧠 Productive Calm</button>
<button onclick="setTheme('garden')">🪴 Giving Garden</button>
<button onclick="setTheme('op-garden')">🌼🪴 Optimistic Garden</button>
-->
</div>
<!-- Visual Designer Swatch Bar -->
<div class="swatch-bar">
<div class="swatch" id="swatch-bg"></div>
<div class="swatch" id="swatch-text"></div>
<div class="swatch" id="swatch-primary"></div>
<div class="swatch" id="swatch-accent"></div>
<div class="swatch" id="swatch-highlight"></div>
</div>
<!-- UI Preview Card -->
<div class="card">
<h3>Sample Card</h3>
<p>This card reflects the current theme's <code>--primary</code> background color.</p>
<p class="highlight">This is a <code>--highlight</code> element.</p>
<p class="accent">This line uses the <code>--accent</code> color.</p>
</div>
<!-- Variable Overview -->
<h3>Current Theme Colors</h3>
<div class="color-vars" id="colorVars">
<!-- Filled by JavaScript -->
</div>
<script>
const themes = {
"op-calm": {
'--bg': '#FAFAFA',
'--text': '#3E4C59',
'--primary': '#D0F0EF',
'--accent': '#E2725B',
'--highlight': '#6699CC'
},
pastel: {
'--bg': '#fffafc',
'--text': '#444',
'--primary': '#CDE9F9',
'--accent': '#F7D6E0',
'--highlight': '#FBD38D'
},
earth: {
'--bg': '#FAF3E0',
'--text': '#3A3A3A',
'--primary': '#FFCC70',
'--accent': '#E2725B',
'--highlight': '#7F9F80'
},
bright: {
'--bg': '#FFF9F2',
'--text': '#2D2D2D',
'--primary': '#FFF685',
'--accent': '#FFB09E',
'--highlight': '#A7F2C1'
},
calm: {
'--bg': '#FAFAFA',
'--text': '#3E4C59',
'--primary': '#D0F0EF',
'--accent': '#FFD8BE',
'--highlight': '#6699CC'
},
garden: {
'--bg': '#F7FFF7',
'--text': '#3C3C3C',
'--primary': '#A8D5BA',
'--accent': '#E0A899',
'--highlight': '#F9DC5C'
},
"op-garden": {
'--bg': '#F7FFF7',
'--text': '#3C3C3C',
'--primary': '#A8D5BA',
'--accent': '#E2725B',
'--highlight': '#F9DC5C'
},
};
function setTheme(themeName) {
const theme = themes[themeName];
for (let variable in theme) {
document.documentElement.style.setProperty(variable, theme[variable]);
}
localStorage.setItem('selectedTheme', themeName);
renderColorTiles(theme);
updateSwatchBar(theme);
}
function loadTheme() {
const savedTheme = localStorage.getItem('selectedTheme') || 'op-calm';
setTheme(savedTheme);
}
function renderColorTiles(theme) {
const container = document.getElementById('colorVars');
container.innerHTML = '';
for (let variable in theme) {
const tile = document.createElement('div');
tile.className = 'color-tile';
tile.innerHTML = `
<div class="tile-preview" style="background: ${theme[variable]}"></div>
<strong>${variable}</strong>
<code>${theme[variable]}</code>
`;
container.appendChild(tile);
}
}
function updateSwatchBar(theme) {
document.getElementById('swatch-bg').style.background = theme['--bg'];
document.getElementById('swatch-text').style.background = theme['--text'];
document.getElementById('swatch-primary').style.background = theme['--primary'];
document.getElementById('swatch-accent').style.background = theme['--accent'];
document.getElementById('swatch-highlight').style.background = theme['--highlight'];
}
window.onload = loadTheme;
</script>
</body>
</html>
Loading…
Cancel
Save