# Modernizing the Foundation theme

**URL:** https://meta.discourse.org/t/modernizing-the-foundation-theme/395331
**Category:** Announcements
**Created:** [February 6, 2026, 5:52pm UTC](https://meta.discourse.org/t/modernizing-the-foundation-theme/395331 "2026-02-06T17:52:14Z")
**Posts on this page:** 20
**Page:** 4

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [April 16, 2026, 2:50pm UTC](https://meta.discourse.org/t/modernizing-the-foundation-theme/395331/68 "2026-04-16T14:50:48Z")

</div>

How it looks on Foundation and Meta Branded:

![image](https://global.discourse-cdn.com/meta/original/4X/2/f/1/2f1d17a09764fa1e14fce22a7a07081dac8662b3.png) ![image](https://global.discourse-cdn.com/meta/original/4X/e/2/9/e296452dd5ca41170aaa92e35c6e2b5db0cfbdd6.png)

The number and arrow containers should be the same size.

---

<div class="post-metadata">

### Author: ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [April 16, 2026, 3:07pm UTC](https://meta.discourse.org/t/modernizing-the-foundation-theme/395331/69 "2026-04-16T15:07:22Z")

</div>

I do not see this on mobile. I assume this is #desktop?

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [April 16, 2026, 3:16pm UTC](https://meta.discourse.org/t/modernizing-the-foundation-theme/395331/70 "2026-04-16T15:16:05Z")

</div>

Thanks, I dug more: It’s because of the new foundation theme, which is also used on Meta Branded, and happens both on desktop and mobile.

I’m not sure if it should be moved to [Modernizing the Foundation theme](https://meta.discourse.org/t/modernizing-the-foundation-theme/395331) or not.

---

<div class="post-metadata">

### Author: ![chapoi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapoi/32/537252_2.png) [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [April 16, 2026, 3:41pm UTC](https://meta.discourse.org/t/modernizing-the-foundation-theme/395331/71 "2026-04-16T15:41:09Z")

</div>

Made the exec decision to do so 😉

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [April 16, 2026, 7:08pm UTC](https://meta.discourse.org/t/modernizing-the-foundation-theme/395331/72 "2026-04-16T19:08:07Z")

</div>

This has been fixed & will be updated soon

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [April 16, 2026, 9:51pm UTC](https://meta.discourse.org/t/modernizing-the-foundation-theme/395331/73 "2026-04-16T21:51:45Z")

</div>

On dark theme, the `active` state on certain buttons (mostly visible with keyboard navigation, only transient when using mouse/touch) is dark purple on dark background and harsh to the eyes:  
 ![image](https://global.discourse-cdn.com/meta/original/4X/d/c/4/dc44910abc696b1ea6b542b3803b57ac0f253a32.png)

Red `hover` state as well:  
 ![image](https://global.discourse-cdn.com/meta/original/4X/0/6/e/06e13ad5e62249b0666c85196cbf5f19b0724e99.png)

But the worst is the “danger” button with a red background and dark text:  
 ![image](https://global.discourse-cdn.com/meta/original/4X/f/1/a/f1a2aa6adbdcc8db8f0054cab36be1f8f431ed98.png)

Perhaps simply tweaking the red value/brightness would fix the 2nd and 3rd points.

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [April 17, 2026, 2:02pm UTC](https://meta.discourse.org/t/modernizing-the-foundation-theme/395331/74 "2026-04-17T14:02:44Z")

</div>

Is this only on this meta theme?

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [April 17, 2026, 3:16pm UTC](https://meta.discourse.org/t/modernizing-the-foundation-theme/395331/75 "2026-04-17T15:16:02Z")

</div>

Yeah. On foundation:

active  
 ![image](https://global.discourse-cdn.com/meta/original/4X/0/0/9/009130144c6b6e725e96563ad60ff9138c6c31b0.png)

hover  
 ![image](https://global.discourse-cdn.com/meta/original/4X/b/e/6/be684aca052f77166aa731b03897f858e67dc27f.png)

danger  
 ![image](https://global.discourse-cdn.com/meta/original/4X/a/4/0/a405bc20f7140914d8ec3171e4af0c24f627f782.png)

Better contrasts than Meta Branded.

---

<div class="post-metadata">

### Author: ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [May 1, 2026, 4:47pm UTC](https://meta.discourse.org/t/modernizing-the-foundation-theme/395331/76 "2026-05-01T16:47:11Z")

</div>

> [@Moin](#):
>
> It seems some icon colors don’t work well with the wcag palette.  
> ![image](https://global.discourse-cdn.com/meta/original/4X/8/e/b/8eb2d0b87de9391c14c7a1681793545f4b59e9ba.png)

This is still the case:

 ![image](https://global.discourse-cdn.com/meta/original/4X/9/6/6/966be39b4a29d551122a1e64269535ac601ff9fe.png)

Are there any plans to adjust the borders of the buttons when using the WCAG color palette? I currently find the thin, very light border difficult to see, so in some places it looks to me like there are just icons floating around rather than buttons. This wasn’t a problem with the previous solid-gray buttons.

I also felt similar when the shadow below the header was removed and when the colored line at the top of the composer was removed. But while those are clear zones of my screen, the buttons are at different places, which makes the fact that they are difficult to tell apart from their surroundings more difficult for me.

Text fields in the settings, for example, have a darker outline:

 ![image](https://global.discourse-cdn.com/meta/original/4X/c/7/7/c7726b7e82b1330e20a57e8918b683d618c1b5a8.png)

I also noticed that this seems to break the styling of the category security:

 ![image](https://global.discourse-cdn.com/meta/original/4X/0/c/e/0ce0a6e7552f768606f60634593c892f9d3047d8.png) ![image](https://global.discourse-cdn.com/meta/original/4X/9/c/a/9ca7fd29b934b2864e4fbff6b6bdbf388f1adc2f.png)

The group selection for the upcoming change also looks unusually large in the new design:

 ![image](https://global.discourse-cdn.com/meta/original/4X/0/5/6/05635263dd27c9f94004c9065036b7c43bbe017f.png)  
 ![image](https://global.discourse-cdn.com/meta/original/4X/6/5/5/655f2775b57ebed6808ab28ef5f7778a220b0003.png)

---

<div class="post-metadata">

### Author: ![sk-or-v1-contents](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sk-or-v1-contents/32/547175_2.png) [@sk-or-v1-contents](https://meta.discourse.org/u/sk-or-v1-contents)
#### Post date: [May 2, 2026, 8:19am UTC](https://meta.discourse.org/t/modernizing-the-foundation-theme/395331/77 "2026-05-02T08:19:55Z")

</div>

I think the navbar text size is too small on mobile (less legible than it looks like in the screenshot as it’s at the top of the page). The Suggested/Related font is too small too.

 ![New font sizes too small](https://global.discourse-cdn.com/meta/original/4X/0/e/7/0e7b4dd078d977613e3629adf9e1103ef740b6c4.jpeg)

Old font sizes are good:

 ![Old font sizes](https://global.discourse-cdn.com/meta/original/4X/a/5/0/a50f541dbec1c75e081c4fb566cfe5e2f57320d4.jpeg)

See also

> [@Theme font size gets smaller due to hosted instance updates?](https://meta.discourse.org/t/theme-font-size-gets-smaller-due-to-hosted-instance-updates/402055):
>
> About a month ago I noticed the font of many Discourse sites got smaller on mobile. Haven’t had the time to write this until now. This meta site doesn’t have this problem, but it can be observed on [users.rust-lang.org](http://users.rust-lang.org) and [discuss.python.org](http://discuss.python.org). But [talk.commonmark.org](http://talk.commonmark.org) and OpenAI site ([community.openai.com](http://community.openai.com)) don’t have this problem. I guess the problem is because of a Discourse hosted instance update and the CommonMark forum didn’t update and OpenAI used a theme that doesn’t have the problem. The na…

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [May 2, 2026, 12:43pm UTC](https://meta.discourse.org/t/modernizing-the-foundation-theme/395331/78 "2026-05-02T12:43:11Z")

</div>

i think this is clearly a matter of taste because i think exactly the opposite of the old vs new. the old foundation fonts and buttons feel too chunky, while the new foundation sleeker elements look much nicer in the overall layout comparitively. i have no complaints about functional usage on desktop or mobile, nor have any of my users since i enabled it. 🤷🏻‍♀️

i think you could give feedback to your admins as well and perhaps they could create another theme with the old changes? enlarging those fonts you indicated isn’t difficult with css. or you could use a stylus type scripting browser extension to add your own mods (i do that with all the discourse sites i visit, including this one).

edit:

for example, something like these:

topic header text

```scss
.extra-info-wrapper .topic-link {
    font-size: larger;
}

```

related/suggest topic footer buttons [see also below](https://meta.discourse.org/t/modernizing-the-foundation-theme/395331/82)

```scss
.more-topics__container .nav {
    font-size: larger;
}

```

---

<div class="post-metadata">

### Author: ![sk-or-v1-contents](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sk-or-v1-contents/32/547175_2.png) [@sk-or-v1-contents](https://meta.discourse.org/u/sk-or-v1-contents)
#### Post date: [May 3, 2026, 12:54am UTC](https://meta.discourse.org/t/modernizing-the-foundation-theme/395331/79 "2026-05-03T00:54:15Z")

</div>

Theres a small gap under the Related button

 ![Related button](https://global.discourse-cdn.com/meta/original/4X/f/4/8/f48513bd5e5f37f6cc877879e2ba064b01b0d6be.jpeg)  
 ![Suggested button](https://global.discourse-cdn.com/meta/original/4X/f/8/8/f88b973a61f19de7b60b4196634eb62d048383d2.jpeg)

Becomes more obvious if the font size is increased

Stylus

```css
.more-topics__container .nav .d-button-label {
   font-size: 150%;
}

```

 ![Related button enlarged font](https://global.discourse-cdn.com/meta/original/4X/6/3/3/633bf246e614ce9f22e58e9500c3d3a0be3f8cc7.jpeg)  
 ![Suggested button enlarged font](https://global.discourse-cdn.com/meta/original/4X/f/b/8/fb87deb507fa84355f7bdb437f36bca7c353978a.jpeg)

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [May 3, 2026, 1:26am UTC](https://meta.discourse.org/t/modernizing-the-foundation-theme/395331/80 "2026-05-03T01:26:52Z")

</div>

yea that is why i said “something like”, because they may have some other things going on with their theme. i was using meta, not Rust forum. i’ll have a look for you because i am nice. but i have to wait until there is some new and unread items to get the full footer header. i assume from the screenshot with avatar that that is in mobile viewport?

---

<div class="post-metadata">

### Author: ![sk-or-v1-contents](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sk-or-v1-contents/32/547175_2.png) [@sk-or-v1-contents](https://meta.discourse.org/u/sk-or-v1-contents)
#### Post date: [May 3, 2026, 3:12am UTC](https://meta.discourse.org/t/modernizing-the-foundation-theme/395331/81 "2026-05-03T03:12:11Z")

</div>

The quirk is visible here

 ![Screenshot](https://global.discourse-cdn.com/meta/original/4X/6/c/8/6c8b2c7f5678eb029d77caad2351f0b534a4bbaf.jpeg)

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [May 3, 2026, 3:12am UTC](https://meta.discourse.org/t/modernizing-the-foundation-theme/395331/82 "2026-05-03T03:12:47Z")

</div>

OK this looks like a UX bug with the new foundation theme and the injected AI related topic button. the button classes are a bit different:

![image](https://global.discourse-cdn.com/meta/original/4X/3/7/3/373e36ef1c63c2c438a0613ffe6b99f76ab6de83.png)

 ![Screenshot from 2026-05-02 18-53-50](https://global.discourse-cdn.com/meta/original/4X/6/e/4/6e4c5a422d4f85e0f8ed598521191d86d60f1993.png)

but this will fix it a bit - can patch it with some padding and line-height adjustment:

```scss
.more-topics__container .nav li .btn {
  padding: .5em;
  line-height: 0;
}

```

desktop:

![Screenshot from 2026-05-02 20-18-28](https://global.discourse-cdn.com/meta/original/4X/9/f/b/9fb05b3816579ee0902296bfac4ce2b2a9ea18c2.png)

![Screenshot from 2026-05-02 20-18-34](https://global.discourse-cdn.com/meta/original/4X/6/0/a/60aee5ed8eacb56345e06f791f56b82b57a98a4c.png)

mobile:

![Screenshot from 2026-05-02 20-22-43](https://global.discourse-cdn.com/meta/original/4X/f/a/c/fac54911e535ed825b70c5bdcce212c823614735.png)

![Screenshot from 2026-05-02 20-22-47](https://global.discourse-cdn.com/meta/original/4X/1/f/1/1f17d863cc6ec8793f65a2f9bcd591305c1e7ea7.png)

---

<div class="post-metadata">

### Author: ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [May 14, 2026, 3:41pm UTC](https://meta.discourse.org/t/modernizing-the-foundation-theme/395331/83 "2026-05-14T15:41:49Z")

</div>

For the pinned state menu, the options overlap severely:

 ![Screenshot20260514233946Chrome](https://global.discourse-cdn.com/meta/original/4X/4/4/7/4470776d04afcc58a5e4a8d94ca318356602d766.jpeg)

---

<div class="post-metadata">

### Author: ![sniper756](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sniper756/32/545002_2.png) [@sniper756](https://meta.discourse.org/u/sniper756)
#### Post date: [May 18, 2026, 7:23am UTC](https://meta.discourse.org/t/modernizing-the-foundation-theme/395331/84 "2026-05-18T07:23:42Z")

</div>

[Opening the Manage Tag Groups page in a mobile browser displays layout issues - Contributions / User Experience - Discourse Meta](https://meta.discourse.org/t/topic/403180)

---

<div class="post-metadata">

### Author: ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [June 2, 2026, 12:32pm UTC](https://meta.discourse.org/t/modernizing-the-foundation-theme/395331/85 "2026-06-02T12:32:34Z")

</div>

Is it still possible to opt out of this change here on Meta? I haven’t joined the group, but the change seems to be enabled for me now, which results in my barely seeing the button borders even though I am using the WCAG palette.

---

<div class="post-metadata">

### Author: ![chapoi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapoi/32/537252_2.png) [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [June 2, 2026, 1:04pm UTC](https://meta.discourse.org/t/modernizing-the-foundation-theme/395331/86 "2026-06-02T13:04:26Z")

</div>

No, it’s no longer opt-out on Meta, the group is now obsolete.

But you can keep reporting the issues you notice, as I’m sure you will, to discover what still needs to be polished.

---

<div class="post-metadata">

### Author: ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [June 2, 2026, 1:24pm UTC](https://meta.discourse.org/t/modernizing-the-foundation-theme/395331/87 "2026-06-02T13:24:08Z")

</div>

> [@chapoi](#):
>
> I’m sure you will

You are wrong. I’ll wait until the issues I’ve reported so far are fixed, so you can focus entirely on those 😉 Seriously, it doesn’t seem to make much sense to me to spend time writing down what I notice when what I wrote in February hasn’t been addressed yet. Besides, I’m sure you’ll understand that it’s not much fun to use a site where you can’t see the interface properly. It’s a shame that accessibility is such a low priority for you.

Edit: Except for the first “you,” these are not referring to chapoi personally. I’m sorry I didn’t notice this ambiguity. In German, this problem doesn’t exist because the words are different.

I’d also like to explain why I feel that WCAG has a low priority: The fact that the default theme for this forum isn’t designed to be WCAG-compliant by default and, on the contrary, actively prevents the use of the accessible color palette, leads me to conclude that this issue isn’t a high priority. A WCAG-compliant alternative could have been added, or the default theme could have been built based on a WCAG palette from the beginning.  
Similarly, with Horizon, you’ve created a default theme for all forums that includes multiple color palettes, but none of them are based on the WCAG palette.

[Previous page](https://meta.discourse.org/t/modernizing-the-foundation-theme/395331.md?page=3)

[Next page](https://meta.discourse.org/t/modernizing-the-foundation-theme/395331.md?page=5)
