AgregoreWeb · akhileshthite · Apr 14, 2022 · Nov 13, 2024 · Apr 30, 2025 · May 7, 2025
diff --git a/docs/examples/browser-devenv-v2/files/style.css b/docs/examples/browser-devenv-v2/files/style.css
@@ -1,4 +1,4 @@
-@import url("agregore://theme/vars.css");
+@import url("browser://theme/vars.css");
 html {
     font-family: var(--ag-theme-font-family);
 }
diff --git a/docs/examples/browser-devenv-v3/files/style.css b/docs/examples/browser-devenv-v3/files/style.css
@@ -1,4 +1,4 @@
-@import url("agregore://theme/vars.css");
+@import url("browser://theme/vars.css");
 html {
     font-family: var(--ag-theme-font-family);
 }

diff --git a/docs/examples/browser-devenv-v3/index.html b/docs/examples/browser-devenv-v3/index.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
   <style>
-    @import url("agregore://theme/vars.css");
-    @import url("agregore://theme/style.css");
+    @import url("browser://theme/vars.css");
+    @import url("browser://theme/style.css");
   </style>
   <title>Agregore IPFS Development Environment V3</title>
   <h1>Agregore IPFS Development Environment V3</h1>

diff --git a/docs/examples/dlinktree-builder/script.js b/docs/examples/dlinktree-builder/script.js
@@ -85,7 +85,7 @@ async function assembleCode() {
     <!DOCTYPE html>
         <title>${pageTitle}</title>
         <style>
-            @import url("agregore://theme/style.css");
+            @import url("browser://theme/style.css");
             body {
                 overflow: hidden;
                 margin: 0;

diff --git a/docs/examples/dlinktree-builder/styles.css b/docs/examples/dlinktree-builder/styles.css
@@ -1,4 +1,4 @@
-@import url("agregore://theme/style.css");
+@import url("browser://theme/style.css");
 
 :root {
   --gap: 5px;

diff --git a/docs/examples/drag-and-drop/styles.css b/docs/examples/drag-and-drop/styles.css
@@ -1,4 +1,4 @@
-@import url("agregore://theme/vars.css");
+@import url("browser://theme/vars.css");
 html {
     background: var(--ag-theme-background);
     color: var(--ag-theme-text);

diff --git a/docs/examples/llm-appgen/index.html b/docs/examples/llm-appgen/index.html
@@ -5,7 +5,7 @@
 <meta name=" apple-mobile-web-app-capable" content="yes">
 <meta name="mobile-web-app-capable" content="yes">
 <style>
-    @import url(agregore://theme/style.css);
+    @import url(browser://theme/style.css);
 
     fieldset {
         display: flex;
@@ -59,7 +59,7 @@
     const PREFIX_MESSAGE = { role: SYSTEM, content: SYSTEM_PROMPT }
     const STORAGE_ITEM = "llm-appgen"
 
-    const CSS_VARS = await(await fetch('agregore://theme/vars.css')).text()
+    const CSS_VARS = await(await fetch('browser://theme/vars.css')).text()
 
     getOwnDrive().then((url) => {
         window.alllinks.href = url
@@ -120,7 +120,7 @@
 <meta name="mobile-web-app-capable" content="yes">
 <meta name="description" content=${description}>
 <style>
-    @import url(agregore://theme/style.css);
+    @import url(browser://theme/style.css);
     ${css}
 </style>
 <!--

diff --git a/docs/examples/llm-chat.html b/docs/examples/llm-chat.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <title>LLM Chat</title>
 <style>
-@import url("agregore://theme/style.css");
+@import url("browser://theme/style.css");
 
 @keyframes changeOpacity {
   0% {opacity: 1;}

diff --git a/docs/examples/llm-echo-chamber.html b/docs/examples/llm-echo-chamber.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <title>LLM Echo Chamber</title>
 <style>
-  @import url("agregore://theme/style.css");
+  @import url("browser://theme/style.css");
 
   @keyframes changeOpacity {
     0% {

diff --git a/docs/examples/llm-lenses-chat/index.html b/docs/examples/llm-lenses-chat/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <title>Tonal Lens Simulator</title>
 <style>
-  @import url("agregore://theme/style.css");
+  @import url("browser://theme/style.css");
 
   @keyframes changeOpacity {
     0% {

diff --git a/docs/examples/llm-vision.html b/docs/examples/llm-vision.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <title>LLM Chat</title>
 <style>
-    @import url("agregore://theme/style.css");
+    @import url("browser://theme/style.css");
 
     @keyframes changeOpacity {
         0% {

diff --git a/docs/examples/p2pad/codeEditor.js b/docs/examples/p2pad/codeEditor.js
@@ -7,7 +7,7 @@ import { $, loadingSpinner, backdrop, iframe } from './common.js'; // Import com
 
 // Import CSS from Agregore theme to use in the iframe preview
 export let basicCSS = `
-@import url("agregore://theme/style.css");
+@import url("browser://theme/style.css");
             body {
                 font-size: 1.2rem;
                 margin: 0;

diff --git a/docs/examples/quickcode.html b/docs/examples/quickcode.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <title>Quick Code</title>
 <style>
-    @import url("agregore://theme/style.css");
+    @import url("browser://theme/style.css");
 
     @keyframes changeOpacity {
         0% {

diff --git a/docs/examples/themebuilder.html b/docs/examples/themebuilder.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <title>Theme Builder</title>
 <style>
-    @import "agregore://theme/style.css";
+    @import "browser://theme/style.css";
 </style>
 
 <h1>Theme Builder</h1>

diff --git a/docs/theming.md b/docs/theming.md
@@ -1,6 +1,6 @@
 ## Theming - Agregore Browser
 
-Agregore provides CSS variables for themeing the browser at the URL `agregore://theme/vars.css`.
+Agregore provides CSS variables for themeing the browser at the URL `browser://theme/vars.css`.
 
 The contents of this look something like:
 
@@ -25,7 +25,7 @@ These can be imported anywhere you'd like to use browser styling.
 
 Specifically, you should try to use the `--ag-theme-*` variables for the page when possible.
 
-You can also make use of the `agregore://theme/style.css` which adds some default styling to stuff like headers, the background/text colors, and links.
+You can also make use of the `browser://theme/style.css` which adds some default styling to stuff like headers, the background/text colors, and links.
 
 This is useful for styling markdown pages or other pages with basic HTML. You probably shouldn't include this if you're doing something fancy with styling as the styles may change over time.
 
@@ -55,7 +55,7 @@ More styles will be added here as needed. If you feel we should standardize on s
 
 For convenience, Agregore bundles highlight.js and a default theme for it.
 
-You can load it up using `agregore://theme/highlight.js` and `agregore://theme/highlight.css`.
+You can load it up using `browser://theme/highlight.js` and `browser://theme/highlight.css`.
 
 ---
 

diff --git a/docs/tutorials/dlinktree-builder.md b/docs/tutorials/dlinktree-builder.md
@@ -65,7 +65,7 @@ In this step, we'll apply CSS styles to make the Dlinktree visually appealing an
 Navigate to the CSS container in the P2Pad code editor and replace the existing content with the following CSS code:
 
 ```css
-@import url("agregore://theme/style.css");
+@import url("browser://theme/style.css");
 
 :root {
     --gap: 5px;
@@ -159,7 +159,7 @@ select {
 
 ### Key Aspects of the CSS Code
 
-1. **Agregore Theming Integration**: The @import url("agregore://theme/vars.css"); line integrates the Dlinktree with the Agregore browser's theme, ensuring that the app's look and feel match the user's theme settings.
+1. **Agregore Theming Integration**: The @import url("browser://theme/vars.css"); line integrates the Dlinktree with the Agregore browser's theme, ensuring that the app's look and feel match the user's theme settings.
 
 2. **Layout and Responsiveness**: The .grid-container uses CSS Grid to organize content into a single column, adaptable to the content's length. The media query ensures the layout remains user-friendly on mobile devices.
 
@@ -263,7 +263,7 @@ async function assembleCode() {
     <!DOCTYPE html>
         <title>${pageTitle}</title>
         <style>
-        @import url("agregore://theme/style.css");
+        @import url("browser://theme/style.css");
 
         body {
             overflow: hidden;

diff --git a/docs/tutorials/drag-and-drop.md b/docs/tutorials/drag-and-drop.md
@@ -49,7 +49,7 @@ Notice the simplicity of our HTML file.
 Create a styles.css file for styling the application:
 
 ```css
-@import url("agregore://theme/vars.css");
+@import url("browser://theme/vars.css");
 html {
     background: var(--ag-theme-background);
     color: var(--ag-theme-text);
@@ -80,7 +80,7 @@ main {
 - Inside this flex container, `justify-content: center;` horizontally centers the child elements, and `align-items: center;` vertically centers them. Together, these properties ensure that any content within `#uploadBox`, the `<h1>` element in our case, is centered both horizontally and vertically.
 
 #### Importing the Global Agregore Theme
-- In our `styles.css`, you'll notice the line `@import url("agregore://theme/vars.css");`. This imports a set of CSS variables defined by the Agregore browser, allowing us to use consistent theming across our application. These variables include colors, font family, and more, which are used to style various elements of our app.
+- In our `styles.css`, you'll notice the line `@import url("browser://theme/vars.css");`. This imports a set of CSS variables defined by the Agregore browser, allowing us to use consistent theming across our application. These variables include colors, font family, and more, which are used to style various elements of our app.
 
 - By using these variables, our app's look and feel will align with the user's configured theme in the Agregore browser, providing a seamless and integrated experience.
 

diff --git a/docs/tutorials/ipfs-3rdparty-dep/index.md b/docs/tutorials/ipfs-3rdparty-dep/index.md
@@ -234,7 +234,7 @@ Now we can remove all the redundant `<link>` and `<scirpt>` tags from `index.htm
 Throughout we've used dynamically generated `style` tags in in-line styles interchangeably. Now is a good time to consolidate styles. Update `style.css` to contain the following styles:
 
 ```css
-@import url("agregore://theme/vars.css");
+@import url("browser://theme/vars.css");
 html {
     font-family: var(--ag-theme-font-family);
 }

diff --git a/docs/tutorials/ipfs-dir-upload/index.md b/docs/tutorials/ipfs-dir-upload/index.md
@@ -47,7 +47,7 @@ Let's start by updating `index.html`. We will add a form with two inputs. The fi
 Next we will create the stylesheet we've referenced above. Open the editor, but instead of selecting a file, type `style.css` in the filename field and add the following CSS to the 'Content' field:
 
 ```css
-@import url("agregore://theme/vars.css");
+@import url("browser://theme/vars.css");
 html {
     font-family: var(--ag-theme-font-family);
 }
@@ -336,7 +336,7 @@ Next we can update `index.html` and replace the form with the custom element:
 And let's remove the CSS we moved from `style.css`:
 
 ```diff
-@import url("agregore://theme/vars.css");
+@import url("browser://theme/vars.css");
 html {
     font-family: var(--ag-theme-font-family);
 }

diff --git a/docs/tutorials/p2pad-code-editor.md b/docs/tutorials/p2pad-code-editor.md
@@ -160,7 +160,7 @@ Let's do a quick overview of what each of these sections do:
 In `styles.css`, include the necessary styles:
 
 ```css
-@import url("agregore://theme/vars.css");
+@import url("browser://theme/vars.css");
 
 :root {
     --gap: 5px;
@@ -320,7 +320,7 @@ Now, let's look at the purpose of each of these styles.
 Here's a breakdown of key elements in the stylesheet:
 #### Importing Agregore Theme Variables
 ```css
-@import url("agregore://theme/vars.css");
+@import url("browser://theme/vars.css");
 ```
 - This line imports CSS variables from the Agregore browser theme. These variables provide consistent theming and include settings for colors, fonts, and more.
 
@@ -412,7 +412,7 @@ import { $, loadingSpinner, backdrop, iframe } from './common.js'; // Import com
 
 // Import CSS from Agregore theme to use in the iFrame
 export let basicCSS = `
-@import url("agregore://theme/vars.css");
+@import url("browser://theme/vars.css");
             body, * {
                 font-size: 1.2rem;
                 margin: 0;
@@ -474,7 +474,7 @@ document.addEventListener('DOMContentLoaded', () => {
 #### Agregore Theme CSS Import
 ```javascript
 export let basicCSS = `
-@import url("agregore://theme/vars.css");
+@import url("browser://theme/vars.css");
             body, * {
                 // Basic CSS styles
             }

diff --git a/docs/tutorials/process.md b/docs/tutorials/process.md
@@ -36,7 +36,7 @@ Ideally, it should be possible for a person to start off with either Agregore's
 Sometimes you might want to pull data from a server for something like an RSS reader, but you should make sure that your app will at least load, or hopefully be useful in some way if that server isn't available.
 
 6: When possible, try using Agregore's built in [theming support](./theming).
-This might involve importing the user-configurable CSS variables from `agregore://theme/vars.css` to add splashes of color, or using the entire `agregore://theme/style.css` file to add default styling to headers and code blocks.
+This might involve importing the user-configurable CSS variables from `browser://theme/vars.css` to add splashes of color, or using the entire `browser://theme/style.css` file to add default styling to headers and code blocks.
 This is useful to give apps a similar "agregore-y" look and feel and gives users the option to configure the styles of all the apps they use on the local-first web by modifying their Agregore config with custom colors.
 
 These aren't hard restrictions and you're free to break outside of them whenever you see fit, but their main purpose is to keep things simple and to keep the apps local-first as much as we can.

diff --git a/docs/tutorials/themebuilder-tutorial.md b/docs/tutorials/themebuilder-tutorial.md
@@ -3,7 +3,7 @@
 
 ## The Idea ✨
 
-Jesse is using the Agregore theme (found [here](agregore://theme/style.css) or [here](https://agregore.mauve.moe/docs/theming)) to keep their apps looking cohesive.
+Jesse is using the Agregore theme (found [here](browser://theme/style.css) or [here](https://agregore.mauve.moe/docs/theming)) to keep their apps looking cohesive.
 They want to change up the theme, so they navigate to ipns://themebuild.er to play around with the colors until they find something they like, then export it to reuse it in Agregore.
 
 ### Preamble
@@ -25,12 +25,12 @@ So, let's start making our app, our basic endgoal here is to have some color pic
 
 ### Set Up
 
-First let's set up our file, if you navigate to agregore://theme/vars.css you can see Agregore's default styles.
-You can add these styles to your jsfiddle by pasting `@import "agregore://theme/style.css"` into the CSS section.
+First let's set up our file, if you navigate to browser://theme/vars.css you can see Agregore's default styles.
+You can add these styles to your jsfiddle by pasting `@import "browser://theme/style.css"` into the CSS section.
 
 The reason we're doing things this was is because we're gonna want to be able to apply the default styles and mess with them with custom values.
 
-The variables for the colors can be found in another file called agregore://theme/vars.css which should look like this:
+The variables for the colors can be found in another file called browser://theme/vars.css which should look like this:
 
 ```css
 :root {
@@ -49,15 +49,15 @@ After we've done that we're going to want to have some content for the CSS to st
 And with that, we're done set up. You should have a CSS file that looks like this:
 
 ```css
-@import "agregore://theme/style.css"
+@import "browser://theme/style.css"
 ```
 
 And an HTML file that looks like this:
 
 ```html
 <h1>Theme Builder</h1>
 <h2>The Idea ✨</h2>
-<p>Jesse is using the Agregore theme (found <a href="agregore://theme/style.css">here</a> or <a href="https://agregore.mauve.moe/docs/theming">here</a>) to keep their apps looking cohesive. They want to change up the theme, so they navigate to ipns://themebuild.er to play around with the colors until they find something they like.
+<p>Jesse is using the Agregore theme (found <a href="browser://theme/style.css">here</a> or <a href="https://agregore.mauve.moe/docs/theming">here</a>) to keep their apps looking cohesive. They want to change up the theme, so they navigate to ipns://themebuild.er to play around with the colors until they find something they like.
 </p>
 <h3>Preamble</h3>
 <p>This tutorial assumes a very basic level of web development experience as well as a small familiarity with p2p web protocols or IPFS. Maybe you've made a handful of single page web apps and have heard about the distributed web before but haven't really played around with it.</p>
@@ -67,10 +67,10 @@ And an HTML file that looks like this:
 <h2>Developing Our App</h2>
 <p>So, let's start making our app, our basic endgoal here is to have some color pickers to choose the theme colors, an "example page" to reflect the color changes, and a way for the user to "save" those changes.</p>
 <p>
-First let's set up our file, if you navigate to <code>agregore://theme/style.css</code> we're just going to copy paste this whole thing into the css. 
+First let's set up our file, if you navigate to <code>browser://theme/style.css</code> we're just going to copy paste this whole thing into the css. 
 </p>
 <p>
-Once you've done that, delete the second line (the <code>@import url("agregore://theme/vars.css")</code>) and replace it with the following:
+Once you've done that, delete the second line (the <code>@import url("browser://theme/vars.css")</code>) and replace it with the following:
 </p>
 <pre>
 <code>:root {
@@ -84,7 +84,7 @@ Once you've done that, delete the second line (the <code>@import url("agregore:/
 }</code>
 </pre>
 <p>
-If you took a peek at <code>agregore://theme/vars.css</code> you might notice that this looks very similar because it's essentially that file. The reason we're doing things this was is because we're gonna want to be able to mess with the CSS file and edit it freely. 
+If you took a peek at <code>browser://theme/vars.css</code> you might notice that this looks very similar because it's essentially that file. The reason we're doing things this was is because we're gonna want to be able to mess with the CSS file and edit it freely. 
 </p>
 <p>
 After we've done that we're going to want to have some content for the CSS to style. For that I decided to use this tutorial up to this point!</p>
@@ -225,7 +225,7 @@ In the end you should have a file that looks like this:
 <!DOCTYPE html>
 <title>Theme Builder</title>
 <style>
-    @import "agregore://theme/style.css";
+    @import "browser://theme/style.css";
 </style>
 
 <h1>Theme Builder</h1>