๐ Rocketโs Color Toggle template
This will require some work on your part to do your entire page. the template as is only modifies itself and needs you to add your targets and style types into it.
below you will find a template for my little toggle box with three colors loaded.
this will work in tandem with other templates. with a bit of work copying targets and such into the wiring section below. I added instructions at the bottom
also this is my first rentry so I apologize if its a bit wonky
Here are some examples of it in full use with LavEnRoses dead dove template. as mentioned the template will only change the toggle box and will need you to add your own targets and styles.
click the photo to be taken to the page and try them yourself
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 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 | <style>
/* =-=-=-=-=-= Dropdown outer container =-=-=-=-=-=-= */
.Rocket-dropdown {
margin: 10px auto; /* Center horizontally, with vertical spacing */
flex-grow: 0; /* Prevent stretching if inside a flex container */
width: 100%; /* Take up full width on small screens */
font-family: 'Berkshire Swash', cursive;
max-width: 250px;
}
/* =-=-=-=-=-= Dropdown clickable header (details box) =-=-=-=-=-=-= */
/* This is the "Color toggles ๐จ" title bar you click to open/close.
It has a frosted-glass look, custom font, and rounded corners. */
.Rocket-details {
backdrop-filter: blur(6px); /* Glassy blur effect */
color: #fff; /* White text */
font-family: 'Berkshire Swash', cursive; /* Fancy decorative font */
font-weight: 600; /* Semi-bold text */
font-size: 25px; /* Big title text */
padding: 5px 3px; /* Space inside the box */
text-align: center; /* Center the text */
margin: 5px auto; /* Center it + spacing around */
display: block; /* Make sure it behaves like a block */
width: 100%; /* Full width */
overflow: auto; /* Add scroll if content overflows */
background-color: rgba(0,0,0,0.3); /* Transparent black background */
border-bottom-right-radius: 40px;
border-top-left-radius: 40px;
border: 1px ridge #9F00ff;
}
/* =-=-=-=-=-= Hover effects for dropdown header =-=-=-=-=-=-= */
.Rocket-details:hover {
box-shadow: 0 0 15px 1px #9F00ff; /* Purple glow */
border: 2px ridge #9F00ff; /* Black ridged border */
background-color: rgba(0, 0, 0, 0.5); /* Darker background */
}
/* =-=-=-=-=-= Dropdown revealed content area =-=-=-=-=-=-= */
/* This is the box that shows up when the dropdown is opened. */
.Rocket-dropdown-content {
padding: 10px; /* Space inside */
text-align: center; /* Center the text */
max-width: 100%; /* Donโt overflow parent box */
overflow-x: auto; /* Add horizontal scrollbar if needed */
}
.Rocket-summary {
cursor: pointer; /* Pointer cursor (hand) when hovering */
list-style: none; /* Remove default dropdown arrow/bullets */
}
</style>
<style>
/* =-=-=-=-=-= Widget Options (buttons inside dropdown) =-=-=-=-=-=-= */
/* The container that holds all the toggle buttons.
We use flexbox in a vertical direction with small gaps. */
.widget-options {
display: flex;
flex-direction: column; /* Stack buttons top to bottom */
gap: 0.5rem; /* Space between buttons */
}
/* Each row is a <details> with a summary (label + circle button). */
.widget-options details summary {
display: flex; /* Put label and button side-by-side */
align-items: center; /* Align vertically */
justify-content: space-between; /* Push label left, button right */
cursor: pointer; /* Pointer cursor */
width: 100%; /* Full width */
height: 3rem; /* Row height */
transition: border-bottom 0.3s ease, color 0.3s ease; /* Smooth hover animation */
}
/* Hover effect for each summary row */
.widget-options details summary:hover {
border-bottom: 2px ridge #9F00ff; /* underline border */
color: #9F00ff; /* Text color */
}
/* Text label (like "Red" or "Dark Red") */
switch-label {
text-align: left;
font-size: 1rem;
color: #fff; /* White text */
}
/* The small circle button (inactive/neutral state). */
.color-button {
width: 24px;
height: 24px;
border-radius: 50%; /* Make it round */
background: #888; /* Default gray */
border: inset 2px #000; /* Black inset border for depth */
transition: background 0.3s ease, transform 0.2s ease; /* Smooth color change */
}
/* Color of the circle when Red toggle is active */
details.toggle-red[open] .color-button {
background: #ff0000;
}
/* Color of the circle when Dark Red toggle is active */
details.toggle-dark-red[open] .color-button {
background: #8b0000;
}
/* Circle button turns green when active */
details.toggle-green[open] .color-button {
background: #00ff00;
}
/* When one toggle is open, disable the others (dim + no clicks). */
.widget-options:has(details[open]) details:not([open]) {
opacity: 0.5; /* Make inactive toggles look faded */
pointer-events: none;/* Prevent clicking */
}
</style>
<style>
/* =-=-=-=-=-= Button wiring (color themes) =-=-=-=-=-=-= */
/* These rules change borders, glow, and hover colors based on
which toggle is active. Copy and edit these blocks for new colors. */
/* When Red toggle is active */
body:has(.toggle-red[open]) .Rocket-details,
body:has(.toggle-red[open]) .widget-options details summary:hover
{border-color: #ff0000; }
body:has(.toggle-red[open]) .widget-options details summary:hover
{ color: #ff0000; }
body:has(.toggle-red[open]) .Rocket-details:hover
{ box-shadow: 0 0 15px 1px #ff0000; }
/* Each new toggle color needs its own section like the above. */
</style>
<style>
/* =-=-=-=-=-= Button Two (Dark Red Theme) =-=-=-=-=-=-= */
/* Same as above but with dark red (#8b0000). */
body:has(.toggle-dark-red[open]) .Rocket-details,
body:has(.toggle-dark-red[open]) .widget-options details summary:hover
{border-color: #8b0000;}
body:has(.toggle-dark-red[open]) .widget-options details summary:hover
{color: #8b0000;}
body:has(.toggle-dark-red[open]) .Rocket-details:hover
{ box-shadow: 0 0 15px 1px #8b0000; }
</style>
<style>
/* =-=-=-=-=-= Button Three (Green Theme) =-=-=-=-=-=-= */
body:has(.toggle-green[open]) .Rocket-details,
body:has(.toggle-green[open]) .widget-options details summary:hover
{ border-color: #00ff00; }
body:has(.toggle-green[open]) .widget-options details summary:hover
{ color: #00ff00; }
body:has(.toggle-green[open]) .Rocket-details:hover
{ box-shadow: 0 0 15px 1px #00ff00; }
</style>
<div class="Rocket-dropdown">
<details class="Rocket-details">
<summary class="Rocket-summary">Color toggles ๐จ</summary>
<div class="Rocket-dropdown-content">
<div class="color-toggle-widget widget-options">
<details class="toggle-red">
<summary>
<span class="switch-label">Red</span>
<div class="color-button"></div>
</summary>
</details>
<details class="toggle-dark-red">
<summary>
<span class="switch-label">Dark Red</span>
<div class="color-button"></div>
</summary>
</details>
<details class="toggle-green">
<summary>
<span class="switch-label">Green</span>
<div class="color-button"></div>
</summary>
</details>
</div>
</div>
</details>
</div>
|
To add a color to the list there are a few things we need to do
๐ Rocketโs Color Toggle Guide
This guide explains how to add new colors and wire them to different parts of your page. Weโll use White as the example.
1. Add the Toggle to the Dropdown
Insert this into your HTML toggle list:
๐ Place it under an existing </details> block, in whatever order you want your colors to appear.
2. Add the Circle Button
This tells the CSS what the small circle looks like when White is active:
๐ Put this in the circle button section of your CSS (between lines 122โ136 in your template).
3. Wiring the Theme Styles
Now we connect the toggle to different visual effects. Each color gets its own wiring section.
Example: White Theme Wiring
๐ Notice the difference:
- The first three parts are the main wiring (borders, hover text color, header glow).
- The last part is an extra wiring rule โ it targets
.css-nlxhw4specifically and applies a white text-shadow.
4. Adding More Targets
To wire more elements, just copy the extra wiring format:
Replace .your-target-here with the class, ID, or element you want to style.
5. Multiple Targets in One Rule
If you want the same style applied to multiple elements, separate them with a comma ,.
Example: applying the same white text-shadow to both .css-nlxhw4 and .css-abc123:
๐ How it works:
- Each selector before the comma is treated individually.
- Both
.css-nlxhw4and.css-abc123will get the same text-shadow when White is active. - This keeps your CSS clean instead of duplicating the same block multiple times.
