#364 Dark Mode

frontend/src/App.vue

@@ -28,7 +28,199 @@
 });
 </script>
 <style>
+@import "./assets/variables.css";
 main {
   min-height: calc(100vh - 10rem);
+  background:
+  /* Top */
+  radial-gradient(farthest-corner at 500px 500px, var(--blurredColour1) 0.1%, rgba(255, 255, 255, 0) 26%),
+  radial-gradient(farthest-corner at 500px 500px, var(--blurredColour1) 0.1%, rgba(255, 255, 255, 0) 26%),
+  radial-gradient(farthest-corner at 7% 7%, var(--blurredColour2) 0.1%, rgba(255, 255, 255, 0) 8%),
+  radial-gradient(farthest-corner at 17% 40px,  var(--blurredColour3) 1%, rgba(255, 255, 255, 0) 16%),
+  radial-gradient(farthest-corner at 17% 40px,  var(--blurredColour3) 1%, rgba(255, 255, 255, 0) 16%),
+  radial-gradient(farthest-corner at 36% 7%, var(--blurredColour4) 0.1%, rgba(255, 255, 255, 0) 18%),
+  radial-gradient(farthest-corner at 36% 7%, var(--blurredColour4) 0.1%, rgba(255, 255, 255, 0) 18%),
+
+  /* Bottom */
+  radial-gradient(farthest-corner at 95% 42%, var(--blurredColour5) 0.1%, rgba(255, 255, 255, 0) 26%),
+  radial-gradient(farthest-corner at 0% 58%, var(--blurredColour5) 0.1%, rgba(255, 255, 255, 0) 22%),
+  radial-gradient(circle farthest-corner at 65% 95%, var(--blurredColour3) 0.1%, rgba(255, 255, 255, 0) 13%),
+  radial-gradient( farthest-corner at 100% 87%, var(--blurredColour3) 0.1%, rgba(255, 255, 255, 0) 13%),
+  radial-gradient( farthest-corner at 84% 82%, var(--blurredColour4) 0.1%, rgba(255, 255, 255, 0) 13%),
+  radial-gradient(circle farthest-corner at 84% 82%, var(--blurredColour6) 0.1%, rgba(255, 255, 255, 0) 13%);
+  background-color: var(--background-color-primary);
+  backdrop-filter: blur(5px);
+  color: var(--text-primary-color) !important;
+}   
+
+p {
+  color: var(--text-primary-color);
+}
+
+h1 {
+  color: var(--text-primary-color);
+}
+
+h4 {
+  color: var(--text-primary-color);
+}
+/* Landing Page */
+.newSessionCard .landingPageCardButton{
+  background-color: var(--startButton);
+  border-radius: var(--buttonShape);
+  color: var(--text-primary-color);
+}
+
+.newSessionCard .landingPageCardButton:hover{
+  background-color: var(--startButtonHovered);
+  color: var(--text-primary-color);
+}
+
+.newSessionCard .landingPageCardButton:focus{
+  background-color: var(--startButtonHovered) !important;
+}
+
+.newSessionCard .card-footer {
+  background-color: #52173100; /* So the Footer does not overflow */
+}
+
+.joinSessionCard .landingPageCardButton{
+  background-color: var(--joinButton);
+  border-radius: var(--buttonShape);
+  color: var(--text-primary-color);
+}
+
+.joinSessionCard .landingPageCardButton:hover{
+  background-color: var(--joinButtonHovered);
+  color: var(--text-primary-color);
+}
+
+.joinSessionCard .card-footer {
+  background-color: #52173100; /* So the Footer does not overflow */
+}
+
+.reconnectSessionCard .landingPageCardButton {
+  background-color: var(--reconnectButton);
+  border-radius: var(--buttonShape);
+  color: var(--text-primary-color);
+}
+
+.reconnectSessionCard .landingPageCardButton:hover {
+  background-color: var(--reconnectButtonHovered);
+  color: var(--text-primary-color);
+}
+
+.reconnectSessionCard .landingPageCardButton:focus {
+  background-color: var(--reconnectButtonHovered) !important;
+}
+
+.reconnectSessionCard .card-footer {
+  background-color: #52173100; /* So the Footer does not overflow */
+}
+/* Prepare Page */
+.selectedTab  {
+  background-color: var(--preparePageMainColor) !important;
+}
+
+.selectedTextColor {
+  color: var(--text-primary-color) !important;
+}
+
+.notSelectedTab {
+  background-color: var(--preparePageInActiveTab) !important;
+  border-color: var(--preparePageBorderTab) !important;
+}
+
+.notSelectedTab:hover {
+  background-color: var(--preparePageInActiveTabHover) !important;
+}
+
+.notSelectedTextColor {
+  color: var(--text-primary-color) !important;
+}
+
+/*End of prepare Page */
+
+.dropDownLink {
+  color: var(--text-primary-color) !important;
+}
+.containerClass {
+  background-color: var(--landingPageCardsBackground) !important;
+  color: var(--text-primary-color) !important;
+}
+
+.dropdown-item {
+  color: var(--text-primary-color) !important;
+}
+
+.dropdown-item:hover {
+  color: black !important;
+}
+
+.dropdown-item.active {
+  background-color: var(--startButton) !important;
+}
+
+a.btn.joinButton {
+  background-color: var(--joinButton);
+  border-radius: var(--buttonShape);
+  color: var(--text-primary-color);
+}
+
+a.btn.joinButton:hover {
+  background-color: var(--joinButtonHovered);
+}
+
+a.btn.startButton {
+  background-color: var(--startButton);
+  border-radius: var(--buttonShape);
+  color: var(--text-primary-color);
+}
+
+a.btn.startButton:hover {
+  background-color: var(--startButtonHovered);
+}
+
+a.btn.startButton:focus {
+  background-color: var(--startButtonHovered) !important;
+}
+
+.btn.dropdown-toggle { /* User Estimation Button */
+  color: var(--text-primary-color);
+  background-color: var(--joinButton);
+}
+
+.btn.dropdown-toggle:active { /* User Estimation Button hold */
+  background-color: var(--joinButtonHovered) !important;
+  color: var(--text-primary-color) !important;
+}
+
+.btn.dropdown-toggle:hover { /* User Estimation Button Hover */
+  background-color: var(--joinButtonHovered);
+  color: var(--text-primary-color);
+}
+
+.btn-secondary:not(:disabled):not(.disabled).active, .show > .btn-secondary.dropdown-toggle { /* User Estimation Button clicked */
+  background-color: var(--joinButton) !important;
+  color: var(--text-primary-color) !important;
 }
