Brand theming on Swyxkit

today i also implemented some nice brand color nuances to swyxkit

highlighting/selection

you can style the ::selection pseudoelement and make it work in dark mode:

  ::selection { background-color: var(--brand-accent); }
  .dark ::selection { color: #1d1d1d; }

image

image

i also put the brand color on to the nav items

image image

details/summary

  /* https://css-tricks.com/two-issues-styling-the-details-element-and-how-to-solve-them/ */
  details {
    border: 2px solid var(--brand-accent);
    padding: 0.5rem 1rem;
  }
  details > summary { 
    cursor: pointer;
  }
  
  details > summary > *:first-child {
    display: inline;
  }
  

landing page

and a lilttle pizazz on the index page

image


    Tagged in: #css #changelog

    Leave a reaction if you liked this post! 🧡
    Loading comments...

    Subscribe to the newsletter

    Get emails from me about Lorem ipsum dolor sit, amet consectetur adipisicing elit. Libero, ducimus..

    5,432 subscribers including my Mom – 123 issues

    Latest Posts

    Search and see all posts