-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy paththeme.html
128 lines (116 loc) · 3.87 KB
/
theme.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Theme Editor</title>
<style>
.theme-preview {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
font-weight: bold;
font-family: monospace;
font-size: 11pt;
background-color: #282c34;
color: white;
margin-bottom: 20px;
}
.color-input {
display: flex;
margin-bottom: 10px;
}
.color-input input {
width: 100px;
margin-right: 10px;
}
#theme-output {
width: 100%;
height: 50px;
margin-bottom: 10px;
}
button {
padding: 10px;
}
</style>
</head>
<body>
<div class="theme-preview" id="themePreview">
<!-- Preview colors will be added here -->
</div>
<div id="colorInputs">
<!-- Color inputs will be generated here -->
</div>
<textarea id="theme-output" placeholder="Enter theme here">
['282c34', 'abb2bf', '3f4451', '4f5666', 'e05561', 'ff616e', '8cc265', 'a5e075', 'd18f52', 'f0a45d', '4aa5f0', '4dc4ff', 'c162de', 'de73ff', '42b3c2', '4cd1e0', 'e6e6e6', 'ffffff']
</textarea>
<br>
<button onclick="loadTheme()">Load Theme</button>
<button onclick="copyTheme()">Copy Theme</button>
<script>
let currentTheme = [];
// Function to generate color input fields
function generateColorInputs(theme) {
colorInputsContainer.innerHTML = ''; // Clear existing inputs
theme.forEach((color, index) => {
const colorDiv = document.createElement('div');
colorDiv.className = 'color-input';
colorDiv.innerHTML = `
<label for="color${index}">Color ${index}:</label>
<input type="color" id="color${index}" value="#${color}" onchange="updateTheme(${index})">
`;
colorInputsContainer.appendChild(colorDiv);
});
updatePreview(theme);
updateOutput(theme);
}
// Function to update the theme
function updateTheme(index) {
currentTheme[index] = document.getElementById(`color${index}`).value.slice(1);
updatePreview(currentTheme);
updateOutput(currentTheme);
}
// Function to update the preview
function updatePreview(theme) {
themePreview.style.backgroundColor = `#${theme[0]}`;
themePreview.innerHTML = '';
theme.slice(1).forEach(color => {
const span = document.createElement('span');
span.style.color = `#${color}`;
span.style.margin = '0 5px';
span.textContent = color;
themePreview.appendChild(span);
});
}
// Function to update the theme output
function updateOutput(theme) {
themeOutput.value = `['${theme.join("', '")}']`;
}
// Function to load the theme from the textarea
function loadTheme() {
try {
const themeText = themeOutput.value.replace(/['\[\]\s]/g, '');
const themeArray = themeText.split(',');
if (themeArray.length > 0) {
currentTheme = themeArray;
generateColorInputs(currentTheme);
} else {
alert('Invalid theme format!');
}
} catch (e) {
alert('Invalid theme format!');
}
}
// Function to copy the theme to the clipboard
function copyTheme() {
themeOutput.select();
document.execCommand('copy');
alert('Theme copied to clipboard!');
}
const colorInputsContainer = document.getElementById('colorInputs');
const themePreview = document.getElementById('themePreview');
const themeOutput = document.getElementById('theme-output');
</script>
</body>
</html>