+
+.btn-secondary:focus{ /* User Estimation Button after click & add User Story Button on click hold*/
+  background-color: var(--joinButtonHovered) !important;
+  color: var(--text-primary-color) !important;
+}
+
+.a.dropdown-item {
+  color: var(--text-primary-color) !important;
+}
+
+.a.dropdown-item:hover {
+  color: black !important;
+}
+
+.dropdown-menu {
+  background-color: var(--topNavigationBarColor) !important;
+  border-color: var(--text-primary-color) !important;
+}
+
 </style>

frontend/src/assets/variables.css

@@ -0,0 +1,95 @@
+:root {
+  --background-color-primary: #e2e2e2;
+  --blurredColour1: #94623400;
+  --blurredColour2: rgba(0, 0, 0, 0.219);
+  --blurredColour3: rgba(216, 125, 6, 0);
+  --blurredColour4: rgba(17, 9, 0, 0);
+
+  /* Bottom */
+  --blurredColour5: rgba(6, 1, 8, 0.24);
+  --blurredColour6: rgba(80, 80, 80, 0.219);
+
+  /*other basic stuff*/
+  --accent-color: #cacaca;
+  --text-primary-color: #222;
+  --element-size: 6rem;
+  --buttonShape: 1rem;
+  --linkColor: #254bb3;
+
+  /*Landing Page*/
+  --startButton: #946234e0;
+  --startButtonHovered: #9c5b1d;
+  --joinButton: #658462; 
+  --joinButtonHovered: #4d8a47;
+  --reconnectButton: #822E1C;
+  --reconnectButtonHovered: #9e2e15;
+  --pictureGradientEnd: rgba(19, 44, 20, 0.5);
+  --landingPageCardsBackground: #e4e4e4;
+  --blurBackGroundColor: rgba(80, 80, 80, 0.219);
+  /*Prepare page*/
+  --preparePageMainColor:#946234;
+  --preparePageInActiveTab: #ffffff;
+  --preparePageInActiveTabHover: #718A6F91;
+  --preparePageBorderTab: grey;
+  --preparePageImportUserStoriesButton: #30a858;
+  --preparePageActiveCardSet: black;
+  --preparePageInActiveCardSet: #e27712;
+  --preparePageTimerBackground: #974F0D3D;
+
+  /*Session Page*/
+  --textAreaColour: #c3c7bd;
+  --textAreaColourHovered: #c3c7bdb6;
+
+
+  /*other Stuff*/
+  --topNavigationBarColor: rgba(200, 200, 200, 0.75);
+  --popUpMenu: rgb(143, 143, 143);
+}
+
+/* Define styles for the root window with dark - mode preference */
+:root.dark-theme {
+  /*Background Colors*/
+  --background-color-primary: #010617;
+  --blurredColour1: rgba(76, 134, 185, 0.219);
+  --blurredColour2: rgba(167, 236, 219, 0.534);
+  --blurredColour3: rgba(151, 199, 241, 0.37);
+  --blurredColour4: rgba(255, 255, 255, 0.329);
+
+  /* Bottom */
+  --blurredColour5: rgba(211, 167, 236, 0.322);
+  --blurredColour6: rgba(170, 128, 180, 0.301);
+
+  /*other basic stuff*/
+  --accent-color: rgba(34, 34, 34, 0.863);
+  --text-primary-color: #ffffff;
+  --linkColor: #00ffdd;
+
+  /*Landing Page*/
+  --startButton: #13276D;
+  --startButtonHovered: #13266dc9;
+  --joinButton: #42104B;
+  --joinButtonHovered: #42104bb4;
+  --reconnectButton: #033347;
+  --reconnectButtonHovered: #033347bd;
+  --landingPageCardsBackground: #525252;
+  --blurBackGroundColor: #50505069;
+  --pictureGradientEnd: rgba(44, 19, 32, 0.5);
+
+  /*Prepare Page*/
+
+  --preparePageMainColor:#13276D;
+  --preparePageInActiveTab: #666565;
+  --preparePageInActiveTabHover: #42104B;
+  --preparePageBorderTab: white;
+  --preparePageImportUserStoriesButton: #7e5a0c;
+  --preparePageActiveCardSet: white;
+  --preparePageInActiveCardSet: #e27712;
+  --preparePageTimerBackground: #7EBCC98A; 
+  /*Session Page*/
+  --textAreaColour: #A8E8F65C;
+  --textAreaColourHovered: #a8e8f6b9;
+
+  /*other Stuff*/
+  --topNavigationBarColor: rgba(34, 34, 34, 0.863);
+  --popUpMenu: rgb(201, 201, 201);
+}