feat: export complete Discourse themes ecosystem (16 themes, SCSS, JS components and color schemes)

This commit is contained in:
eldov
2026-08-30 18:07:57 +02:00
parent 0d76aaa622
commit 3a411c2643
258 changed files with 16878 additions and 0 deletions
@@ -0,0 +1,79 @@
{
"name": "Material Design Theme",
"about_url": "https://meta.discourse.org/t/material-design-stock-theme/47142",
"license_url": "https://github.com/discourse/material-design-stock-theme/blob/master/LICENSE.txt",
"color_schemes": {
"Material Teal/Amber": {
"primary": "212121",
"secondary": "fafafa",
"tertiary": "ffa000",
"quaternary": "00796b",
"header_background": "00796b",
"header_primary": "ffffff",
"highlight": "ffff8d",
"danger": "ff5722",
"success": "4caf50",
"love": "fa6c8d",
"selected": "fff1d9"
},
"Material Red/Blue": {
"primary": "212121",
"secondary": "fafafa",
"tertiary": "448aff",
"quaternary": "d32f2f",
"header_background": "d32f2f",
"header_primary": "ffffff",
"highlight": "ffff8d",
"danger": "ff6d00",
"success": "4caf50",
"love": "fa6c8d",
"selected": "e3edff"
},
"Material Blue/Red": {
"primary": "212121",
"secondary": "fafafa",
"tertiary": "ff5252",
"quaternary": "2196f3",
"header_background": "1976f2",
"header_primary": "ffffff",
"highlight": "ffff8d",
"danger": "ff6d00",
"success": "4caf50",
"love": "fa6c8d",
"selected": "ffe5e5"
},
"Material Indigo/Orange": {
"primary": "212121",
"secondary": "fafafa",
"tertiary": "ff5722",
"quaternary": "3f51b5",
"header_background": "303f9f",
"header_primary": "ffffff",
"highlight": "ffeb3b",
"danger": "f44336",
"success": "4caf50",
"love": "fa6c8d",
"selected": "ffe6de"
},
"Material Dark": {
"primary": "fafafa",
"secondary": "212121",
"tertiary": "00bcd4",
"quaternary": "00bcd4",
"header_background": "000000",
"header_primary": "ffffff",
"highlight": "fafafa",
"danger": "e45735",
"success": "009900",
"love": "fa6c8d",
"selected": "00424a",
"hover": "2d2d2d"
}
},
"assets": {
"roboto": "assets/Roboto-Regular.ttf",
"roboto-bold": "assets/Roboto-Bold.ttf",
"roboto-italic": "assets/Roboto-Italic.ttf"
},
"screenshots": ["screenshots/light.png", "screenshots/dark.png"]
}
@@ -0,0 +1,5 @@
@use "sass:color";
:root {
--material-lighter-secondary: color.adjust($secondary, $lightness: 10%);
}
@@ -0,0 +1 @@
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
@@ -0,0 +1,200 @@
:root {
--d-header-icon-background--hover: var(--header_primary-low);
}
@font-face {
font-family: Roboto;
src: url($roboto);
}
@font-face {
font-family: Roboto;
src: url($roboto-bold);
font-weight: bold;
}
@font-face {
font-family: Roboto;
src: url($roboto-italic);
font-style: italic;
}
html {
font-family: Roboto, sans-serif;
font-weight: 400;
}
body input,
body button,
body select,
body textarea {
font-family: Roboto, Helvetica, Arial, sans-serif;
}
@mixin boxShadow {
// Matched from https://material.io/components/cards/
box-shadow:
0 2px 1px -1px rgb(0, 0, 0, 0.2),
0 1px 1px 0 rgb(0, 0, 0, 0.14),
0 1px 3px 0 rgb(0, 0, 0, 0.12);
}
@mixin buttonShadow {
// Matched from https://material.io/components/buttons/
box-shadow:
0 3px 1px -2px rgb(0, 0, 0, 0.2),
0 2px 2px 0 rgb(0, 0, 0, 0.14),
0 1px 5px 0 rgb(0, 0, 0, 0.12);
}
@import "sidebar";
// raise and round buttons
.btn-default,
.btn-primary,
.d-combo-button {
border-radius: 4px;
@include boxShadow;
&.btn-flat.close {
box-shadow: none;
}
}
// remove shadow from a few buttons
.d-editor-button-bar .btn.btn-icon,
.bulk-select-all,
.bulk-clear-all,
.period-chooser-header,
.topic-map .btn.no-text,
.badge-section .btn,
#revision .btn,
#new-account-link,
#login-link,
.dropdown-menu li .btn {
border-radius: 0;
box-shadow: none;
}
// Topic adjustments
.small-action {
border-top: none;
box-sizing: border-box;
margin-block: 1em 0.5em;
border: none;
border-radius: 4px;
box-shadow:
0 2px 5px 0 rgb(0, 0, 0, 0.16),
0 0 0 0 rgb(0, 0, 0, 0.12);
max-width: 754px;
padding-left: 20px;
.desktop-view & {
margin-left: calc(var(--topic-avatar-width) + 10px);
}
button {
margin-left: 1em;
background-color: var(--material-lighter-secondary);
}
.topic-avatar {
display: none;
}
.small-action-desc {
border: none;
}
}
.read-state {
right: 1em;
}
.gap {
margin-top: 1em;
padding-bottom: 0;
}
.post-notice {
border: none;
background: transparent;
.desktop-view & {
margin-left: 50px;
margin-top: 0.75em;
}
}
.popup-menu .btn {
box-shadow: none;
}
// Personal messages
.archetype-private_message {
.topic-body {
box-shadow: none;
.cooked {
@include boxShadow;
}
}
}
// Admin
.admin-controls .nav-pills > li a.active {
background: transparent;
}
// Chat
body.has-sidebar-page.has-full-page-chat #main-outlet-wrapper {
gap: 0 2em;
}
.has-full-page-chat:not(.discourse-sidebar) .full-page-chat {
border: none;
}
.chat-channel-card {
background: var(--primary-very-low);
border: 1px solid;
border-left: 5px solid;
border-top-color: var(--primary-low) !important;
border-bottom-color: var(--primary-low) !important;
border-right-color: var(--primary-low) !important;
}
#main-outlet .topic-map {
padding: 10px;
margin-top: 0.75em;
border: none;
border-radius: 4px;
box-shadow:
0 2px 5px 0 rgb(0, 0, 0, 0.16),
0 0 0 0 rgb(0, 0, 0, 0.12);
.desktop-view & {
padding: 15px 30px;
max-width: 752px;
margin-left: calc(var(--topic-avatar-width) + 10px);
}
}
.topic-timer-info {
border: none;
}
.extra-info-wrapper {
.badge-category__wrapper .d-icon,
.title-wrapper .topic-statuses .d-icon,
.assigned-to .d-icon {
color: var(--secondary);
}
}
.topic-voting-menu-trigger {
// overrides some very specific button styles
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
@@ -0,0 +1,334 @@
@use "sass:color";
@import "common/foundation/variables";
@mixin boxShadow {
box-shadow:
0 2px 5px 0 rgb(0, 0, 0, 0.16),
0 0 0 0 rgb(0, 0, 0, 0.12);
}
@mixin buttonShadow {
box-shadow:
0 0 4px rgb(0, 0, 0, 0.14),
0 4px 8px rgb(0, 0, 0, 0.28);
}
@mixin buttonTransition {
transition:
right 0.5s,
bottom 0.5s,
border-radius 0.5s,
text-indent 0.2s,
visibility 1s,
width 0.2s ease,
height 0.5s ease 0.4s,
color 0.5s,
background-color 2s,
transform 0.5s;
}
// make header icons semi-translucent
.d-header-icons {
.d-icon {
color: var(--tertiary);
}
}
// add shadow behind the list of topics on right in Category and Latest View
// add shadow behind list of categories on left in Category and Latest View
// add shadow behind topics in Latest view
.category-list,
.topic-list,
.latest-topic-list {
@include boxShadow;
background-color: var(--material-lighter-secondary);
}
.column {
align-self: start;
}
// fix color of user profile navigation icons
.user-main .nav-pills {
a.active i {
color: var(--primary);
}
a:hover:not(.active) i {
color: var(--quaternary);
}
}
// create conversation cards
.topic-body {
@include boxShadow;
background-color: var(--material-lighter-secondary);
margin-top: 10px;
border-radius: 4px;
padding: 15px 20px 0 20px;
}
// more space for avatars
.topic-avatar {
border-top: 0;
padding-right: 10px;
.avatar-flair {
right: 4px;
}
}
// remove stray border from bottom of last post
.topic-status-info {
border-top: 0;
}
// improve format of embedded posts
.embedded-posts {
border: none;
.topic-avatar {
padding-left: 0;
}
&.top {
padding-left: 2em;
.row .topic-avatar,
.row .topic-body {
border: none;
}
.collapse-down {
transform: translate(-120%, 62%);
}
}
}
.embedded-posts.top.topic-body {
box-shadow: none;
background-color: var(--secondary);
}
// darken color, remove shadow and border when pressed
.btn:active {
background-color: rgb(0, 0, 0, 0.4);
box-shadow: none;
}
// New Topic Fab
.d-combo-button:has(#create-topic) {
display: flex;
align-items: center;
justify-content: center;
@include buttonShadow;
@include buttonTransition;
margin: 0;
height: 63px;
width: 190px;
border-radius: 40px;
position: fixed;
bottom: 30px;
right: 50px;
z-index: z("composer", "content") - 1;
background-color: var(--tertiary);
color: var(--secondary);
white-space: nowrap;
overflow: hidden;
.d-button-label {
color: var(--secondary);
}
button {
background: transparent;
box-shadow: none;
height: 100%;
}
.topic-drafts-menu-trigger {
border-left: 1px solid var(--secondary);
padding-left: 1em;
}
.chat-drawer-active & {
z-index: z("chat-drawer") - 1;
bottom: 60px;
}
@media screen and (width <= 1520px) {
body:has(#reply-control.draft.show-preview) & {
bottom: 60px;
}
}
.d-icon {
margin: 0;
color: var(--secondary);
}
.d-button-label {
display: inline-block;
transition: all 0.3s;
margin: 0 0.25em;
}
}
#create-topic.btn-default .fa-plus {
color: var(--secondary);
}
.timeline-container .topic-timeline .timeline-handle {
background-color: var(--tertiary-medium);
}
// Reply Fab
.timeline-footer-controls {
position: relative;
}
.widget-button.btn.create {
border-radius: 50%;
position: absolute;
top: 55px;
left: -10px;
background-color: var(--tertiary);
overflow: hidden;
width: 60px;
height: 60px;
@include buttonShadow;
@include buttonTransition;
.d-icon {
color: var(--secondary);
}
}
// Increase size of reply icon
.widget-button.btn.create .fa-reply {
color: var(--secondary);
font-size: 20px;
}
// Proper spacing for iPad portrait
@media only screen and (width >= 768px) and (width <= 1250px) {
.timeline-container {
margin-left: 820px;
}
.topic-admin-popup-menu {
left: -40% !important;
}
}
// Properly space notifications button
.widget-button.btn.notifications-dropdown {
right: 4px;
position: relative;
border-radius: 40px;
width: 30px;
padding: 6px;
}
// cards for search results
.fps-result {
@include boxShadow;
background-color: var(--material-lighter-secondary);
margin-top: 10px;
padding: 20px;
border-radius: 4px;
}
@keyframes background-fade-highlight {
0% {
background-color: color.adjust($tertiary, $lightness: 20%);
}
100% {
background-color: var(--material-lighter-secondary);
}
}
// clipped user page button shadows
.user-main .about .controls {
padding-right: 10px;
}
// RTL Overrides
.rtl {
.topic-avatar {
padding-right: initial;
padding-left: 10px;
.avatar-flair {
right: initial;
left: 4px;
}
}
.embedded-posts .topic-avatar {
padding-left: initial;
padding-right: 0;
}
#create-topic.btn-default {
right: initial;
left: 50px;
}
.widget-button.btn.create {
left: initial;
right: -10px;
}
.widget-button.btn.notifications-dropdown {
right: initial;
left: 4px;
}
.user-main .about .controls {
padding-right: initial;
padding-left: 10px;
}
}
// RTL Overrides
@media only screen and (width >= 768px) and (width <= 1250px) {
.rtl {
.timeline-container {
margin-left: initial;
margin-right: 820px;
}
.topic-admin-popup-menu {
left: initial !important;
right: -40% !important;
}
}
}
// Personal messages
.archetype-private_message {
.topic-body {
margin-left: -2em;
}
.small-action {
max-width: 758px;
}
}
// Chat
.chat-channel {
height: calc(100dvh - (var(--header-offset) + 6em));
}
#main-chat-outlet {
margin-top: 1.5em;
box-shadow:
0 2px 1px -1px rgb(0, 0, 0, 0.2),
0 1px 1px 0 rgb(0, 0, 0, 0.14),
0 1px 3px 0 rgb(0, 0, 0, 0.12);
}
@@ -0,0 +1,28 @@
.has-sidebar-page .sidebar-wrapper {
margin-top: 1.5em;
top: calc((var(--header-offset, 0) + 1.5em));
height: calc(100vh - (var(--header-offset, 0) + 3em));
}
// Sidebar toggle styling
.header-sidebar-toggle {
button {
.d-icon {
color: var(--tertiary);
box-shadow: none;
}
&:hover {
.d-icon {
color: var(--primary-med-or-secondary-med);
}
}
}
}
// Sidebar Style Overrides
.sidebar-wrapper {
@include boxShadow;
margin-top: 2.4em;
background-color: var(--material-lighter-secondary);
}
@@ -0,0 +1,81 @@
@mixin boxShadow {
box-shadow:
0 2px 5px 0 rgb(0, 0, 0, 0.16),
0 0 0 0 rgb(0, 0, 0, 0.12);
}
.list-controls .container {
#create-topic {
border-radius: 4px 0 0 4px;
}
.topic-drafts-menu-trigger {
border-radius: 0 4px 4px 0;
margin-left: -7px;
}
}
// create conversation cards
.topic-body {
@include boxShadow;
background-color: var(--material-lighter-secondary);
margin-top: 10px;
padding: 20px;
border-radius: 4px;
}
// more space for avatars
.topic-avatar {
border-top: 0;
padding-top: 20px;
padding-left: 10px;
.avatar-flair {
right: 4px;
}
}
// increase space between post meta and post content
.boxed .contents {
padding: 20px 0 0 0;
}
// remove stray border from bottom of last post
.topic-status-info {
border-top: 0;
}
.small-action {
border: none;
}
#topic-closing-info {
border: none;
}
.list-controls .nav-pills .list-control-toggle-link-trigger {
box-shadow: none;
}
// remove lines between cards
.topic-post article {
border: none;
}
// put shadow on quotes as well
aside.quote {
@include boxShadow;
}
// RTL Overrides
.rtl {
.topic-avatar {
padding-left: initial;
padding-right: 10px;
.avatar-flair {
right: initial;
left: 4px;
}
}
}
+113
View File
@@ -0,0 +1,113 @@
{
"id": 23,
"name": "Material Design Theme",
"user_selectable": true,
"color_scheme": null,
"fields_count": 13,
"files": [
{
"field_id": 504,
"target_id": 0,
"target_name": "common",
"name": "color_definitions",
"filename": "common_color_definitions.txt",
"bytes": 105
},
{
"field_id": 506,
"target_id": 0,
"target_name": "common",
"name": "head_tag",
"filename": "common_head_tag.html",
"bytes": 90
},
{
"field_id": 501,
"target_id": 0,
"target_name": "common",
"name": "roboto",
"filename": "common_roboto.txt",
"bytes": 0
},
{
"field_id": 502,
"target_id": 0,
"target_name": "common",
"name": "roboto-bold",
"filename": "common_roboto-bold.txt",
"bytes": 0
},
{
"field_id": 503,
"target_id": 0,
"target_name": "common",
"name": "roboto-italic",
"filename": "common_roboto-italic.txt",
"bytes": 0
},
{
"field_id": 692,
"target_id": 0,
"target_name": "common",
"name": "screenshot_dark",
"filename": "common_screenshot_dark.txt",
"bytes": 0
},
{
"field_id": 691,
"target_id": 0,
"target_name": "common",
"name": "screenshot_light",
"filename": "common_screenshot_light.txt",
"bytes": 0
},
{
"field_id": 505,
"target_id": 0,
"target_name": "common",
"name": "scss",
"filename": "common_scss.scss",
"bytes": 3516
},
{
"field_id": 507,
"target_id": 1,
"target_name": "desktop",
"name": "scss",
"filename": "desktop_scss.scss",
"bytes": 5890
},
{
"field_id": 509,
"target_id": 2,
"target_name": "mobile",
"name": "scss",
"filename": "mobile_scss.scss",
"bytes": 1262
},
{
"field_id": 508,
"target_id": 4,
"target_name": "translations",
"name": "en",
"filename": "translations_en.yml",
"bytes": 115
},
{
"field_id": 510,
"target_id": 5,
"target_name": "extra_scss",
"name": "sidebar",
"filename": "extra_scss_sidebar.txt",
"bytes": 552
},
{
"field_id": 693,
"target_id": 9,
"target_name": "about",
"name": "about",
"filename": "about_about.yml",
"bytes": 2256
}
]
}
@@ -0,0 +1,3 @@
en:
theme_metadata:
description: "Inspired by Material Design, this theme comes with several color palettes"