chore: change theme

next-hat · Oct 1, 2023 · 438105b · 438105b
1 parent f67762b
commit 438105b
Show file tree

Hide file tree

Showing 8 changed files with 460 additions and 552 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -3,8 +3,8 @@
 
 const path = require('path');
 
-const lightCodeTheme = require('prism-react-renderer/themes/github');
-const darkCodeTheme = require('prism-react-renderer/themes/oceanicNext');
+const lightCodeTheme = require('prism-react-renderer').themes.github;
+const darkCodeTheme = require('prism-react-renderer').themes.oceanicNext;
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
@@ -98,7 +98,7 @@ const config = {
           /**
            * Highlight color for docs
            */
-          primaryColor: '#1890ff',
+          // primaryColor: '#1890ff',
         },
       },
     ],
@@ -114,7 +114,7 @@ const config = {
         },
       ],
       colorMode: {
-        defaultMode: 'dark',
+        defaultMode: 'light',
         disableSwitch: false,
         respectPrefersColorScheme: true,
       },

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,16 +12,16 @@
   "dependencies": {
     "@docusaurus/core": "^2.4.1",
     "@docusaurus/plugin-google-analytics": "^2.4.1",
-    "@docusaurus/preset-classic": "^2.4.1",
+    "@docusaurus/preset-classic": "^2.4.3",
     "@mdx-js/react": "^1.6.22",
-    "clsx": "^1.2.1",
-    "prism-react-renderer": "^1.3.5",
+    "clsx": "^2.0.0",
+    "prism-react-renderer": "^2.0.6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "redocusaurus": "^1.6.1"
+    "redocusaurus": "^1.6.4"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "^2.4.1"
+    "@docusaurus/module-type-aliases": "^2.4.3"
   },
   "browserslist": {
     "production": [

diff --git a/redocly.yaml b/redocly.yaml
@@ -4,7 +4,6 @@
 extends:
   - recommended
 
-
 rules:
   no-unused-components: error
 
@@ -25,4 +24,4 @@ theme:
     theme:
       colors:
         primary:
-          main: '#ff9800'
+          # main: '#ff9800'
diff --git a/src/components/HomepageFeatures/style.module.css b/src/components/HomepageFeatures/style.module.css
@@ -10,15 +10,14 @@
 .body_card {
   margin: 0px;
   outline: none;
+  color: var(--ifm-font-color-base);
   text-decoration: none !important;
   display: flex;
   min-height: 152px;
   flex-direction: column;
   width: 100%;
   border-radius: 4px;
-  border: 1px solid black;
   padding: 24px 36px;
-  background-color: #1B1B1D;
   transition: transform 150ms ease-in-out;
   transition-property: transform;
   transition-duration: 150ms;
@@ -27,6 +26,10 @@
   box-shadow: 0 3px 6px rgb(11 33 74 / 9%), 0 -2px 2px rgb(11 33 74 / 3%);
 }
 
+[data-theme="dark"] .body_card {
+  box-shadow: 0 3px 6px rgb(255 255 255 / 9%), 0 -2px 2px rgb(255 255 255 / 3%);
+}
+
 .body_card:hover {
   opacity: 1;
   transform: scale(1.01);
@@ -35,13 +38,11 @@
 .body_card_title {
   font-size: 22px;
   margin: 8px 0px;
-  color: #df8013;
 }
 
 .body_card_description {
   font-size: 14px;
   margin: 0px;
-  color: white;
 }
 
 .body_cards {

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -4,13 +4,7 @@
  * work well for content-centric websites.
  */
 
-* {
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
-    Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-}
-
 code, span {
-  font-family: monospace;
   white-space: pre;
 }
 
@@ -26,7 +20,6 @@ table {
 thead {
   overflow: visible;
   border: 0px !important;
-  background-color: #d7dade;
 }
 
 thead tr {
@@ -65,86 +58,16 @@ tr {
   font-size: 14px;
 }
 
-tr:nth-child(even) {
-  background-color: #1B1B1D;
-}
-
 th {
-  color: #0f161e;
   text-align: left;
   font-size: 14px;
   font-weight: bold;
   border: 0px !important;
 }
 
-code {
-  color: #ff9800;
-}
-
-.navbar__items--right button {
-  color: white;
-}
-
-.navbar__items--right button:hover {
-  background-color: #ff9800;
-}
-
-.navbar-sidebar__brand button:hover {
-  background-color: #ff9800;
-}
-
-.navbar-sidebar__brand button {
-  color: white;
-}
-
-.gsc-selected-option-container {
-  width: 100px;
-}
-
-.navbar__toggle {
-  color: white;
-}
-
-.navbar-sidebar__back {
-  color: white;
-}
-
-.menu__list-item-collapsible--active {
-  background-color: #262628;
-}
-
-.navbar-sidebar__back {
-  background-color: #262628;
-}
-
-nav.menu {
-  background-color: white;
-  background-color: black;
-}
-
-.pagination-nav__link {
-  border: 1px solid black;
-}
-
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-emphasis-600: white;
-  --ifm-menu-color-background-active: #262628;
-  --ifm-menu-link-sublist-icon-filter: invert(100%) sepia(94%) saturate(17%)
-    hue-rotate(223deg) brightness(104%) contrast(98%);
-  /* NavBar */  
-  --ifm-navbar-background-color: #1B1B1D !important;
-  --ifm-navbar-link-color: white;
-  --ifm-menu-color: white;
-  /* Footer */
-  --ifm-footer-title-color: white;
-  --ifm-footer-link-color: white;
-  --ifm-footer-background-color: #1B1B1D;
-  --ifm-toc-border-color: #444950;
-  --ifm-blockquote-border-color: #1B1B1D;
-  --ifm-footer-color: white;
   /* Text */
-  --ifm-color-emphasis-300: white;
   --ifm-color-primary: #ff9800;
   --ifm-color-primary-dark: #df8013;
   --ifm-color-primary-darker: #c46f0f;
@@ -153,36 +76,16 @@ nav.menu {
   --ifm-color-primary-lighter: #ffc165;
   --ifm-color-primary-lightest: #ffc46b;
   --ifm-code-font-size: 95%;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
-}
-
-[data-theme='dark'] .pagination-nav__link {
-  border: 1px solid white;
-}
-
-[data-theme='dark'] code {
-  background-color: #1B1B1D !important;
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-emphasis-600: white !important;
-  /* Nav Bar */
-  --ifm-navbar-background-color: #1B1B1D;
-  /* Footer */
-  --ifm-footer-background-color: #1B1B1D;
-  /* Global background */
-  --ifm-background-color: black !important;
   /* Text */
-  --ifm-heading-color: white;
   --ifm-color-primary: #ff9800;
   --ifm-color-primary-dark: #df8013;
   --ifm-color-primary-darker: #c46f0f;
   --ifm-color-primary-darkest: #7e4e17;
   --ifm-color-primary-light: #ffb340;
   --ifm-color-primary-lighter: #ffc165;
   --ifm-color-primary-lightest: #ffc46b;
-  --ifm-font-color-base-inverse: white;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
-
 }
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -39,7 +39,7 @@ function SearchBar() {
 
 function HomepageHeader() {
   return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
+    <header className={clsx('hero hero', styles.heroBanner)}>
       <div className={clsx(styles.heroBannerContent)}>
         <h1 className={clsx("hero__title", styles.heroTitle)}>What can we help you find ?</h1>
         <SearchBar />