๐Ÿš€ 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

tryme

โŽ—
โœ“
<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:

โŽ—
โœ“
1
2
3
4
5
6
<details class="toggle-white">
  <summary>
    <span class="switch-label">White</span>
    <div class="color-button"></div>
  </summary>
</details>

๐Ÿ“Œ 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:

โŽ—
โœ“
1
2
3
4
/* Circle button turns white when active */ 
details.toggle-white[open] .color-button {
  background: #fff; /* white */
}

๐Ÿ“Œ 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

โŽ—
โœ“
/* =-=-=-=-=-= Button Four (White Theme) =-=-=-=-=-=-= */
body:has(.toggle-white[open]) .Rocket-details,
body:has(.toggle-white[open]) .widget-options details summary:hover {
  border-color: #fff;
}

/* Change text hover color */
body:has(.toggle-white[open]) .widget-options details summary:hover {
  color: #fff;
}

/* Glow effect on the dropdown header */
body:has(.toggle-white[open]) .Rocket-details:hover {
  box-shadow: 0 0 15px 1px #fff;
}

/* Extra wiring: add white text shadow to .css-nlxhw4 */
body:has(.toggle-white[open]) .css-nlxhw4 {
  text-shadow: 0 0 10px #fff;
}

๐Ÿ“Œ 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-nlxhw4 specifically and applies a white text-shadow.

4. Adding More Targets

To wire more elements, just copy the extra wiring format:

โŽ—
โœ“
1
2
3
body:has(.toggle-white[open]) .your-target-here {
  /* your styles here */
}

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:

โŽ—
โœ“
1
2
3
4
body:has(.toggle-white[open]) .css-nlxhw4,
body:has(.toggle-white[open]) .css-abc123 {
  text-shadow: 0 0 10px #fff;
}

๐Ÿ“Œ How it works:

  • Each selector before the comma is treated individually.
  • Both .css-nlxhw4 and .css-abc123 will get the same text-shadow when White is active.
  • This keeps your CSS clean instead of duplicating the same block multiple times.

Edit

Pub: 27 Sep 2025 10:02 UTC

Edit: 27 Sep 2025 12:39 UTC

Views: 993