ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CLASSROOMIO-T-127: Theming configuration

Browse Source 
CLASSROOMIO-T-127: Add 4 themes configurations into the app

Clean up


Co-authored-by: Rotimi Best <[email protected]>


Merge-request: CLASSROOMIO-MR-51
Merged-by: Best Admin <[email protected]>
This commit is contained in:
Rotimi Best
2023-08-20 19:08:48 +00:00
committed by Space Cloud
co-authored by Rotimi Best
parent 910d9c50a9
commit f39a0cee4b
75 changed files with 709 additions and 379 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/Navigation/app.svelte
+5 -18
View File
@@ -17,7 +17,7 @@
export let navClass = '';
export let isCoursePage = false;
function toggleTheme() {
function toggleDarkMode() {
$appStore.isDark = !$appStore.isDark;
toggleBodyByTheme($appStore.isDark);
@@ -36,7 +36,9 @@
}
</script>
<nav class="{navClass} flex w-full p-2 md:px-6 bg-blue-700">
<nav
class="{navClass} flex w-full p-1 md:px-6 bg-primary-700 transition delay-150 duration-300 ease-in-out"
>
<ul class="flex w-full items-center">
<div class="flex items-center text-white">
{#if isCoursePage}
@@ -66,7 +68,7 @@
<NotificationIcon size={20} class="text-white mr-2" />
</li>
<li>
<IconButton size="small" onClick={toggleTheme}>
<IconButton size="small" onClick={toggleDarkMode}>
{#if $appStore.isDark}
<Sun size={16} class="text-white" />
{:else}
@@ -100,21 +102,6 @@
font-weight: 700;
}
/* [aria-current] {
color: var(--main-primary-color);
position: relative;
display: inline-block;
}
[aria-current]::after {
position: absolute;
content: '';
width: calc(100% - 3em);
height: 2px;
background-color: var(--main-primary-color);
display: block;
bottom: -17px;
} */
@media only screen and (max-width: 1002px) {
nav.hide {
display: none;
src/lib/components/Navigation/lms.svelte
+3 -3
View File
@@ -11,7 +11,7 @@
export let navClass = '';
function toggleTheme() {
function toggleDarkMode() {
$appStore.isDark = !$appStore.isDark;
toggleBodyByTheme($appStore.isDark);
@@ -21,7 +21,7 @@
}
</script>
<nav class="{navClass} flex w-full p-2 md:px-6 bg-blue-600">
<nav class="{navClass} flex w-full p-2 md:px-6 bg-primary-600">
<ul class="flex w-full items-center">
<div class="">
<a href={$page.url.pathname} title="Go to ClassroomIO Home" id="logo" class="text-lg">
@@ -35,7 +35,7 @@
<NotificationIcon size={20} class="text-white mr-2" />
</li>
<li>
<IconButton size="small" onClick={toggleTheme}>
<IconButton size="small" onClick={toggleDarkMode}>
{#if $appStore.isDark}
<SunIcon size={16} class="text-white" />
{:else}