shiran/discourse_theme_ran
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UX: Dark mode changes to move toward a base of accent-color (#23)

Browse Source
This commit is contained in:
Jordan Vidrine
2025-03-06 20:30:07 -06:00
committed by GitHub
parent 9a8a9d4ad3
commit 9381e56c47
8 changed files with 47 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
common/color_definitions.scss
-6
View File
@@ -1,6 +0,0 @@
$accent-color: dark-light-choose(#3c41c3, #6e4bbc);
:root {
--accent-color: #{$accent-color};
--background-color: #f5f8ff;
}
scss/box-view.scss
+5 -7
View File
@@ -50,7 +50,7 @@
position: fixed;
width: var(--d-border-radius-large);
height: var(--d-border-radius-large);
background-color: var(--tertiary-50);
background-color: var(--background-color);
z-index: 399;
-webkit-mask: radial-gradient(
circle at var(--d-border-radius-large) var(--d-border-radius-large),
@@ -79,18 +79,16 @@
&__bottom-right {
transform: rotate(180deg);
bottom: var(--d-border-radius-large);
@container content-width (width > 1px) {
left: calc(var(--right-distance) - var(--d-border-radius-large));
@media screen and (max-width: 768px) {
bottom: calc(var(--d-border-radius-large) * 2);
}
left: calc(var(--right-distance) - var(--d-border-radius-large));
@media screen and (max-width: 768px) {
bottom: calc(var(--d-border-radius-large) * 2);
}
}
&__bottom-bar {
position: fixed;
width: 100%;
z-index: 399;
background-color: var(--tertiary-50);
background-color: var(--background-color);
bottom: 0;
left: var(--left-distance);
height: var(--d-border-radius-large);
scss/buttons.scss
+10 -8
View File
@@ -30,14 +30,16 @@
var(--accent-color);
}
svg {
color: var(--secondary);
color: var(--accent-text-color);
}
}
.discourse-no-touch .btn-default.sidebar-new-topic-button {
.discourse-no-touch .btn-default.sidebar-new-topic-button,
.discourse-no-touch .interface-color-selector-content .btn-default {
border: none;
&:hover {
border: none;
box-shadow: none;
}
}
@@ -57,13 +59,13 @@
.d-icon {
color: var(--accent-color);
}
&:hover {
.discourse-no-touch & {
border: 1px solid var(--accent-color);
box-shadow: 0px 0px 8px 2px
oklch(from (var(--accent-color)) calc(l * 2) calc(c * 0.125) h);
box-shadow: 0px 0px 8px 2px var(--button-box-shadow);
background: var(--secondary);
color: var(--accent-color);
color: var(--primary);
.d-icon {
color: var(--accent-color);
}
@@ -74,7 +76,7 @@
background: var(--secondary);
color: var(--accent-color);
box-shadow: 0px 0px 0px 2px var(--secondary),
0px 0px 0px 4px var(--accent-color);
0px 0px 0px 4px var(--button-box-shadow);
.d-icon {
color: var(--accent-color);
}
@@ -108,7 +110,7 @@
rgba(255, 255, 255, 0) 100%
),
var(--accent-color);
box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.15);
box-shadow: 0px 0px 6px 1px var(--button-box-shadow);
}
}
&:focus-visible {
@@ -120,7 +122,7 @@
),
var(--accent-color);
box-shadow: 0px 0px 0px 2px var(--secondary),
0px 0px 0px 4px var(--accent-color);
0px 0px 0px 4px var(--button-box-shadow);
}
}
&:active {
scss/chat.scss
+1 -8
View File
@@ -1,10 +1,6 @@
.full-page-chat.full-page-chat-sidebar-enabled {
border-top-left-radius: var(--d-border-radius-large);
border-top-right-radius: var(--d-border-radius-large);
box-shadow: 0px 0px 0px 2px
oklch(from var(--accent-color) calc(l * 2) calc(c * 0.125) h),
0px 0px 8px 2px
oklch(from var(--accent-color) calc(l * 2) calc(c * 0.125) h);
border: none;
}
@@ -20,10 +16,7 @@ body.has-full-page-chat {
}
.chat-drawer .chat-drawer-container {
box-shadow: 0px 0px 0px 2px
oklch(from var(--accent-color) calc(l * 2) calc(c * 0.125) h),
0px 0px 8px 2px
oklch(from var(--accent-color) calc(l * 2) calc(c * 0.125) h);
box-shadow: 0px 0px 0px 2px var(--d-chat-border);
border: none;
}
scss/nav-pills.scss
+1 -2
View File
@@ -20,8 +20,7 @@
// font-size: var(--font-up-1-rem);
&:hover {
border: 1px solid var(--accent-color);
box-shadow: 0px 0px 8px 2px
oklch(from (var(--accent-color)) calc(l * 2) calc(c * 0.125) h);
box-shadow: 0px 0px 8px 2px var(--button-box-shadow);
}
}
.select-kit.combo-box.category-drop.has-selection
scss/search-banner.scss
+1 -2
View File
@@ -7,7 +7,6 @@
border-bottom: 1px solid var(--primary-300);
padding: 1.5em 0 2.5em;
margin-bottom: 0;
--search-color: var(--tertiary-medium);
@media screen and (max-width: 900px) {
padding-bottom: 1em;
}
@@ -19,7 +18,7 @@
align-self: center;
margin: 0;
font-weight: 400;
color: var(--tertiary);
color: var(--search-banner-text-color);
@media screen and (max-width: 1028px) {
font-size: var(--font-up-4);
grid-column: 1/-1;
scss/topic-cards.scss
+1 -3
View File
@@ -103,7 +103,6 @@ body.user-messages-page .topic-list-item {
border: 1px solid var(--primary-300);
display: grid;
grid-template-columns: 44px min-content min-content auto min-content min-content min-content;
grid-template-rows: 22px minmax(22px, auto);
grid-template-areas:
"avatar author status status . . activity"
@@ -360,8 +359,7 @@ body.user-messages-page .topic-list-item {
.topic-list-item {
background: var(--d-content-background);
box-shadow: 0px 0px 26px 1px
light-dark(hsl(224 61% 96% / 1), hsl(224 61% 96% / 0.1));
box-shadow: 0px 0px 26px 1px var(--topic-card-shadow);
&:hover {
border: 1px solid var(--accent-color);
background: var(--d-content-background);
scss/variables.scss
+28 -3
View File
@@ -1,13 +1,38 @@
:root {
color-scheme: light dark;
--accent-color: #393edb;
--background-color: light-dark(#f5f8ff, #1b1c1e);
--search-color: light-dark(
oklch(from var(--accent-color) calc(l * 0.65) calc(c * 0.65) h),
oklch(from var(--accent-color) calc(l * 1.5) calc(c * 2) h)
);
--search-banner-text-color: light-dark(
oklch(from var(--accent-color) calc(l * 0.65) calc(c * 0.65) h),
oklch(from var(--accent-color) calc(l * 1.85) calc(c * 2) h)
);
--topic-card-shadow: light-dark(
oklch(from var(--accent-color) calc(l * 2) calc(c * 0.1) h / 0.5),
oklch(from var(--accent-color) calc(l * 0.2) calc(c * 0.01) h / 0.25)
);
--button-box-shadow: light-dark(
oklch(from var(--accent-color) calc(l * 2) calc(c * 0.125) h),
oklch(from var(--accent-color) calc(l * 0.75) calc(c * 0.5) h)
);
--d-selected: light-dark(
oklch(from var(--accent-color) calc(l * 1.9) calc(c * 2) h / 0.3),
oklch(from var(--accent-color) calc(l * 0.65) calc(c * 0.65) h / 0.75)
);
--d-chat-border: light-dark(
oklch(from var(--accent-color) calc(l * 1.5) calc(c * 0.25) h),
oklch(from var(--accent-color) calc(l * 0.25) calc(c * 0.25) h)
);
--d-max-width: 1000px;
--d-border-radius-large: 20px;
--d-border-radius: 8px;
--d-input-border-radius: 6px;
--accent-text-color: var(--secondary);
--accent-text-color: light-dark(#ffffff, #0f1024);
--d-content-background: var(--secondary);
--d-nav-color--active: var(--accent-color);
--d-sidebar-background: var(--tertiary-50);
--d-sidebar-background: var(--background-color);
--d-sidebar-footer-fade: rgba(var(--tertiary-50-rgb), 1);
--d-sidebar-link-color: var(--primary);
--d-sidebar-highlight-color: var(--primary);