Merge pull request #470 from SamR1/dark-theme-update

Dark theme update
This commit is contained in:
Sam 2023-12-20 13:44:05 +01:00 committed by GitHub
commit e46d7f4960
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 34 additions and 21 deletions

View File

@ -7,11 +7,11 @@
<link rel="stylesheet" href="/static/css/fork-awesome.min.css"/>
<link rel="stylesheet" href="/static/css/leaflet.css"/>
<title>FitTrackee</title>
<script type="module" crossorigin src="/static/index-SJb1QCEI.js"></script>
<script type="module" crossorigin src="/static/index-uYw8Gs-g.js"></script>
<link rel="modulepreload" crossorigin href="/static/charts-_RwsDDkL.js">
<link rel="modulepreload" crossorigin href="/static/maps-ZyuCPqes.js">
<link rel="stylesheet" crossorigin href="/static/css/maps-B7qTrBCW.css">
<link rel="stylesheet" crossorigin href="/static/css/index-86bdJKFy.css">
<link rel="stylesheet" crossorigin href="/static/css/index-RG-OKDmw.css">
</head>
<body>
<div id="app"></div>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -42,12 +42,14 @@
() => store.getters[ROOT_STORE.GETTERS.DARK_MODE]
)
const lineColors = computed(() => ({
color: darkMode.value
color:
darkMode.value !== false
? chartsColors.darkMode.line
: chartsColors.ligthMode.line,
}))
const textColors = computed(() => ({
color: darkMode.value
color:
darkMode.value !== false
? chartsColors.darkMode.text
: chartsColors.ligthMode.text,
}))
@ -117,7 +119,7 @@
? // eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
context.dataset.backgroundColor[0]
: '#666666'
: textColors.value.color
},
rotation: function (context) {
return fullStats.value && context.chart.chartArea.width < 580

View File

@ -2,7 +2,7 @@
<div class="privacy-policy-message">
<span>
<i18n-t keypath="user.LAST_PRIVACY_POLICY_TO_VALIDATE">
<router-link to="/profile/edit/privacy-policy">
<router-link to="/profile/edit/privacy-policy" class="policy-link">
{{ $t('user.REVIEW') }}
</router-link>
</i18n-t>
@ -18,5 +18,10 @@
color: var(--alert-color);
border-radius: $border-radius;
padding: $default-padding $default-padding * 2;
.policy-link {
color: var(--policy-link-color);
text-decoration: underline;
}
}
</style>

View File

@ -234,7 +234,7 @@
}
.workout-map {
background-color: var(--workout-no-map-bg-color);
background-color: var(--workout-static-map-bg-color);
height: 150px;
.no-map {
line-height: 150px;

View File

@ -118,12 +118,14 @@
() => datasets.value.coordinates
)
const lineColors = computed(() => ({
color: darkMode.value
color:
darkMode.value !== false
? chartsColors.darkMode.line
: chartsColors.ligthMode.line,
}))
const textColors = computed(() => ({
color: darkMode.value
color:
darkMode.value !== false
? chartsColors.darkMode.text
: chartsColors.ligthMode.text,
}))

View File

@ -30,6 +30,7 @@
--dropdown-background-color: var(--dark-blue);
--dropdown-border-color: var(--input-border-color);
--policy-border-color: #ccc;
--policy-link-color: var(--alert-color);
--box-shadow-color: lightgrey;
--admin-disabled-input-color: var(--dark-blue);
@ -87,13 +88,14 @@
--map-attribution-text: #e8e8e8;
--map-display-hover-attribution-text: #444444;
--map-attribution-bg-color: none;
--map-filter: invert(1) hue-rotate(180deg) brightness(0.8) contrast(0.8);
--map-filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(0.85);
--map-display-hover-filter: invert(1) hue-rotate(180deg) brightness(1.5)
contrast(0.6);
--map-layers-overlays: var(--app-color);
--map-control-bar: var(--app-color);
--no-map-filter: invert(1) brightness(1.5) contrast(0.9);
--workout-static-map-shadow-color: #d2d2d2;
--workout-static-map-bg-color: #818181;
--mountains-filter: invert(90%) sepia(19%) saturate(0%) hue-rotate(39deg)
brightness(86%) contrast(102%);

View File

@ -27,6 +27,7 @@
--dropdown-background-color: #ffffff;
--dropdown-border-color: lightgrey;
--policy-border-color: #ccc;
--policy-link-color: var(--app-a-color);
--box-shadow-color: lightgrey;
--admin-disabled-input-color: #ffffff;
@ -90,6 +91,7 @@
--map-control-bar: #bfc0ab;
--no-map-filter: initial;
--workout-static-map-shadow-color: var(--app-shadow-color);
--workout-static-map-bg-color: var(--workout-no-map-bg-color);
--mountains-filter: invert(19%) sepia(9%) saturate(2921%) hue-rotate(169deg)
brightness(85%) contrast(80%);