website update

Author: one-kash

blog/2026-07-06-kashcal-theme-picker-supporter-icon.md

@@ -0,0 +1,40 @@
+---
+slug: kashcal-theme-picker-supporter-icon
+title: "Make KashCal yours: a theme picker and a supporter icon"
+authors: [kashcal]
+tags: [releases, announcements]
+keywords:
+  - kashcal release notes
+  - kashcal changelog
+  - android calendar themes
+  - dark mode calendar android
+  - custom app icon calendar android
+  - teal calendar app
+description: "KashCal 2026.07.06 adds a theme picker with a KashCal Teal palette, and a supporter app icon you can switch to from Settings. Here's what changed."
+image: /img/social/home.png
+---
+
+This release is about making KashCal yours. Two new choices, both in Settings, one for how the app looks and one for how it shows up on your home screen.
+
+{/* truncate */}
+
+## Pick your colors
+
+KashCal now has a proper theme picker. Stay on System, pin Light or Dark, or switch on **KashCal Teal**, our own palette that follows your phone's light and dark setting while keeping the brand green front and center. It runs through the whole app, contrast-checked so text stays readable on every surface, light or dark. You'll find it under [Settings, then Appearance](/docs/features/settings).
+
+## Wear your support
+
+The second choice is the icon on your home screen. If you've chipped in to keep KashCal free and ad-free ([or you'd like to](https://kashcal.onekash.org/donate)), you can now wear it: a gold **Supporter** icon with a little heart on the calendar card. Pick it under Settings, then App Icon, in whichever flavor you like. Keep the KashCal name, or go incognito with the same icon labeled simply "Calendar."
+
+Whether you're already a supporter or about to become one, here's a thank you from us.
+
+## Everything in this release
+
+- New theme picker in Settings: System, Light, Dark, or KashCal Teal
+- KashCal Teal palette follows your phone's light and dark setting and is applied app-wide, with contrast checked for readability
+- New supporter app icon: a gold card with a heart, chosen under Settings, then App Icon
+- Two supporter variants, sharing one icon: one keeps the "KashCal" name, one shows a discreet "Calendar" name on the home screen
+
+KashCal, the calendar you already love, now in your colors and wearing your badge.
+
+Supporting open source has always felt good. Now it looks good too, right there on your home screen. Not a supporter yet? [Join in](https://kashcal.onekash.org/donate). It's quicker than your coffee order.

docs/features/settings.md

@@ -23,6 +23,7 @@ Open the navigation drawer (swipe from the left edge, or tap the menu icon) and
   - **System default** follows your phone's light or dark setting and switches automatically when your phone does.
   - **Light** and **Dark** pin the app to that appearance regardless of the system setting.
   - **KashCal Teal** applies the app's teal palette, still following your phone's light or dark setting.
+- **App Icon:** choose the icon KashCal wears on your home screen. Keep the default, or switch to the **Supporter** icon, a gold card with a heart, to show you've chipped in (or [would like to](https://kashcal.onekash.org/donate)). The supporter icon comes two ways: one keeps the KashCal name, and one shows a discreet **Calendar** name instead. Changing the icon may restart the app, and notifications always use the default icon and name.
 - **Event Emojis:** when on, KashCal shows an emoji next to an event based on its title (a cake for a birthday, a plane for a flight). Turn it off for a plainer list.
 - **Time Format:** 12-hour, 24-hour, or follow the system. The row shows a live example of the current format.
 - **Start Week On:** whether your week begins on the system default, Monday, Sunday, or Saturday. This changes every calendar grid at once.

src/pages/features/beautiful-calendar-android.mdx

@@ -66,7 +66,7 @@ Twelve curated colors in the primary grid for quick picks, plus 92 named CSS3 co
 
 **Does KashCal have a dark mode?**
 
-Yes, and it is designed dark, not inverted colors. KashCal follows your Android system light/dark setting by default.
+Yes, and it is designed dark, not inverted colors. A theme picker lets you follow your Android system light/dark setting (the default), pin Light or Dark, or switch on **KashCal Teal**, the app's own palette that still tracks light and dark with your phone.
 
 **Is KashCal free?**
 

src/pages/work-with-us.module.css

@@ -35,6 +35,17 @@
   color: var(--ifm-color-primary);
 }
 
+/* Two-audience track cards: the bold audience line is the heading. */
+.track h3 {
+  font-size: 1.3rem;
+  line-height: 1.3;
+  margin: 0 0 0.75rem;
+}
+
+.track .colLabel {
+  color: var(--ifm-color-primary);
+}
+
 .kicker {
   margin: 2rem 0 0;
   font-size: 1.2rem;

src/pages/work-with-us.tsx

@@ -25,6 +25,10 @@ const AUDIENCE = [
     title: 'Vertical SaaS with a calendar gap',
     body: 'Field service, healthcare, education, scheduling. You need a calendar feature next quarter, not three roadmaps from now.',
   },
+  {
+    title: 'Smart display & wall-calendar makers',
+    body: 'You build a family display, a fridge screen, or a digital wall calendar on Android. Bring the hardware; the calendar is done. It runs offline and syncs when it can.',
+  },
   {
     title: 'Anyone allergic to building one',
     body: 'You looked at the timeline, the hiring, and the maintenance, and decided your team’s time is better spent elsewhere. We agree.',
@@ -56,13 +60,17 @@ const GET = [
     title: 'We sweat the sync',
     body: 'iCloud tweaks a header, a CalDAV server bends a spec, and somewhere a recurring event goes sideways. We catch it so your users never feel it.',
   },
+  {
+    title: 'Runs offline, on your screen',
+    body: 'Offline-first by design, so a wall display or kiosk shows the day even when the network blinks, then syncs when it returns. Built to sit on a screen, not just a phone.',
+  },
 ];
 
 export default function WorkWithUs(): ReactNode {
   return (
     <Layout
       title="Work with us"
-      description="License KashCal and ship a calendar under your own brand. Years of engineering, ready now.">
+      description="License KashCal and ship a calendar under your own brand, or on your own hardware. Years of engineering, ready now.">
       <header className="kc-hero">
         <div className="container">
           <p className="kc-eyebrow">For teams</p>
@@ -72,8 +80,8 @@ export default function WorkWithUs(): ReactNode {
           <p className="kc-hero__lead">
             Building a polished Android calendar from scratch is a year and a half
             of engineering, design, and edge-case grinding. We have already done
-            that part. License KashCal and release it under your own brand in
-            weeks, not quarters.
+            that part. License KashCal and put it in your customers' hands, under
+            your brand or on your hardware, in weeks, not quarters.
           </p>
           <div className="kc-hero__cta">
             <Link
@@ -91,6 +99,42 @@ export default function WorkWithUs(): ReactNode {
       </header>
 
       <main>
+        {/* Two audiences */}
+        <section className="kc-section">
+          <div className="container">
+            <div className="kc-section__head">
+              <p className="kc-eyebrow">Two ways in</p>
+              <Heading as="h2">You bring the audience. We bring the calendar.</Heading>
+            </div>
+            <div className={styles.compare}>
+              <div className={`${styles.col} ${styles.track}`}>
+                <div className={styles.colLabel}>Software</div>
+                <Heading as="h3">
+                  <strong>A calendar provider who needs an Android app.</strong>
+                </Heading>
+                <p>
+                  You sell calendar storage, sync, or a productivity suite, and
+                  your customers keep asking for a native Android client that looks
+                  like yours. Ship KashCal under your brand instead of pointing
+                  them at a generic CalDAV picker.
+                </p>
+              </div>
+              <div className={`${styles.col} ${styles.track}`}>
+                <div className={styles.colLabel}>Hardware</div>
+                <Heading as="h3">
+                  <strong>A hardware maker who needs software.</strong>
+                </Heading>
+                <p>
+                  You build the device, a wall calendar, a family display, a
+                  kitchen screen, and you do not want to also become a software
+                  company. You bring the hardware, we bring the calendar. It runs
+                  offline out of the box and syncs when it can.
+                </p>
+              </div>
+            </div>
+          </div>
+        </section>
+
         {/* Build vs. buy */}
         <section className="kc-section">
           <div className="container">

src/theme/DocCard/Description/index.tsx

@@ -9,7 +9,6 @@ export default function DocCardDescription({description}: Props): ReactNode {
   return (
     <p
       className={clsx(
-        'text--truncate',
         ThemeClassNames.docs.docCard.description,
         styles.cardDescription,
       )}

src/theme/DocCard/Description/styles.module.css

@@ -1,3 +1,23 @@
 .cardDescription {
   font-size: 0.8rem;
+  line-height: 1.5;
+  /* Let the description wrap instead of truncating to one line with an ellipsis.
+     Clamp to a few lines so an unusually long entry can't ruin the grid, but on a
+     phone the full short description shows. */
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  overflow: hidden;
+}
+
+/* On phones the cards stack in one column, so ragged heights don't matter.
+   Drop the clamp entirely there so nothing is ever cut off. */
+@media (max-width: 768px) {
+  .cardDescription {
+    -webkit-line-clamp: unset;
+    line-clamp: unset;
+    display: block;
+    overflow: visible;
+  }
 }