add style for both dark and light themes

This commit is contained in:
lamacchinadesiderante 2024-04-25 19:41:07 +02:00
parent b82548e52e
commit 775cca3475
7 changed files with 62 additions and 19 deletions

View File

@ -1,9 +1,8 @@
@import 'colors';
@import 'spacing';
@import 'fontsize';
.messageBox {
border: 1px solid $colors_yellow;
border: 1px solid var(--primary);
text-align: center;
padding: $spacing_8;
border-radius: $spacing_4;

View File

@ -1,10 +1,9 @@
@import 'spacing';
@import 'colors';
@import 'breakpoints';
.text {
font-size: 12px;
color: $colors_yellow;
color: var(--primary);
text-decoration: none;
display: none;
@ -28,7 +27,7 @@
}
.imgPlaceholder {
background-color: $colors_yellow_focus;
background-color: var(--primary-focus);
}
.thumbnailContainer {

View File

@ -6,6 +6,11 @@
align-items: center;
margin-bottom: 16px;
input[type="checkbox"]:checked {
background-color: var(--primary);
border-color: var(--primary-focus);
}
@media only screen and (min-width: $tablet) {
display: none;
}

View File

@ -1,5 +1,4 @@
@import 'spacing';
@import 'colors';
.searchForm {
display: flex;
@ -12,19 +11,27 @@
margin-right: $spacing_16;
}
.query:hover {
border-color: var(--primary-hover);
}
.query:focus {
border-color: var(--primary-hover);
}
.submitBtn{
flex: 1;
background-color: $colors_yellow;
border-color: $colors_yellow;
color: $colors_yellow_inverse;
background-color: var(--primary);
border-color: var(--primary);
color: var(--primary-inverse);
}
.submitBtn:hover {
background-color: $colors_yellow_hover;
border-color: $colors_yellow_hover;
background-color: var(--primary-hover);
border-color: var(--primary-hover);
}
.submitBtn:focus {
background-color: $colors_yellow_focus;
border-color: $colors_yellow_focus;
background-color: var(--primary-focus);
border-color: var(--primary-focus);
}

View File

@ -1,5 +0,0 @@
// primaries
$colors_yellow: #fdd835;
$colors_yellow_hover: #fbc02d;
$colors_yellow_focus: rgba(253, 216, 53, 0.125);
$colors_yellow_inverse: rgba(0, 0, 0, 0.75);

37
src/styles/_theme.scss Normal file
View File

@ -0,0 +1,37 @@
/* light scheme (Default) */
/* Can be forced with data-theme="light" */
[data-theme="light"],
:root:not([data-theme="dark"]) {
--primary: #d81b60;
--primary-hover: #e91e63;
--primary-focus: rgba(216, 27, 96, 0.25);
--primary-inverse: #FFF;
}
/* Pink Dark scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) {
--primary: #fdd835;
--primary-hover: #fbc02d;
--primary-focus: rgba(253, 216, 53, 0.125);
--primary-inverse: rgba(0, 0, 0, 0.75);
}
}
/* Pink Dark scheme (Forced) */
/* Enabled if forced with data-theme="dark" */
[data-theme="dark"] {
--primary: #fdd835;
--primary-hover: #fbc02d;
--primary-focus: rgba(253, 216, 53, 0.125);
--primary-inverse: rgba(0, 0, 0, 0.75);
}
/* Pink (Common styles) */
:root {
--form-element-active-border-color: var(--primary);
--form-element-focus-color: var(--primary-focus);
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
}

View File

@ -1,3 +1,4 @@
@use "@picocss/pico";
@import "./font"
@import "./font";
@import "./theme";